[Week1 과제] clamp() - 판다마켓 반응형으로 만들기

원래 생각

rem은 html태그의 font-size 기준으로 돌아간다는 것을 배웠으니,

rem으로 반응형을 만들려면 

media query (@media)를 사용해서 화면 사이즈에 따라 html의 font-size를 다르게 하면 될거라고 생각했다.

 

그래서 이렇게 보통 만드냐고 물어보니까

예전에는 그런 방식을 사용하기도 했었는데, 

요새는 clamp를 많이 사용한다고 한다. 

그래서 clamp가 뭔지 조사해보기로 했다. 

 

조사

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/clamp

clamp() - CSS | MDN

Clamps a value within a range of values between a defined minimum bound and a maximum bound

font-size: clamp(1rem, 2.5vw, 2rem);
/*clamp(minimumVal, preferredVal, maximumVal)*/

 

preferredVal이 vw단위로 되어 있어서,

평상시에는 뷰포트에 따라서 커졌다가 작아졌다 하는데

minimumVal보다는 작아지지 않고, maximumVal보다 커지지 않는다. 

 

문제

① 실질적 해결 방식

중간에 preferredVal을 어느정도 vw로 지정해줘야할지 계산하는 방법이 어려웠다

minval이랑 maxVal이 지정되어 있으면 적절한 preferredVal이 무엇일까?

preferred = calc(
  min + (max - min) * ((100vw - minViewport) / (maxViewport - minViewport))
)

 

구조를 보면

preferred = min + (max - min) * ratio

- ratio: 현재 viewport가 범위 안에서 어디쯤인지를 나타냄

 

② 현실적 해결 방식

font-size: clamp(Xrem, Xrem + Rvw, Yrem);
/*clamp(1rem, 1rem + 1vw, 2rem)*/

minVal을 기준으로 두고, 

임의의 감각값 (이 정도 속도로 커지면 적당하다는 증가속도)을 vw로 더해준다. 

정확할 필요가 없는데,

어차피 clamp가 최소, 최대 크기 안에 놀게 조절해줄테니 

적절한 증가속도를 감각적으로 찾아주기만 하면 되는것이다.

 

보통 이렇게 생각함:

• + 0.5vw → 천천히 커짐
• + 1vw → 적당
• + 2vw → 꽤 빠르게 커짐

👉 디자인 보면서 "감으로 튜닝"