TIL DAY 202

오늘 배운 일

✔️ CSS Layout

🎧 Grid [part IV]

이번에 알아볼 것은 개발 환경에서 쓸 수 있는 기능에 대해 알아보겠다!

그건 바로 line 에 이름을 붙이는 것이다.

저번 코드를 수정해본다면...

style.css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: [first-line] 100px [second-line] 100px [third-line] 100px [fourth-line] 100px [fifth-line];
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
  grid-column: span 4;
}

.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: 2 / span 2;
}

.nav {
  background-color: #8e44ad;
  grid-row: 2 / 4
}

.footer {
  background-color: #f39c12;
  grid-column: span 4;
}

전에는 grid-template-colums 값을 repeat(4, 100px) 로 지정해두었지만, 이번엔 line 에 이름을 붙이고 길이를 작성해보았다.

화면을 확인해보면...

전에 마지막으로 수정한 모습과 동일하다.

이전의 velog 를 봤으면, line 에 대해 완벽히 이해가 가능하다.

-> 링크!

그러면 밑에 자식 요소들도 바꿔서 사용할 수 있다.

예 )

수정 전

.content {
  background-color: #3498db;
  grid-column: 1 / -2;
  grid-row: 2 / span 2;
}

수정 후

.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: 2 / span 2;
}

박스 칸의 줄을 세어서 부모에서 지정해둔 이름들을 활용한다.

그럼 repeat 안에 이름을 넣고 싶다면 어떻게 할까?

 grid-template-rows: repeat(4, 100px [clean-line]);

하지만 어떻게 쓰는 걸까?

그러니까 4개의 row 의 이름이 clean-line 인것이다!
(이름은 본인 원하는대로 만들어도 된다)

그럼 content 에 활용해보면...

수정 전

.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: 2 / span 2;
}

수정 후

.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: clean-line 2 / clean-line 4;
}

결과를 보면...

이렇게 된 이유는 repeat 에서 '줄 이름'을 썼을 때, first-line 이 없었다.

그리하여 새롭게 작성해보면...

.content {
  background-color: #3498db;
  grid-column: first-line / fourth-line;
  grid-row: clean-line 1 / clean-line 3;
}

row 에서는 첫 번째 line 이 없다.
끝부터 시작한다.

새로고침을 해보면...

repeat 을 쓰면 이러한 모습이다.

grid-template-rows: 100px [clean-line]...;

처음이 줄이 아니고 크기로 시작한다.

지금까지 우리는 area, 1 / -1, span 2 그리고 line 에 이름 붙이기를 알아보았는데 이것들 중에 선택은 본인 몫이다.

Grid 는 2차원 layout 이다.
(참고로 flex 는 1차원이다. column 만 갖고 있다.)

끝으로 :

• 오늘은 좀 짧게 레이아웃에 대해 공부해보았다.
• 다음에는 좀 더 유익한 정보로 돌아오겠다!