미디어 쿼리 : 미디어 유형이나 장치의 특성에 따라 스타일을 다르게 적용할 수 있게 하는 기능 주로 반응형 웹 디자인에서 사용되며 화면크기, 해상도, 디바이스 종류 등에 따라 스타일을 동적으로 조절하는 데 활용 뷰포트(Viewport) : 웹페이지가 보여지는 화면 영역 디바이스에 맞춰서 최적화 content 속성값 속성값 설명 width 뷰포트의 너비를 설정. 보통 device-width로 설정함 height 뷰포트의 높이를 설정. 잘 사용하지 않음 initial-scale 뷰포트의 초기 배율을 설정. 1이 default, 1보다 작으면 축소 값, 1보다 크면 확대 값으로 설정 minimum-scale 뷰포트의 최소 축소 비율을 설정. 0.25가 default maximum-scale 뷰포트의 최대 확대..
그리드 레이아웃으로 2차원 레이아웃 설계하기 display: grid; grid-template-rows: 100px 200px; → 두개의 행, 각각의 높이 100px, 200px grid-template-colums: 1fr 2fr; → 두개의 열, 첫번째 열은 1fr, 두번째 열은 2fr (1:2) fr : 비율 1fr 1fr은 repeat(2, 1fr);과 같은 방식으로도 표기 가능 최소수치를 정해주고싶으면 minmax(100px, 1fr) minmax(100px, 1fr);과 같은 방식으로도 가능 = repeat(2, minmax(100px, 1fr)) row-gap: 10px; → 행 사이의 갭 column-gap: 10px; → 열 사이의 갭 align-items: stretch; → 세로 ..
플렉스 박스 레이아웃 → 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 1차원 방식 : (가로, 세로) 부모 영역에 display: flex; display: flex vs inline-flex flex → 해당 요소를 블록 수준의 flex 컨테이너로 만듦, 수직으로 쌓이는 블록 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급 inline-flex → 해당 요소를 인라인 수준의 flex 컨테이너로 만듦, 수평으로 쌓이는 인라인 요소처럼 동작, 내부의 자식 요소들을 flex 아이템으로 취급 → 쉽게, display속성 블록 vs inline의 차이 flex-direction : flex 아이템들이 배치되는 주축의 방향 지정 (default : row) row, ro..
변형 속성 transform - 2d, 3d 존재 translate(); translateX(100px); → 우측으로 100px 이동 , (-100px) → 좌측으로 100px 이동 translateY(100px); → 하단으로 100px 이동, (-100px) → 상단으로 100px 이동 translate(100px, 100px); →X, Y 한번에 이동 Scale(); ScaleX(2); → 2배 확대 (좌우 반반) ScaleY(2); → 2배 확대 (상하 반반) Scale(2, 2); → 2배 확대 (상하좌우) skew(); skewX(30deg); → X축 기준으로 비틀기 각도만큼 비틀어짐 skewY(30deg); → Y축 기준으로 비틀기 각도만큼 비틀어짐 skew(30deg, 30deg); →..
전환효과보다 부드럽게 전환효과를 제어 가능 (세부적, 디테일하게 제어 가능) keyframe 규칙 정의필요 @keyframes 고유한이름 { 0%{ background-color: blue; } 100%{ background-color: orange; } } (최소조건) animation-name: 키프레임명; animation-duration: 적용시간; 0% 100%대신에 from to로 해도 무관 0% 25% 50% 100%등 여러 지점 추가 가능 animation-delay: 지연시간; animation-fill-mode → 애니메이션이 종료된 후의 상태 지정 none : 실행되기전 원상태, 실행 후 원상태 forwards : 시작지점의 스타일을 적용하지 않고 대기, 실행이 끝나면 종료 스타일로 ..
한 요소의 스타일 속성값을 다른 속성으로 변하게 함 → 전환 전환을 제어할 수 있는 효과 속성 (부드러운 전환효과 발생 최소 필요) transition-property: all; none, background-color(정확한 속성명) transition-duration: 2s; 전환효과 발생 전 지연시간 trasition-delay: 2s; 총 전환효과 발생 시간은 같지만, 2초에 도달하기 까지의 과정에 차이를 둘 수 있음 trasition-timing-function: line; ease, ease-in, ease-in-out, ease-out, cubic-bezier() → 사용자 정의 속도 transition → 단축(축약) 속성 ex. transition: background-color 2s l..
html요소를 원하는 위치에 배치할 수 있게 해주는 속성 position 속성 (좌표 속성으로 위치를 배치할 때 사용) static : (기본값) fixed : 좌표 속성에 의해서 요소를 배치하고 고정시킴 relative : (기본흐름에서 인식됨) → 기존 위치를 보장하면서 좌표 속성으로 배치 stickey : 기본 흐름 처럼 보이다가 top: 0 (설정값) 부터는 fixed처럼 보임 absolute : (절대적인 좌표 값으로 배치 → 기본흐름에서 벗어나 배치) ex. position: absolute; left: 200px; top: 0; 자식 요소의 position absolute 좌표 기준값은 부모요소가 됨 겹치는 경우 z-index 활용 (크면 클수록 높은 위치에 배치가 됨) float속성 - n..
body { background-color: red; } background-image: url('경로'); 반복은 background-repeat: no-repeat, repeat-x, repeat-y, repeat로 제어가능 background-size: (배경의 크기 지정 가능) ex. background-size: cover; background-position: 배경 이미지가 요소 내에서 어디에 위치할지 지정 가능 (left, right, top, bottom, center) ex. background-position: center center; background-attachment: fixed → 스크롤의 움직임에 따라 화면 고정 → background: url('.경로') no-repeat..