220811 TIL

CoderS·2022년 8월 11일
0

TIL DAY 203

오늘 배운 일

✔️ CSS Layout

🧲 Grid [part V]

그럼 이번에 fr 이란걸 알아볼 것 이다.

fr 의 뜻은 fraction(부분)이다.
(pixel 이나 %와 같은 것이다. 정확히는 측정 단위다.)

그럼 fraction 이 어떻게 작동하는지 알아보자!

우리 코드를 보면...

index.html

<body>
  <div class="grid">
    <div class="header"></div>
    <div class="content"></div>
    <div class="nav"></div>
    <div class="footer"></div>
  </div>
</body>

style.css

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: repeat(4, 100px);
}

.header {
  background-color: #2ecc71;
}

.content {
  background-color: #3498db;
}

.nav {
  background-color: #8e44ad;
}

.footer {
  background-color: #f39c12;
}

화면을 보면...

크기는 가로 100px 와 세로 100px 이다.

그럼 이제는 100px 에서 1fr 로 바꿔보겠다.
(이 뜻은 1 fraction 이라는 것이다.)

style.css

grid 부분만 붙여넣었다. 다른 코드는 변화가 없다.

.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 100px);
}

화면을 보면...

그럼 이제 body 의 모든 부분을 차지한다.

하나의 박스를 보면...

cell 너비가 254.4px 이다.

정리하면

  • fraction 은 사용 가능한 공간을 뜻한다!

위의 코드를 보면, 1fr 를 4번 반복하는 것이다.
정확히 말하면 가능한 공간이란게 grid 에서 가능한 공간이다.

style.css

grid-template-columns: 1fr 1fr 1fr 1fr;

위의 코드처럼 수정해도 아무런 문제가 없다!
그럼 이번엔 grid 의 width 를 따로 지정해주면 어떨까?

style.css

수정된 부분

.grid {
  display: grid;
  width: 500px;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 100px);
}

500px 의 너비를 가진 grid 때문에 바뀐 화면을 보면...

박스들이 500px 에 맞춰서 축소되었다.

길이를 grid container 에서 얻는것이다.

우리의 template-column 은 모두 같은 fr 를 갖는다.
(4개의 같은 부분)

이러한게 grid 의 멋진 부분이다.

4개 column 를 100px 로 하는 것 보다 fr 를 쓰는게 훨씬 간편한다.

위의 박스들 중에 초록색 박스를 다른 것보다 4배 더 크게 할것이다.

style.css

.grid {
  display: grid;
  width: 500px;
  gap: 10px;
  grid-template-columns: 4fr 1fr 1fr 1fr;
  grid-template-rows: repeat(4, 100px);
}

이런게 비율과 일하는 방법이다.

그럼 다 똑같이 4fr 로 쓰면 어떨까?

style.css

.grid {
  display: grid;
  width: 500px;
  gap: 10px;
  grid-template-columns: 4fr 4fr 4fr 4fr;
  grid-template-rows: repeat(4, 100px);
}

1fr 와 별반 차이가 없다.
(fr 은 기본적으로 가능한 만큼 공간을 차지한다.)

그럼 이번에 template-rows 를 수정해보자!

style.css

.grid {
  display: grid;
  width: 500px;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

template-columns 와 똑같이 repeat(4, 1fr)를 해주고 새로고침 해보니...

박스들이 사라졌다!?

그 이유는 전에 말했듯이 fr 은 가능한 많은 공간을 차지한다.
그럼 우리의 grid 의 크기를 보면...

수평으로는 공간이 있는데 수직으로는 공간이 없다...
왜냐면 grid 의 높이를 지정하지 않았다.

그니까 1fr 은 높이가 0이다. 왜냐하면 공간이 없기 때문이다.

많은 사람들은 이러한 실수를 한다.
높이로 fr 를 볼 수가 없기 때문이다.

grid 는 높이가 없다!!!

그럼 한번 설정해보자!

style.css

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
}

