푸으름

✏️ 미디어 쿼리의 속성종류설명width, height웹 페이지의 가로 너비, 세로 높이min-width, min-height웹 페이지의 최소 너비, 최소 높이max-width, max-height웹 페이지의 최대 너비, 최대 높이device-width, device-height단말기의 가로 너비, 세로 높이min-device-width, min-device-height단말기의 최소 너비, 최소 높이max-device-width, max-device-height단말기의 최대 너비, 최대 높이orientation: landscape단말기의 가로 모드orientation: portrait단말기의 세로 모드✏️ 플렉스 박스 레이아웃의 속성종류설명속성값display플렉스 컨테이너를 지정flex, inline-f..

✏️ CSS 그리드 레이아웃 용어플렉스 박스 레이아웃에서는 가로나 세로 중에서 하나를 주축으로 정해 놓고 플렉스 항목을 배치했다면, CSS 그리드 레이아웃에서는 그리드 항목을 배치할 때 가로와 세로를 모두 사용함. 플렉스는 1차원이고 그리드는 2차원이라고 생각, CSS그리드 레이아웃은 가로 방향을 가리키는 줄(row)와 세로 방향을 가리키는 칼럼(column)으로 웹 화면을 구성 ✏️ 그리드 컨테이너를 지정하는 display 속성그리드 레이아웃을 지정할 때에는 가장 먼저 그리드를 적용할 요소의 바깥 부분을 그리드 컨테이너로 만들어줘야 함. 그리드 컨테이너를 만들 때는 display 속성을 grid나 inline-grid로 지정종류설명grid컨테이너 안의 항목을 블록 레벨 요소로 배치inline-grid컨..

✏️ 그리드 레이아웃(Grid Layout)반응형 웹 디자인을 사용한 사이트는 화면 너비에 따라 웹 문서의 요소를 재배치해야 함, 재배치하려면 기준이 되는 레이아웃이 필요한데 이때 그리드 레이아웃을 사용하게 됨. 그리드 레이아웃은 웹 사이트를 여러 개의 칼럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것을 말하며 화면을 규칙적으로 배열하므로 레이아웃을 일정하게 유지 ✏️ 그리드 레이아웃의 특성시각적으로 안정된 디자인을 만들 수 있음업데이트가 편한 웹 디자인을 구성 가능요소를 자유롭게 배치할 수 있음✏️ 플렉서블 박스 레이아웃(flexible box layout)그리드 레이아웃을 기본으로 하고 각 박스를 원하는 위치에 따라 배치하는 것. 여유 공간이 생길 경우 너비와 높이를 적..