(21.09.14) 끝내주는 css 속성들

작은 지식이라도, 하루에 하나씩.

---

 

한 줄 요약

---

🦄css grid는 한 방향 (align, row)만 정렬하던 flex와 다르게, 두 방향 모두를 다루는 레이아웃 시스템이다🦄
🦄css clamp는 min과 max를 조합한 속성으로, 종래의 미디어 쿼리를 사용한 반응형 설계를 대체한다🦄
🦄aspect-ratio는 박스의 가로 세로비를 유지하게 해주는 속성으로, 비율 유지하며 크기 조절할 때 사용한다🦄

 

 

본문

---

1. grid

 

grid의 기본 개념은 flex와 동일하다. 부모 박스에 grid 속성을 부여한 후, 자식 박스의 row와 column을 조절합니다.

 

.wrapper {
  display: grid;
}

부모 박스에 grid를 주면 자식 요소들은 Block 속성이 됩니다. 만약 grid가 아니라 inline-grid를 주면 inline 속성이 됩니다.

 

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
</div>

 

그럼 이제 하위 박스들을 정렬 할 수 있습니다.

 

.wrapper {

	/*columns의 크기를 1,2,3 순서대로 아래와 같은 크기로 만들겠다 */
    
	grid-template-columns: 200px 200px 500px;
	/* grid-template-columns: 1fr 1fr 1fr */ --> 1fr이 하나의 단위. 이렇게 되면 모두 균일한 크기를 가진다
	/* grid-template-columns: repeat(3, 1fr) */ --> 1fr 1fr 1fr 를 3번 반복한다
    /* grid-template-columns: repeat(3,1fr,4fr,2fr) --> 1fr 4fr 2fr 패턴을 3번 반복한다
    /* grid-template-columns: repeat(3, minmax(100px, auto)) */ minmax() -> 최소한 100px, 최대는 자동으로 (auto) 늘어나게 
	/* grid-template-columns: 200px 1fr */
	/* grid-template-columns: 100px 200px auto */


	/*rows의 크기를 1,2,3 순서대로 아래와 같은 크기로 만들겠다 */
    
	grid-template-rows: 200px 200px 500px;
	/* grid-template-rows: 1fr 1fr 1fr */
	/* grid-template-rows: repeat(3, 1fr) */
	/* grid-template-rows: 200px 1fr */
	/* grid-template-rows: 100px 200px auto */
}

 

또 자주 사용되는 속성들은 auto-fill과 auto-fit이 있다.

auto-fill은 column의 개수를 미리 정하지 않고, 설정된 너비가 허용하는 한 최대한 셀을 채운다.

반면, auto-fit은 남는 공간을 꽉 채운다.

 

.wrapper {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

 

출처 : https://studiomeal.com/archives/533

 

.wrapper {
	grid-template-columns: repeat(auto-fit, minmax(20%, auto));
}

출처 : https://studiomeal.com/archives/533

 

또, 그리드 간의 간격을 만들어 주는 row-gap, column-gap, gap 이 있다.

 

.wrapper {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
}

 

이외에도 grid 관련 속성은 많이 있는데, 이거 다 적으려면 글이 너무 길어지므로, 이쯤에서 끝내자.

mdn에 정리 잘 되어있으니까 참고하는게 좋을 듯?

 

 

 

2.clamp()

 

clamp는 css min()과 max()를 합친 함수이다.

 

.test{
	// clamp (min , val , max) 의 꼴
	width : clamp(100px , 2vw, 300px)
 }

 

clamp는 params(??)로 MIN, VAL, MAX를 가지고 있는데, MIN은 해당 속성이 가질 수 있는 최솟값, VAL은 사용자가 지정한 상대 크기를 가진 값, MAX는 해당 속성이 가질 수 있는 최댓값이다.

 

clamp를 풀어서 쓰면 다음과 같다. max(MIN, min(VAL, MAX))

 

즉, 만약 계산된 VAL이 MAX보다 작다면, 요소는 VAL과 MIN 중 큰 값을 가지게 될 것이고, 

계산된 VAL이 MAX보다 크다면, 요소는 VAL 값을 가지게 됩니다.

 

이런 과정을 통하여, clamp는 최대한 최적화된 값을 설정할 수 있게 도와줍니다.

 

 

3. aspect-ratio

 

aspect-ratio는 박스의 비율을 그대로 유지한 채 크기를 변경할 수 있게 해 준다.

 

왜, iframe과 같은 거 사용할 때, 맨날 padding 56.25% 주고, video에 position : absolute 주고 막 난리를 쳤던 기억이 나질 않습니까?? aspect-ratio를 사용하면 크기와 비율 두 마리 토끼를 한방에 잡을 수 있습니다.

 

video {
	width:100%
    aspect-ratio: 16/9
 }

 

이거 한방이면 가로 16, 세로 9의 비율을 가지고, 크기도 100%로 꽉 찬 비디오 요소를 만들 수 있다!