TIL DAY 206
오늘 배운 일
✔️ CSS Layout
👖 Grid [part VIII]
이번 시간에는 minmax 에 대해 알아볼 것 이다.
- 이 기능은 얼머나 작게 혹은 크게 요소가 될 수 있는지 지정해 준다.
가장 좋은 예로는 요소가 가능한 엄청 크길 원하는데 하지만 동시에 엄청 작게 되진 않길 원할때 쓸 수 있다.
먼저 우리의 코드를 확인해보면...
index.html
<body>
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>style.css
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: repeat(10, 1fr);
grid-template-rows: repeat(4, 100px);
grid-auto-columns: 100px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
column 을 10칸으로 1fr 로 설정해둔 것이다.
만약 공간을 줄인다면...
각 박스들의 가로 길이가 확연히 줄어든 걸 알 수 있다.
그 이유는 1fr 은 엄청 작은 공간때문에 작어졌다.
우리는 이 item 들이 원하는 만큼 충분한 공간을 가지고 있었으면 한다.
그러니까 화면을 줄어들더라도, 너무 많이 안 줄었으면 한다.
이 때, 제한을 두는 것이다. (바로 minmax 를 사용하는 것!)
grid-template-columns: repeat(10, minmax(100px, 1fr));
minmax 안에 첫 번째 인자로는 최소 크기를 지정해주고, 두 번째는 최대 크기를 지정한 것이다.
- minmax(최소값, 최대값)
이제 화면을 스크롤하면서 item 들을 볼 수 있는데 그 이유는 최소한의 크기가 100px 이기 때문이다.
그 이상으로 줄어들 수 없다!
아 그리고 다음처럼 코드를 바꿔준다.
(10칸이 아니라 5칸으로 수정해주었다.)
grid-template-columns: repeat(5, minmax(100px, 1fr));
최대 크기는 1fr 이고 최소한으로 줄여보면...
100px 가로 길이로 된다.
다음으로 넘어가서...
이번엔 CSS grid 를 이용해서 쉽게 반응형 디자인을 만들 수 있는지 알아보자!
특히 auto-fit 이랑 auto-fill 을 이용해서 알아보는 것이다!
이 두 키워드는 repeat 함수에만 사용할 것 이다.
먼저 코드를 보면...
index.html
<body>
auto-fill
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
auto-fit
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>style.css
.grid {
color: white;
display: grid;
gap: 5px;
grid-auto-rows: 100px;
margin-bottom: 30px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
.grid:first-child {
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
.grid:last-child {
grid-template-columns: repeat(5, minmax(100px, 1fr));
}
2개의 grid 를 만들었는데 하나는 auto-fill grid 이고 다른 하나는 auto-fit grid 이다.
아직까지는 서로 똑같다.
(5개의 column 이 반복되고 최소 100px 크기와 최대 1fr 의 크기를 가진다.)
그럼 약간 코드를 수정해보면...
.grid:first-child {
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.grid:last-child {
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}repeat 함수안에 첫 번째 인자로 박스 칸을 적은게 아니라 이름을 적어주었다.
결과는...
뭔가 바뀌었다. (전처럼 특정한 수치를 적어주지 않았다. (예 5, 6, 20) )
auto-fill 이 하는 일은 column 을 만들어주는 일을 가능한 많이 해주는 것이다.
화면을 크게 늘려보면...
빈 column 을 많이 갖게 된다.
이거는 다 공간을 준것이다.
정확히는 auto-fill 이 해당 row 를 column 이 있는 만큼 가능한 채우는것이다.
column 이 비었더라도 말이다.
다음으로 auto-fit 을 알아보면...
이 기능은 현재의 요소를 늘려서 row 에 딱 맞게 맞추는 것이다.
정리하면
auto-fill
- row 에다가 빈 column 들을 채우는 것이다.
auto-fit
- 요소들을 다 늘리는 것이다.
작은 화면으로 보면...
2 grid 가 다 똑같다.
화면의 크기를 키우면...
하나는 점점 커지고, 다른 하나는 그대로 있는다.
더 늘릴수록 auto-fill 은 grid 가 더 많은 공간에 더 많은 column 들을 차지한다.
(존재하지 않아도 말이다.)
근데 auto-fit 은 빈 공간을 만들지 않는다.
(현재 item 들이 빈 공간없이 채워지는 것이다.)
이 기능들을 쓰는 이유는 item 들의 개수를 모를 때 편리하기 때문이다.
그럼 각각 6번째 요소가 들어오면 어떨까?
index.html
<body>
auto-fill
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
auto-fit
<div class="grid">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
</body>6번째가 오면, auto-fill 에서는 column 에 빈 공간중에 하나를 주는 것이다.
근데 auto-fit 은 6번째가 오면 row 안에 맞추기 위해서 다른 요소들의 사이즈를 줄인다.
5개 element 들이 있을때
6개로 늘어난다면...
auto-fit 은 유동적인 사이즈를 위해서 쓰이고, auto-fill 은 정확한 사이즈를 원할 때 쓰인다!
이제 마지막 파트인 min-content 와 max-content 에 대해서 배울것이다!
이 기능들은 좋은게 우리는 이때가지 크기나 fr 를 살펴봤는데 가끔은 머리속에 있는 content 를 디자인하고 싶을때가 있다.
이러한게 진짜 CSS grid 의 쿨한 이유다.
생각했던 content 사이즈를 직접 디자인할 수 있으니까 말이다.
min-content 와 max-content 이 둘의 의미하는 것은 크기다.
우선 min-content 는 만약 box 를 만든다고 하면 content 가 작아질 수 있는 만큼 작아지는 거고...
max-content 는 박스를 content 가 필요한 만큼 크게 만드는 거다.
코드를 보면...
index.html
<body>
<div class="grid">
<div class="item">This is a very long text</div>
<div class="item">This is a very long text</div>
</div>
</body>style.css
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: 100px 100px;
grid-auto-rows: 100px;
margin-bottom: 30px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
첫 번째 column 을 max-content 로 바꿔준다.
grid-template-columns: max-content 100px;결과는...
위의 초록색 박스는 필요한 content 크기만큼 커졌다.
이게 max-content 의 예다.
그럼 min-content 를 해보면...
grid-template-columns: max-content min-content;
min-content 는 content 가 얼마나 작게 될 수 있는거다.
이게 진심 멋진거는 우리는 안에 뭐가 들었는지에 대해서 디자인하는 것이다.
(div 안에 뭐가 들어갔는지 대해서 디자인하는 것이다.)
그리고 어떻게 content 가 보여야하는지 대해서 말이다.
그러니까 우리가 이전에 배운것들과 결합할 수도 있다. (완벽한 반응형 디자인을 할 수 있다.)
정리하면...
max-content 는
- box 를 컨텐츠에 필요한 만큼 커지는거고
min-content 는
- box 를 컨텐츠가 작아질 수 있는 만큼 작아지는 것이다.
그럼 이번에는 각 요소마다 길이가 조금 다른 문장들을 가지고 있다고 했을 때 알아보자!
index.html
<body>
<div class="grid">
<div class="item">This is a very long text</div>
<div class="item">This is a very longer longer long text</div>
<div class="item">This is a text</div>
<div class="item">
Not long at all, or maybe, who knows? Maybe you know, love you.
</div>
<div class="item">This is a very longer long text</div>
</div>
</body>style.css
.grid {
color: white;
display: grid;
gap: 5px;
grid-template-columns: max-content min-content;
grid-auto-rows: 100px;
margin-bottom: 30px;
}
.item:nth-child(odd) {
background-color: #2ecc71;
}
.item:nth-child(even) {
background-color: #3498db;
}
다른 길이의 문장들을 가진 박스들을 grid 로 디자인하고 싶다고 가정하면...
(모든 text 들이 좋아보이고 줄어들거나 확장되기도 하면서 말이다.)
그럼 그동안 배운것들을 써보면...
grid-template-columns: repeat(5, minmax(max-content, 1fr));
그러니까 최소값은 max-content 가 되는거다.
그리고 최대값은 1fr 이 되는것이다.
세 번째 박스를 보면...
1fr 로 작동하는데 빈 공간들은 다 1fr 때문에 나온것이다.
이러한 것이 box 를 content 사이즈에 따라서 만들 수 있는 것이다.
최소값은 min-content 로 해보면...
grid-template-columns: repeat(5, minmax(min-content, 1fr));우리가 box 를 원하는 만큼 줄일 수 있고
아니면 엄청 크게 만들 수 있다.
또한 auto-fill 을 min-content 와 결합 할 수도 있다.
grid-template-columns: repeat(auto-fill, minmax(20px, max-content));
이게 auto-fill 형태이고...
auto-fit 은
grid-template-columns: repeat(auto-fit, minmax(20px, max-content));
끝으로 :
- 이번에 grid 의 모든 것들을 다 배워보았다.
- 확실히 minmax, auto-fill, auto-fit, max-content, min-content 이 것들을 활용해서 반응형 디자인을 할 수 있어 앞으로가 기대된다. ㅎㅎ
