함수 표기법 - clac(), min(), max()

See the Pen Untitled by Jeong-Dagyeong (@jeong-dagyeong) on CodePen.

calc()

width : calc(100% - 200px)

: 가로길이 100%에서 200px만큼의 길이를 뺀 것

 

※주의할 점

사칙연산 앞 뒤로 공백을 넣어주어야 한다.

 

개발자도구(F12)에 들어가서 computed를 확인해보면 브라우저가 px로 계산한 값을 볼 수 있다.

 

min(), max()

width : min(100%, 500px)

: 두개의 값 중에 작은 값을 브라우저가 선택한다.

 

width : max(100%, 500px)

: 두개의 값 중에 큰 값을 브라우저가 선택한다.

 

※주의할 점

min과 max는 IE에서는 적용이 안됨으로 적용되는 브라우저를 잘 확인해야 한다.

 

 

만약 viewport의 사이즈가 변경되면 둘 중 작은값을 다시 선택하여 설정하게 된다.