본문 바로가기

개발새발/html, css10

[CSS] 반응형 웹 반응형 웹 반응형웹이란? 다양한 디바이스에 접속했을 때, 기기의 viewport 규격에 반응하여 레이아웃이 자동으로 변경되는 웹페이지 미디어쿼리란? 뷰포트의 너비에 따라 웹사이트의 스타일 시트를 수정할 수 있다. 뷰포트 너비 외에도 단말기의 종류, 해상도 등을 기준으로 설정할 수 있다. @media 미디어 쿼리 @media screen and (max-width : 500px) { // 스크린의 viewport 너비가 500px 이하일 경우 // 적용시킬 스타일 시트 } breakPoint 반응형 웹 사이트 작업의 기준이 되는 중단점을 말한다. 간단하게 말해서, pc / 태블릿 / 모바일의 기준이 되는 규격 분기! 반응형웹에서 자주 쓰이는 속성 max-width & max-height 해당요소의 최대 너.. 2024. 4. 9.
[CSS] animation animation animation이란? 여러 이미지를 연결해서 자연스럽게 움직이는 것처럼 보이게 만드는 기법 CSS을 이용해서 애니메이션을 만드는 두 가지 방법 transition 속성 활용 animation 속성과 keyframe 활용 transition VS animation transition : 특정한 이벤트를 기점으로 작동함 (hover 등) animation : 시작하기 위한 이벤트가 필요 없음. 시작, 정지, 반복까지 제어할 수 있음 animation 속성은 @keyframes로 애니메이션을 정의하고, 정의한 애니메이션을 불러와서 제어해주어야 한다. animation-name 어떠한 keyframes를 요소에 적용할 것인지 지정 animation-duration 애니메이션을 한 번 재생하는.. 2024. 4. 9.
[CSS] transition과 transform transition transition이란? CSS에서 속성을 이용한 변화의 전, 후 사이에 애니메이션을 추가해서 움직임을 부드럽게 해주는 것 transition-property 어떠한 속성에 transition을 적용할 것인지 지정 transition-property: color, transform transition-duration transition에 걸리는 시간을 지정 transition-timing-function transition의 속도 패턴을 지정한다 [종류] linear : 일정한 속도로 변화한다. ease: 시작할 때는 빨라지다 느려진다. ease-in: 천천히 시작했다가, 속도를 높여 끝난다. ease-out: 빠른 속도로 시작했다가, 천천히 끝난다. ease-in-out: 천천히 시.. 2024. 4. 8.
[CSS] flex 레이아웃 flex레이아웃 CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에 기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다. 요소의 속성을 flex로 변경 display : flex flex-direction : row(기본값) | columns justify-content : 중심축 방향 정렬 flex-start(기본값), flex-end, center, space-around, space-between, space-evenly align-items : 중심축 반대 방향 정렬 stretch(기본값), flex-start, flex-end, center ⭐️ align-items는 flex-item이 한 줄 일 때 우선 적용! 두 줄 이상일 때에는 align-content라는 다른 .. 2024. 4. 8.
[CSS] position position이란? HTML요소가 배치되는 방식을 결정하는 속성 positioxn의 속성 5가지 static(기본값), relative, absolute, fixed, sticky top, left, right, bottom : 해당 방향 기준으로 요소의 좌표값을 변경 position: static(기본값) 요소를 문서상 원래 있어야 하는 위치에 배치한다. top, left, right, bottom 적용 불가 position: relative 원래 있던 자리를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 position: absolute 절대 좌표를 기준으로 요소의 위치를 조정할 수 있다. top, left, right, bottom 적용 가능 * .. 2024. 4. 7.
[CSS] 상속과 캐스케이딩 상속 CSS는 부모 요소에 지정한 속성 값을 자식요소에게도 상속해서 적용한다. 부묘요소에게만 속성을 줬지만, 자식에게도 속성이 상속되어 자동으로 적용된다. 그러나 모든 속성이 상속되는 것은 아니다. 상속이 여러개 겹쳤을 경우, Cascading이라는 룰이 그 우선순위를 결정한다. 캐스케이딩(Cascading) 수많은 스타일 요소 중 어떤 스타일을 브라우저에 그릴지 결정해주는 CSS 우선순위 적용 원리 1. 중요도 : CSS가 선언된 위치에 따라 우선순위가 결정됨 ❗️브라우저 스타일 시트 < 사용자 스타일 시트 < 개발자 스타일 시트 사용자 스타일 시트 ? 사용자 폰트 지정, 고대비 모드 사용 등 개발자 스타일 시트 ? css를 이용하여 지정해주는 것 [중요도 정리] 1. 인라인 스타일 CSS 2. 요소 .. 2024. 4. 7.

티스토리툴바