프론트엔드 로드맵 14 - CSS 레이아웃 만들기

레이아웃은 특정 공간에 여러 구성 요소를 효과적으로 배치하는 것을 말한다. css를 이용하거나 table 요소로 구성이 가능하다. 하지만 스타일 변경 및 보수 과정에서 번거로움이 있어 요즘에는 table을 안 쓰는 추세다.

 

HTML 레이아웃 구성 요소

 

1. float 가장 많이 쓰이는 방법. 

float된 레이아웃 하단에는 clear: both로 정리한다. 외에도 display: table, display:inline-block 등으로 레이아웃을 나누는 방법들이 다양하다.

 

2. position 값으로 이동

부모요소에 position: relative를 주고 자식에 position: absolute를 줘서 위치를 잡아주면 된다. float과 position은 height값이 제대로 먹지 않는 경우가 많다. 때문에 

3. flexbox

부모요소에 display : flex; 선언하면 자식 요소는 flex box가 된다.

flex-direction : column / row (loumns 를 사용해 나열 방향을 결정)

flex(자식요소에) : 1 /* 1 1 0 */ (확대/축소 유동적으로 변경 + 자식요소 정렬을 부모 사이즈 기준으로 하겠다는 의미 - 여러개일 경우 균등분배)

flex : auto /* 1 1 auto */ (이미지 박스를 유동적으로 반응할 수 있음. 부모 크기에 영향을 받음)

margin을 이용해 자식요소를 특정 위치에 배치할 수 있다.

margin-top : auto; 를 하면 페이지 최하단에 위치한다 (바닥에 붙는 푸터)

justify-content : 정렬 방식 선택 flex-start(기본값), center(중앙정렬), flex-end(주축 오른쪽 기준 정렬), space-around(일정간격으로 정렬), space-between(시작과 끝에 하나씩 정렬하고 나머지는 일정간격 정렬)

align-items : center (타이틀 수직 중앙정렬)

flex-wrap : wrap (부모영역을 벗어났을 때 줄을 바꿔줌. 위아래로 흐르는 목록)

 

단, flexbox는 IE10이상 지원하며, 아직까지 완전하지 않아서 IAE10, IE11에서 버그 발생하기도 하므로 사용에 유의할 것. >>그렇다고 숙지를 안 해두기엔 언젠가 flexbox의 시대가 도래할 것이므로....

 

4. Grid

부모요소에 display : grid;

grid-template-columns : 100px 100px 100px; (열의 너비)

grid-template-rows : 50px 50px; (행의 높이)

 

.item{grid-column-start : 1; grid-column-end : 3;} (첫번째 그리드 줄에서 시작해서 3번째 그리드 줄까지 확장)

>>(위 구문을 줄이면) grid-column : 1/3

grid-row-start / grid-row-end (행) / grid-row :

 

참고페이지 : 
https://d2.naver.com/helloworld/8540176
https://www.freecodecamp.org/news/learn-css-grid-in-5-minutes-f582e87b1228/