페이지 작업을 하다보면, 요소의 크기나 폰트의 사이즈를 너비비례(vw,vh)의 단위로 주게된다. 근데, 만약에 사용자의 뷰포트가 엄청 크다면? 폰트에 vw를 줬는데 요소 컨테이너의 사이즈는 고정이라면? 내가 원하는 디자인이 나오지 않을 수 있다. 때문에 우리는 max-width같은 최대 너비를 혹은 min-width같은 최소 너비를 설정해주기도 한다.
이를 좀더 쉽게 할 수 있게 해주는 css 함수가 있다. 바로 min()함수와 max()함수이다.
min()함수
예를 들어 레이아웃을 width:70%로 잡았을 때, 너비의 상한을 제한하기 위해서는
width: 70%;
max-width: 800px이런 식으로 속성을 주게되는데, 이를 min() 함수로 표현하게 되면, .
width: min(70%,800px)css가 두 값을 비교해서 더 작은 값을 사용하게 합니다. 때문에 70%의 너비가 800px보다 작은 경우 70%로 적용되고, 70%가 800px보다 커지게 되면 800px이 적용되는 식이다.
회사에서 일하는 중에 어떤 화면에서는 42px로 디자인이 나왔는데 사파리 브라우저에서는 텍스트 사이즈가 컨테이너보다 커지면서 줄바꿈이 일어나서 7vw로 바꿨더니 비슷한 사이즈에 줄바꿈이 일어나지 않았다. 그런데 이젠 크롬에서 7vw가 너무 큰것이다!
이런 경우에 min()함수를 써서 min(42px,7vw) 이렇게 주니까 PC 크롬에서는 42px이 사파리에서는 7vw가 적용되는 것을 확인하고 해결했다!
max() 함수
max()함수는 min()함수와 반대로 두 값중 더 큰 값이 적용된다.
'css' 카테고리의 다른 글
| [css] 2022-07-02 이거 왜 클릭 안되냐..? (0) | 2022.07.02 |
|---|---|
| 2022-06-01 display: flex 를 쓴다. (0) | 2022.06.01 |