화면의 반을 높이로 설정해주고 확인해보면...

1fr 은 화면의 반의 1/4 이다.

저번처럼 똑같이 header, content, nav 그리고 footer 를 설정해보자!
더 쉬운 방법이 있다...

grid-template 은 좋은 지름길이다.

한번 우리 코드에 적용해보자!

첫 번째는 grid-area 를 하자
grid-area 의 이름을 정해보자!

style.css

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-template: ;
}

.header {
  background-color: #2ecc71;
  grid-area: header;
}

.content {
  background-color: #3498db;
  grid-area: content;  
}

.nav {
  background-color: #8e44ad;
  grid-area: nav;  
}

.footer {
  background-color: #f39c12;
  grid-area: footer;  
}

이번에는 우리의 template-columns 와 template-rows 를 지우자!

먼저 header 를 설정해보자면...

style.css

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template: 
    "header header header header"
  ;
}

여기서는 높이를 구체적으로 정해야 한다.

위에서는 column 이 4개 있고 row 의 높이가 얼마나 되는지 1fr 을 적어준다.

grid-template: 
  "header header header header" 1fr
;

맨 끝에다가 1fr 를 적어준다.

다른 박스들을 꾸며보자면...

style.css

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template: 
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr
  ;
}

content 와 nav 는 2칸 정도 쓰니까 2fr 를 써준다.

그러니까 우리는 column 과 함께 마지막에는 row 의 높이를 정해준 것 이다.

우리는 row 의 이름을 만들었고 얼마나 긴지 적어주었다.

grid-template: 
  "header header header header" 1fr
  "content content content nav" 2fr
  "footer footer footer footer" 1fr /
;

그리고 맨 마지막에 / 를 적어주고 각 column 마다 폭(width) 이 얼마나 되는지 적어주자!

style.css

.grid {
  display: grid;
  gap: 10px;
  height: 50vh;
  grid-template: 
    "header header header header" 1fr
    "content content content nav" 2fr
    "footer footer footer footer" 1fr / 1fr 1fr 1fr 1fr;
}

처음에는 높이를 지정해주었으면, 마지막에는 각각의 폭을 적어주었다.

그리고 다른 방법으로 하는걸 보여주기 전에 먼저 gap 을 5px 로 바꾸주자!

style.css

.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template: 
    [header-start] "header header header header" 1fr [header-end]
    [content-start] "content content content nav" 2fr [content-end]
    [footer-start] "footer footer footer footer" 1fr [footer-end] / 1fr 1fr 1fr 1fr;
}

위의 코드를 보면, 각 이름 옆에 대괄호 하고 해당 부분의 area 이름을 적어주고 -start 를 적어준다. 그리고 코드를 닫아주는 [이름-end] 를 끝에 적어준다.

약간 모양이 우리 태그 열고 닫고 하는 모양같다.

화면을 보면...

template 을 쓰니까 확실히 보기 편하다 ㅎㅎ

웹사이트가 어떠한 모습을 하는지 얘기할 수 있다.

아 그리고 중요한 사실!

grid-template 맨 마지막에 1fr 를 4번 적어주었는데, 혹시 repeat(4 1fr) 를 적어주면 안될까?

한번 해보자!

.grid {
  display: grid;
  gap: 5px;
  height: 50vh;
  grid-template: 
    [header-start] "header header header header" 1fr [header-end]
    [content-start] "content content content nav" 2fr [content-end]
    [footer-start] "footer footer footer footer" 1fr [footer-end] / repeat(4, 1fr);
}

화면은 보면...

뭔가 이상한 점을 볼 수 있다.

왜냐하면 grid-template 에서는 repeat 은 사용이 불가능하다.

끝으로 :

  • 오늘은 grid-template 라는 편리한 기능을 알아보았다.
  • 코드를 짤 때 다른 이가 이해할 수 있도록 쓸 수 있으니 유용하게 쓰일 것 같다.
profile
하루를 의미있게 살자!

0개의 댓글