[css] min() / max()

2개 이상의 대소비교가 가능한 값이 주어졌을 때, 최소값 또는 최대값을 반환

 

 

min(100px, 60%)

 

 

예를 들어, min(100px, 60%)를 생각해봅시다. 만약 부모 엘리먼트의 크기가 100px이라면 해당 엘리먼트의 크기는 부모의 60%인 60px이 되기 때문에, 60%가 더 작은 값으로 선택이 될 것입니다. 반면, 부모 엘리먼트의 크기가 그 두배인 200px이라면 자식 엘리먼트의 크기도 그 두배인 120px이 되기 때문에, 100px이 더 작은 값으로 선택이 될 것입니다.

 

 

width: 70%;
max-width: 1000px;

 

 

위 소스는 아래와 같이 min으로 바꿀 수 있다.

 

min(70%, 1000px);

 

 

문제! 최소 padding-top을 만드려면??

평소에는 padding-top: 20% 이었다가 화면이 작아져도 최소 padding-top: 120px은 가지게 하려면

 

padding-top: max(20%, 120px);

 

20%로 하니 컨텐츠가 세로축의 가운데에 오지 않고 device-width가 줄어들면 padding-top이 줄어들어 위로 올라가버린다.

아래처럼 20vh로 device-height에 맞추니 잘 된다!

 

 

padding-top: max(20vh, 120px);

 

 

 

 

www.daleseo.com/css-min-max/

CSS 함수 - min(), max()

 

developer.mozilla.org/en-US/docs/Web/CSS/min