오랫만에 웹 페이지를 작성 해야 할 상황이 되었습니다.
이전에 웹 페이지 작업을 해야했을 때는
display: inline-block;
float:left;
를 공부해서 작업을 했었고, 작업 전에 복습을 해보려고 찾아보다보니 현재는 Flexbox 와 Grid가 대세인가 봅니다.
작업 때 찾아보기 쉽게 공부한 것을 정리합니다.
Flexbox를 사용할 때와 Grid를 사용할 때의 구분에 대한 내용입니다.
Flexbox lines things up in one direction
Grid has the ability to line things up in two directions
Flexbox cannot do, is intentionally overlap items.
So if you're in s situation where maybe either one would work, but you want to overlap items, that's gonna be a situation you definitely want to use Grid in.
Flexbox는 요소들을 한 방향으로 나열시킨다.
Grid는 요소들을 두 방향으로 나열시킬수 있다.
Flexbox는 (가능하나) 의도적으로 아이템들을 오버랩시킬 수 없다.
둘 중 하나가 작동할 수 있지만 확실하게 아이템을 오버랩하고 싶은 경우 Grid를 사용하게 될 것입니다.
Flexbox와 Grid의 요약강좌입니다. (1분코딩님 좋은 강좌 감사합니다.)
FLEXBOX
기본 구조입니다.
.container {
height: 100vh;
background: lightgray;
}
.item {
background: yellow;
}
.item:nth-child(odd){
background: red;
}<div class="container">
<div class="item">
<p>ITEM1</p>
</div>
<div class="item">
<p>ITEM2</p>
</div>
<div class="item">
<p>ITEM3</p>
</div>
</div>
부모에게 자식들의 배치을 지시합니다.
display: flex;
flex-direction
.container {
display: flex;
/*flexbox로 자식들의 배치를 지시*/
/*flex-direction: row;*/
/*생략해도 기본값으로 작동*/
height: 100vh;
background: lightgray;
}
| flex-direction: row; | 자식들을 row(행)의 좌->우 방향으로 배치, 기본값 |
| flex-direction: column; | 자식들을 column(열)의 상->하 방향으로 배치 |
| flex-direction: row-reverse; | 자식들을 row(행)의 우->좌 방향으로 배치 |
| flex-direction: column-reverse; | 자식들을 column(열)의 하->상 방향으로 배치 |
부모의 크기가 화면 크기보다 작아질 경우의 자식들의 위치를 지시합니다.
flex-wrap
.container {
display: flex;
/*flex-wrap: nowrap; */
/*부모의 크기가 화면 크기보다 작아져도 (현재의 row, column에서) 자식들의 위치를 유지, 기본값*/
height: 100vh;
background: lightgray;
}
.container {
display: flex;
/*flex-wrap: wrap;*/
/*부모의 크기가 화면 크기보다 작아지면 (새로운 row,column을 추가해) 배치 끝의 자식부터 이동시킴 */
height: 100vh;
background: lightgray;
}
| flex-wrap: nowrap; | 부모의 크기가 화면 크기보다 작아져도 (현재의 row,column에서 ) 자식들의 위치를 유지, 기본값 |
| flex-wrap: wrap; | 부모의 크기가 화면 크기보다 작아지면 (새로운 row,column을 추가해) 배치 끝의 자식부터 이동시킴 |
| flex-wrap: wrap-reverse; | 부모의 크기가 화면 크기보다 작아지면 (새로운 row,column을 추가해) 배치 앞의 자식부터 이동시킴 |
배치축(row, column)에서의 자식들의 정렬방법을 지시합니다.
justify-content
.container {
display: flex;
justify-content: space-between;
/*배치축을 기준으로 양끝에 (최초,최후)자식을 배치하고 남은 공간에 자식을 균등하게 배치*/
height: 100vh;
background: lightgray;
}
| justfy-content: flex-start; | 배치축을 기준으로 앞쪽으로 정렬 ( flex-direction: row; 왼쪽정렬, flex-direction: column: 위쪽정렬) |
| justfy-content: center; | 배치축을 기준으로 가운데 정렬 |
| justfy-content: flex-end; | 배치축을 기준으로 뒤쪽으로 정렬 ( flex-direction: row; 오른쪽정렬, flex-direction: column: 아래쪽정렬) |
| justfy-content: space-between; | 배치축을 기준으로 양끝에 (최초,최후)자식을 배치하고 남은 공간에 자식을 균등하게 배치 |
| justfy-content: space-around; | 배치축을 기준으로 자식을 균등하게 배치하고 자식의 양측에 자식의 반 크기의 간격을 추가 |
| justfy-content: space-evenly; | 배치축을 기준으로 자식을 균등하게 배치하고 자식의 양측에 자식크기의 간격을 추가 |
배치축(row, column)의 수직축에서의 자식들의 정렬을 지시합니다.
align-items
.container {
display: flex;
/*align-items: stretch;*/
/*배치축의 수직축 방향으로 자식들을 늘려서 채움, 기본값*/
align-items: center;
/*배치축의 수직축 방향의 중심에 자식들의 컨텐츠크기로 배치*/
height: 100vh;
background: lightgray;
}
| align-items: stretch; | 배치축의 수직축 방향으로 자식들을 늘려서 채움, 기본값 | |
| align-items: flex-start; | 자식의 컨텐츠 크기로 배치 |
배치축의 수직축을 기준으로 앞쪽으로 정렬 ( flex-direction: row; 위쪽정렬, flex-direction: column: 왼쪽정렬) |
| align-items: center; | 배치축의 수직축을 기준으로 가운데 정렬, | |
| align-items: flex-end; | 배치축의 수직축을 기준으로 뒤쪽으로 정렬 ( flex-direction: row; 아래쪽정렬, flex-direction: column: 오른쪽정렬) |
|
| align-content: flex-start; |
flex-wrap: wrap; |
배치축의 수직축을 기준으로 앞쪽으로 정렬 ( flex-direction: row; 위쪽정렬, flex-direction: column: 왼쪽정렬) |
| align-content: flex-end; | 배치축의 수직축을 기준으로 뒤쪽으로 정렬 ( flex-direction: row; 아래쪽정렬, flex-direction: column: 오른쪽정렬) |
|
| align-content: center; | 배치축의 수직축을 기준으로 가운데 정렬, | |
| align-content: space-between; | 배치축의 수직축을 기준으로 양끝에 (최초,최후)자식을 배치하고 남은 공간에 자식을 균등하게 배치 | |
| align-content: space-around; | 배치축의 수직축을 기준으로 자식을 균등하게 배치하고 자식의 양측에 자식의 반 크기의 간격을 추가 |
.container {
display: flex;
flex-wrap: wrap;
align-content: center;
/*배치축의 수직축 방향의 중심에 컨텐츠크기가 가장 큰 자식의 크기로 모든 자식들을 늘려서 배치*/
height: 100vh;
background: lightgray;
}
자식들에 직접 화면이 늘어날때 어떻게 할지 지시합니다.
flex-grow
.item:nth-child(1) {
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 3;
}
.item:nth-child(3) {
flex-grow: 1;
}
/*여백크기의 1:3:1의 비율로 자식의 크기를 늘림*/
여백크기를 비율로 나누어 자식들을 늘렸기 때문에 각 자식의 크기의 비율이 1:3:1이 되지 않습니다.
정확히 각 자식의 크기의 비율을 1:3:1로 지시합니다.
flex-basis
.item {
flex-basis: 0;
/* 자식의 크기를 0으로 설정 전체를 여백으로 간주, 기본값은 auto*/
background: yellow;
}
.item:nth-child(1) {
flex-grow: 1;
}
.item:nth-child(2) {
flex-grow: 3;
}
.item:nth-child(3) {
flex-grow: 1;
}
.item:nth-child(odd) {
background: red;
}
자식들에 직접 화면이 줄어들때 어떻게 할지 지시합니다.
flex-shrink
flex-grow와 동일한 방법으로 설정합니다.
flex-grow와 flex-shrink를 동시에 지시합니다.
flex
이 경우는 flex-basis:0: 이 자동으로 설정됩니다.
자식에게 직접 정렬을 지시합니다.
align-self
.item:nth-child(1) {
align: flex-start;
}
.item:nth-child(2) {
align: center;
}
.item:nth-child(3) {
align: flex-end;
}
자식에게 직접 정렬순서를 지시합니다.
order
.item:nth-child(1) {
order: 2;
}
.item:nth-child(2) {
order: 3;
}
.item:nth-child(3) {
order: 1;
}
GRID
기본 구조 입니다.
.container {
height: 100vh;
background: lightgray;
}
.item {
background: yellow;
}
.item:nth-child(odd){
background: red;
} <div class="container">
<div class="item">
<p>ITEM1</p>
</div>
<div class="item">
<p>ITEM2</p>
</div>
<div class="item">
<p>ITEM3</p>
</div>
<div class="item">
<p>ITEM4</p>
</div>
<div class="item">
<p>ITEM5</p>
</div>
<div class="item">
<p>ITEM6</p>
</div>
<div class="item">
<p>ITEM7</p>
</div>
<div class="item">
<p>ITEM8</p>
</div>
<div class="item">
<p>ITEM9</p>
</div>
</div>
부모에게 자식들의 배치을 지시합니다.
display: grid;
grid-template-columns
.container {
display: grid;
/*grid로 자식들의 배치를 지시*/
/*grid-template-columns: 40% 60%;*/
/*40:60 비율의 column 2개에 자식들을 배치 */
grid-template-columns: 4fr 6fr;
/*40% 60%와 동일하나 */
/*%로 설정하면 grid-gap만큼의 추가 크기가 필요함 */
/*fr로 설정하면 grid-gap의 크기를 뺀 공간을 나눔*/
/*이런 이유로 fr을 많이 사용*/
grid-gap: 1rem;
/*자식들 사이에 1rem의 크기로 공간을 넣음*/
height: 100vh;
background: lightgray;
}
반복되는 지시에 유용합니다.
repeat
.container {
display: grid;
grid-template-columns: repeat(3,1fr);
/* = grid-template-columns: 1fr 1fr 1fr; */
/* 1fr비율의 컬럼 3개에 자식들을 배치 */
grid-gap: 1rem;
height: 100vh;
background: lightgray;
}
column의 크기를 고정하도록 지시합니다.
.container {
display: grid;
grid-template-columns: 1fr 100px 1fr;
/*가운데 column은 100px로 크기 고정하여 자식들을 배치 */
grid-gap: 1rem;
height: 100vh;
background: lightgray;
}
기본 구조를 변경했습니다.
HTML에 텍스트를 추가하고 CSS의 height: 100vh; 를 제거해서 높이가 다른 지식들을 만들었습니다.
자식들의 높이가 다른 경우를 크기를 조정합니다.
grid-auto-rows
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-rows: 100px;
/* 높이가 100px인 row에 자식들을 배치합니다. */
background: lightgray;
}
그런데 가장 높이가 큰 자식 ITEM1때문에 다른 자식들에게는 빈 공간이 많이 생깁니다.
기본 높이를 설정하고 그보다 큰 자식이 있는 row만 자식 높이만큼 조정하도록 합니다.
minmax
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-rows: minmax(50px, auto);
/* 기본 높이를 50px, 그 보다 큰 자식이 있는 row는 자식크기만큼 크게해서 자식을 배치합니다.*/
/* px보다 m(em, rem)으로 설정이 유용합니다. */
background: lightgray;
}
자식들을 좌우 정렬합니다.
justify-items
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-rows: minmax(50px, auto);
justify-items: start;
/* 각 grid안에서의 자식을 왼쪽정렬합니다. */
background: lightgray;
}
| justify-items: start; | 각 grid안에서 자식을 왼쪽 정렬합니다. |
| justify-items: center; | 각 grid안에서 자식을 가운데 정렬합니다. |
| justify-items: end; | 각 grid안에서 자식을 오른쪽 정렬합니다. |
자식들을 상하 정렬합니다.
align-items
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-rows: minmax(50px, auto);
align-items: start;
/* 각 grid안에서의 자식을 위쪽정렬합니다. */
background: lightgray;
}
| align-items: start; | 각 grid안에서의 자식을 위쪽 정렬합니다. |
| align-items: center; | 각 grid안에서의 자식을 (상하)중앙 정렬합니다. |
| align-items: end; | 각 grid안에서의 자식을 아래쪽 정렬합니다. |
자식에게 직접 정렬을 지시합니다.
justify-self
align-self
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
grid-auto-rows: 100px;
background: lightgray;
}
.item {
background: yellow;
}
.item:nth-child(5) {
justify-self: center;
/* 자식에게 직접 (좌우)가운데 정렬을 지시합니다. */
align-self: center;
/* 자식에게 직접 (상하)가운데 정렬을 지시합니다. */
}
.item:nth-child(odd) {
background: red;
}
자식에게 시작위치, 종료위치를 지시합니다.
grid-column
grid-row
/*
가장 좌측이 1
가장 위쪽이 1
*/
.item:nth-child(1) {
grid-column: 1/4;
/* 첫번째 자식을 가장 촤즉(1)부터 가장 오른쪽(4)까지 위치 시킵니다.*/
}
.item:nth-child(7) {
grid-column: 3;
grid-row: 3/5;
/* 7번째 자식을 촤즉(3), 위쪽(3)부터 아래(5)까지 위치 시킵니다. */
}
자식을 의도적으로 오버랩시켜봅니다.
.item {
background: yellow;
opacity: 0.7;
/* 오버랩되는 것을 확인하기위해 투명도를 설정했습니다.*/
}
.item:nth-child(1) {
grid-column: 1/4;
}
.item:nth-child(4) {
grid-column: 3;
grid-row: 2/4;
}
.item:nth-child(7) {
grid-column: 3;
grid-row: 3/5;
}
/* grid-column, grid-row를 서로 오버랩(3-4)되도록 지시했습니다. */
이렇게 좋은 강좌를 올려주셔서 다시한번 감사드립니다.
반응형
