✔️ CSS Layout
그럼 이번에 fr 이란걸 알아볼 것 이다.
fr 의 뜻은 fraction(부분)이다.
(pixel 이나 %와 같은 것이다. 정확히는 측정 단위다.)
그럼 fraction 이 어떻게 작동하는지 알아보자!
우리 코드를 보면...
<body>
<div class="grid">
<div class="header"></div>
<div class="content"></div>
<div class="nav"></div>
<div class="footer"></div>
</div>
</body>
.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 이라는 것이다.)
grid 부분만 붙여넣었다. 다른 코드는 변화가 없다.
.grid {
display: grid;
gap: 10px;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 100px);
}
화면을 보면...
그럼 이제 body 의 모든 부분을 차지한다.
하나의 박스를 보면...
cell 너비가 254.4px 이다.
정리하면
위의 코드를 보면, 1fr 를 4번 반복하는 것이다.
정확히 말하면 가능한 공간이란게 grid 에서 가능한 공간이다.
grid-template-columns: 1fr 1fr 1fr 1fr;
위의 코드처럼 수정해도 아무런 문제가 없다!
그럼 이번엔 grid 의 width 를 따로 지정해주면 어떨까?
수정된 부분
.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배 더 크게 할것이다.
.grid {
display: grid;
width: 500px;
gap: 10px;
grid-template-columns: 4fr 1fr 1fr 1fr;
grid-template-rows: repeat(4, 100px);
}
이런게 비율과 일하는 방법이다.
그럼 다 똑같이 4fr 로 쓰면 어떨까?
.grid {
display: grid;
width: 500px;
gap: 10px;
grid-template-columns: 4fr 4fr 4fr 4fr;
grid-template-rows: repeat(4, 100px);
}
1fr 와 별반 차이가 없다.
(fr 은 기본적으로 가능한 만큼 공간을 차지한다.)
그럼 이번에 template-rows 를 수정해보자!
.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 는 높이가 없다!!!
그럼 한번 설정해보자!
.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 의 이름을 정해보자!
.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 를 설정해보자면...
.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 를 적어준다.
다른 박스들을 꾸며보자면...
.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) 이 얼마나 되는지 적어주자!
.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 로 바꾸주자!
.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 은 사용이 불가능하다.
끝으로 :