[DAY-30] CSS 심화 (2)

😉 헷갈렸던 & 몰랐던 부분들만 정리하는 나만의 TIL
😯 모든 강의 내용은 적지 않아요!

오늘의 소감은?
겉핥기 식으로 알고 있었던 Grid에 대해 자세히 알 수 있어 좋았습니다.
특히 auto-fit, auto-fill을 사용하면 반응형 웹까지 짤 수 있을 것 같아요!😯
노션 클로닝 프로젝트 리팩토링에 사용해보고 싶습니다. 두근두근

CSS 재미있어서 정리하는 내용이 점점 길어지는 것 같아요..

[1] CSS Grid

Grid는 2차원 레이아웃 구조를 만들 수 있는 CSS 기술입니다.

2개의 축을 사용해서 레이아웃을 짤 수 있습니다.

[1-1] Grid Container

display: grid가 부여된 부모 요소가 바로 Grid Container입니다.

보통 grid는 3가지 값을 기본으로 가집니다.

.container {
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 200px 200px 200px;
}

display는 grid와 inline-grid를 선택할 수 있으며,

rows는 세로 칸의 갯수와 크기를 지정하며, columns는 가로 칸의 갯수와 크기를 지정합니다.

px로 된 특정한 단위가 아닌, 화면 비율로 rows와 columns의 크기를 지정해줄 수 있습니다.

이때 fraction 단위를 사용합니다.

.container {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

이 fraction 단위를 사용하면, 화면 비율에 맞춰 그리드가 생성됩니다.

또한 fraction 단위를 사용할 때, 사용할 수 있는 grid 함수 repeat가 있습니다.

grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr); /* 같은 의미입니다. */

단 fraction 단위를 사용하기 위해서는 container의 크기가 정해져 있어야 합니다.

[1] auto-rows/ auto-columns

grid-template-rows와 grid-template-columns를 사용하여 크기를 지정해줄 수 있지만,

지정이 되지 않는 하위 요소들에 자동으로 크기를 지정해줄 수 있는 속성이 있습니다.

바로 grid-auto-rows / grid-auto-columns입니다.

template를 사용하여 지정해준 행과 열의 크기가 5, 6번에 지정이 되지 않는 상황을 가정해봅시다.

이때 grid-auto-rows나 grid-auto-columns를 지정해주면 나머지 요소에 해당 크기가 지정됨을 확인할 수 있습니다.

grid-template- : 명시적 크기(비율)
grid-auto- : 암시적 크기(비율)

[2] grid-auto-flow

해당 속성은 어떻게 grid cell들의 flow가 흘러갈 것인지 (배치될 것인지) 지정할 수 있습니다.

• row : row 방향으로 쌓입니다. (default)
• column : column 방향으로 쌓입니다.
• dense : 빈 공간이 생기면 그 공간에 요소들을 배치합니다.
• column dense: column축으로 쌓이는 빈 공간이 생기면 요소들을 배치합니다.
• row dense : row축으로 쌓이는 빈 공간이 생기면 요소들을 배치합니다.

[3] justify-content / align-content

해당 속성을 사용하기 위해서는 부모 요소의 여백이 있어야 합니다.

Flex는 축이 1개라면, grid는 축이 2개이므로 justify(행축)와 align(열축)을 둘다 사용할 수 있습니다.

부모 요소 내부 grid의 위치를 조정할 수 있습니다.

• normal : flex의 stretch와 같은 개념으로, 아이템의 크기를 지정하지 않으면 부모 컨테이너에 맞춰 아이템들이 늘어납니다. (default)
• space-between : 시작점과 끝점에 붙어 나머지 공간을 균등하게 분배합니다.
• space-around : 각 열(행)의 왼쪽과 오른쪽 여백을 균등하게 분배합니다.
• space-evenly : 행(열) 축 내에서 사용할 수 있는 모든 여백을 균등하게 분배합니다.

[4] justify-items / align-items

해당 속성을 사용하기 위해서는 각 Cell 내 여백이 있어야 합니다.

각 Cell 내부 item의 위치를 조정할 수 있습니다.

• normal : 아이템의 크기를 지정하지 않으면 각 cell의 크기에 맞춰 아이템이 늘어납니다.
• center : 행(열)축의 가운데 정렬이 됩니다.
• start : 행(열)축의 시작점으로 정렬이 됩니다.
• end : 행(열)축의 끝점으로 정렬이 됩니다.

[5] grid-template-areas

grid-template-areas를 사용하면, grid-area 이름을 지정해준 구역으로 직접 레이아웃을 구성할 수 있습니다.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: repeat(4, 100px);
  grid-template-columns: repeat(3, 1fr);
  grid-template-areas:
    "header header header"
    "main main aside"
    ". . aside" /* 마침표(빈 부분) 대신 none을 입력해도 됩니다. */
    "footer footer footer"; /* 레이아웃을 직접 입력할 수 있습니다. */
}

.container > * {
  border: 2px solid;
}
.container header {
  grid-area: header;
}
.container main {
  grid-area: main;
}
.container aside {
  grid-area: aside;
}
.container footer {
  grid-area: footer;
}

이때 그리드 사이의 gab(Gutter)을 지정해줄 수 있습니다.

grid-gap: 10px 10px; /* 하나의 값만 작성해도 되고, 행과 열을 따로 지정해줄 수도 있습니다. */
grid-row-gap: 10px; /* 개별 속성으로도 적을 수 있습니다. */
grid-column-gap: 10px;

