min() / max()

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);

CSS 함수 - min(), max()
min() - CSS: Cascading Style Sheets | MDN

sass에서 max, min 사용하기

#{"max(1vw, 20px)"}

이런 식으로 max나 min을 #{}로 감싸줘야 함

Sass: Special Functions
font-size: max(vw, px) causes internal error