CSS 2. CSS Layout(Flexbox, CSS Grid)

CSS Layout(Flexbox, CSS Grid)

1. Flexbox(in container)

• container 태그에 display: flex;를 사용해 자식 태그들을 (일괄)컬럼 정렬할 수 있다.
• flex-wrap: 기본 nowrap으로 설정되어 있어 화면 크기를 줄여도 움직이지 않지만, wrap으로 바꾸면 화면 크기를 줄일 시 요소들이 아래로 내려간다.
• 가로축을 기준으로 요소들을 정렬할 때는 justify-content: flex-start/center/flex-end/space-between/space-around;
• 세로축을 기준으로 요소들을 정렬할 때는 algin-items: flex-start/center/flex-end/space-between/space-around;
• flex-wrap: wrap;일 때 algin-content: flex-start/center/flex-end/space-between/space-around; 를 사용하면 화면 크기를 줄였을 때의 정렬을 설정

2. Flexbox(in items)

• 각 아이템에 flex-grow: 비율;을 사용해 여백을 각각의 비율로 나누어 갖는다.
• 이 때 전체 아이템에 flex-basis: 0;을 적용하고 비율을 나누면 전체 화면이 여백인 것으로 취급하여, 전체 화면을 flex-grow에서 지정한 비율로 나눌 수 있게 된다.
• flex-grow/shrink 대신 flex: 1;을 적용하면 자동으로 flex-basis: 0;이 적용되므로 이쪽을 사용
• flex속성이 지정된 요소들만 화면 크기를 조절했을 때 요소의 크기가 바뀌므로, 지정되지 않은 요소들은 화면 크기와 관계 없이 고정시킬 수 있다.
• 각 아이템에 align-self: 속성을 사용하여 각자 다른 방식으로 정렬시킬 수 있다.

3. CSS Grid(in container)

• display: grid;를 사용해 grid로 만들고 grid-template-columns: *fr, *fr;을 사용해 컬럼의 비율을 정해준다.
• 컬럼의 비율을 %가 아닌 fr을 사용하는 이유는 grid-gap을 줄 때 %로 하면 여백이 발생할 수 있기 때문.
• grid-template-columns: repeat(n, 1fr);을 사용하면 1fr씩 n개의 컬럼을 반복해서 만들 수 있다.
• px/rem/em과 fr을 섞어서 쓰면 px/rem/em는 고정되고 fr만 화면 크기에 따라 크기가 변한다.
• 내용의 높이는 다르지만 틀의 높이를 균일하게 하고 싶을 때는 grid-auto-rows: minmax(원하는 크기, auto);사용하면 원하는 크기로 하되, 내용의 크기가 지정한 크기보다 큰 행은 auto로 맞춘다.
• grid에서 정렬할 때도 가로축/세로축에 따라 justify-items/align-items를 사용한다.

4. CSS Grid(in items)

• 각각의 요소를 가로축/세로축 정렬할 때는 justify-self/align-self를 사용한다.
• 요소 각각이 화면에서 차지하는 컬럼 비율을 정할 떄는 grid-column: 시작col/끝col;을 사용한다. 컬럼이 3개 있으면 끝은 4.