레이아웃(LAYOUT)
레이아웃이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것을 말합니다.
레이아웃 방법
01. float 방법
'float'은 원래 '뜨다'라는 의미이며, 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성입니다. div태그로 틀을 잡는데, div 태그는 block 특성을 가지고 있어 세로로 표시됩니다. 이것을 가로로 정렬시켜주는 것이 float입니다. 이 속성을 쓰면 요소가 보이지 않는 버그가 생기는데, clear:both;를 사용하면 요소를 다시 볼 수 있습니다.
float: left;
버그로 나타나지 않는 요소에는
clear: both;
사용예시
See the Pen float 레이아웃 by Kim-chanmi (@kim-chanmi) on CodePen.
02. flex 방법
레이아웃 배치 전용으로 나온 속성입니다. float 방법보다 단조롭고 편한 방법입니다. float방법처럼 필요한 각각 요소들에 적용하는 것이 아닌 자식 요소를 감싸고 있는 부모 요소에게만 적용하면 됩니다.
display: flex
flex-wrap: wrap; ->인라인으로 배치하며, 행 안에 다 차면 다음행으로 이동
flex-direction: row; -> 가로 방향으로 배치
flex-direction: row-reverse; -> 가로 역순 방향으로 배치
flex-direction: column; -> 세로 방향으로 배치
flex-direction: column-reverse; -> 세로 역순으로 배치
사용예시
See the Pen flex 레이아웃 by Kim-chanmi (@kim-chanmi) on CodePen.
03. grid 방법
table처럼 두 방향(가로-세로) 레이아웃 시스템(2차원)입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능합니다. flex와 마찬가지로 부모 요소에만 적용하면 됩니다.
display: grid
grid-template-areas: ; -> 요소 이름을 참조해 table처럼 세분화해서 배치
grid-template-rows; -> 행의 크기 지정
grid-template-columns; -> 열의 크기 지정
사용예시
See the Pen grid 레이아웃 by Kim-chanmi (@kim-chanmi) on CodePen.
'CSS' 카테고리의 다른 글
| [CSS]강아지 애니메이션 (3) | 2022.08.18 |
|---|---|
| [CSS]SCSS (2) | 2022.08.18 |
| [CSS]미디어쿼리 (3) | 2022.08.15 |
| [CSS]기본문법 (3) | 2022.08.13 |
| [CSS]벡터방식과 비트맵방식 (10) | 2022.08.09 |
댓글