[1-2] Grid Items

display: grid가 부여된 부모 요소 밑에, 들어있는 item들이 바로 바로 Grid items입니다.

grid로 설정된 container는 cell 영역을 가지게 되고, 해당 cell들은 line으로 구분됩니다.

따라서 해당 item들을 어떤 line에서 시작하고 어떤 line에서 끝나는지 지정할 수 있습니다.

[1] row/column-start/end

grid-row(column)-start는 어떤 라인에서 아이템이 시작될 것인지,

grid-row(column)-end는 어떤 라인까지 채울 것인지 지정할 수 있습니다.

또한 start와 row는 줄여서 사용할 수 있습니다.

.container .item:nth-child(1) {
  grid-column: 1 / 4; /* start와 end */
}

해당 속성은 line의 번호를 지정해줄 수 있지만, 얼마나 채울 것인지 나타낼 수 있습니다.

.container .item:nth-child(1) {
  grid-row-start: span 2; /* span 키워드는 확장의 의미를 가지고 있습니다. */
}

span 2 처럼 사용하면, 2만큼 늘리겠다는 의미가 됩니다.

따라서 start, end를 따로 정의하지 않아도 grid를 효과적으로 사용할 수 있습니다.

[2] justify/align-self

개별적으로 cell 내에서의 item 정렬을 핸들링할 수 있습니다.

속성은 justify/align-items와 같습니다.

.container .item:nth-child(1) {
  justify-self: center;
  align-self: end;
}

[3] order

order는 Flex에서 사용한 것과 같이 정렬 순서를 핸들링할 수 있습니다.

기본값은 0에서 시작하며, 숫자가 작으면 작을수록 우선순위가 높아집니다.

반대로 커지면 뒤쪽으로 밀려나겠죠.

.container .item:nth-child(1) {
  order: 1;
}

.container .item:nth-child(3) {
  order: -1;
}

[4] z-index

CSS의 쌓임 맥락과 연관되는 내용으로, 요소가 겹쳤을 때, 우선순위를 지정해줄 수 있습니다.

쌓임 맥락 MDN 문서

요소의 position이라는 값을 사용하거나 flex, grid를 사용할 때, 쌓임 순서를 핸들링할 수 있습니다.

큰 값일수록 위쪽에 쌓이게 됩니다.

[1-3] Grid Functions

[1] minmax()

grid-template-columns(rows)를 사용해서 값을 지정해주면, 불필요한 여백이 생길 수 있습니다.

이럴 때 크기의 최소, 최대값을 지정해줄 수 있는 minmax() 함수를 이용할 수 있습니다.

grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr);
/* 최소, 최대값을 입력할 수 있습니다. */

해당 함수는 명시적인 크기 뿐만 아닌, 암시적인 크기 (grid-auto-rows/columns)를 지정할 때도 사용할 수 있습니다.

[2] fit-content()

grid item이 가지고 있는 content 너비에 맞춰주는 함수입니다.

fit-content(100px)로 최댓값을 명시해줄 수 있습니다.

[1-4] Grid Unit

grid에서 판단하는 단위는 한글과 영문이 조금 다릅니다.

한글의 경우, 한 글자 한 글자가 단위로 판단되며

영문의 경우, 띄어쓰기를 기준으로 단위가 판단됩니다.

min-content를 이용하면 최소한의 너비로 열(행)의 너비를 지정할 수 있습니다.

이는 단어 단위로 파악되기에, 조금 더 쉽게 한글과 영문의 차이를 확인할 수 있습니다.

한글의 경우 한 글자가 단위로 판단되어 모든 글자가 줄바꿈이 발생합니다.

max-content를 이용하면 최대한의 너비로 열(행)의 너비를 지정할 수 있습니다.

[1] word-break

word-break는 줄바꿈의 기준을 지정할 수 있습니다.

word-break MDN 문서

이는 한글도 띄어쓰기 단위로 줄바꿈을 할 수 있게 만들어줍니다.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: repeat(4, min-content);
}

해당 예시처럼 min-content를 사용했을 때, 한글이 한 글자 단위로 줄바꿈이 되는 것을 방지할 수 있습니다.

.container .item {
  border: 2px solid;
  font-size: 30px;
  word-break: keep-all;
}

• normal : 기본 줄 바꿈 규칙을 사용합니다. (default)
• keep-all : 영어 뿐만 아닌 한글도 띄어쓰기 단위로 단어를 판단합니다.
• break-all : 오버플로를 방지하기 위해 어떠한 두 문자 사이에도 줄 바꿈이 일어납니다.

[2] auto-fill/ auto-fit

repeat함수와 함께 사용할 수 있는 단위입니다.

몇개의 열과 행을 사용할건지 명시하지 않아도, 자동으로 단위를 만들어줍니다.

• auto-fit

지정할 수 있는 최대의 너비를 우선해서 단위를 정해줍니다.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}

• auto-fill

지정할 수 있는 최소 너비를 우선해서 단위를 정해줍니다.

.container {
  border: 4px solid;
  display: grid;
  grid-template-rows: 100px;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

minmax 함수 내 최소값을 100px로 지정했으므로 각 cell은 100px가 되며

container의 빈 공간이 생기는 것을 알 수 있습니다.

---

출처

프로그래머스