레이아웃(Layout) 기본
레이아웃 배치시 사용할 수 있는 방법으로는 float, flex, grid 방식이 있습니다.
01_ float
특정 요소(elemnet)를 떠있게, 부유하게 만드는 속성입니다.
즉, 박스를 왼쪽(left) 또는 오른쪽(right)으로 배치시키는 방법입니다.
flaot를 사용할시 영역이 깨지는 버그(부모요소가 자식요소의 높이를 인지못함)가 있는데, 이 버그는
1) 깨지는 영역에 'clear: both' 속성을 사용합니다.(비추)
2) 부모 요소 영역에 overflow:hidden을 설정합니다.
3) flaot을 사용한 부모요소에 clearfix를 설정합니다
float를 취소할 때에는 float:none; 합니다.
| 속성 값 | 속성 설명 |
|---|---|
| left | 좌측 빈공간부터 채워 내려옴 |
| right | 우측 빈공간부터 채워 내려옴 |
| both | 어느쪽도 채우지 않고 다시 한단으로 배치 |
clearfix를 사용할때는 아래와 같이 사용합니다.
.clearfix::before, //- ::before, ::after : 가상요소 사용하여 컨테츠를 사용
.clearfix::after { //- ::before, ::after : 가상요소 사용하여 컨테츠를 사용
content: '';
display: block;
line-height: 0;
}
.clearfix::after {
clear: both; //flaot 의 성질을 양족에서 차단하는 역할
}
overflow 속성값
| 속성 값 | 속성 설명 |
|---|---|
| visible | 기본값. 요소밖으로 넘친 컨텐츠를 그대로 표시합니다. |
| hidden | 요소 밖으로 넘친 컨텐츠는 잘리고 보이지 않습니다. |
| scroll | 넘친 컨텐츠는 잘리고 스크롤바가 생겨서 볼 수 있습니다. 가로/세로 모두 생깁니다. |
| auto | 컨텐츠가 넘칠 경우 자동으로 스크롤바가 생성됩니다.가로/세로 모두 생깁니다. |
float를 활용한 기본 구조
02_ flex
flex란 유연성을 뜻하는데, 요소들을 자유자재로 위치시키는 속성입니다.
flex요소는 float속성과 다르게 부모요소에만 적용하면 됩니다.
flex는 시멘틱 태그를 활용해 주는게 태그 구조를 파악하기 용이하므로 시멘틱 태그를 사용합시다!
flex의 속성값은 다양하게 있지만 여기서는 flex-wrap(부모요소에 적용하는 속성값)에 대해서만 알아보겠습니다.
| 속성 값 | 속성 설명 |
|---|---|
| flex-wrap:wrap | 부모요소를 넘어간다면 줄바꿈을 합니다. |
| flex-wrap:nowrap | 부모요소를 넘어가더라도 계속 한줄에 배치합니다 |
| flex-wrap:wrap-reverse | wrap과 같은 방식으로 작동하지만 역순으로 배치가 됩니다. |
flex를 활용한 기본 구조
03_ grid
컨테이너와 아이템이라는 두가지 개념으로 구분되어있습니다. 콘테이너는 아이템을 감싸는 부모 요소이고 각 아이템(자식 요소)들을 배치할 수 있습니다.
레이아웃을 표로 생각하여 배치한다고 생각하면 쉽습니다.
gird-area: 속성으로 이름을 지정한뒤
grid-template-areas:를 통해 각자 위치할 영역을 지정합니다.
grid-template-columns: 속성은 grid 트랙의 크기들을 지정해주는 속성입니다.(=width)
grid-template-rows: 속성은 grid 트랙의 높이들을 지정해주는 속성입니다.(=height)
댓글