CSS 함수 clamp를 사용해보았다.

@media 를 사용하여 평화롭게(?) 반응형 스타일을 작업하던 어느날

 

"반응형을 꼭 이렇게 더럽고 귀찮게 작업해야할까...?" 라는 생각이 들었습니다.

아주 간단한 속성하나만 추가하는데 css가 이렇게나 더러워진다니..

 

제가 위에서 더럽고 귀찮게 작업해야할까? 라고 의문이 들었던 코드입니다.

 

"전혀 길지도 않고 눈에 잘 들어오면서 짧은데?" 라고 생각하실 수 있습니다.

 

하지만  이런 CSS 코드가 점점 많아진다면요...?

이런 CSS 코드가 점점 많아지고 이런 파일들이 점점 많아진다면요...?

 

저는 이런 CSS 코드를 보면 CSS 코드 파악하고 수정해야하는데 읽기 싫게 너무 길다는 생각이 들것 같습니다.

 

그래서 저는 "CSS에 쉽게 해주는 기능이 없을까?" 생각하고 찾아보다

clamp 라고 하는 CSS 함수를 찾아보게 되었습니다.

---

clamp, 일단 어떻게 사용하는걸까?

백문이 불여일견!

이해하시기 간단하게 코드로 보여드리겠습니다.

html 파일입니다.

 

clamp를 사용한 스타일 파일입니다.

위처럼 코드를 적용하면 어떤 결과가 나올까요??

 

 

개발자도구를 보시면 요소의 크기가 최대 : 800 최소 : 300 으로 고정되는게 보이시나요?

한번 보셨으니 사용 방법과 설명 을 적어보자면

 

div {

  width: clamp(요소의 제일 작은값, 적용하고 싶은 값, 요소의 제일 큰 값);
  /*
  width: clamp(300px, 80vw, 800px);
  
  위 코드를 해석해보자면 아래와 같은 뜻입니다!
  
  80vw 로 넣을건데 (vw === Viewport Width)
  300px이하가 되면 요소가 깨져보이니까 300px 이하로는 줄어들지말고
  800px이상 커지면 그건 또 이상하니까 800px 이상으로 커지지는 말자 친구야?
  */
  
}

 

 

사용방법도 아주 간단하지 않나요??

 

그렇다면 이쯤에서 한번 원래 @media 를 사용해서 넣으려면 코드를 어떻게 짜야 했는지 한번 볼까요?

이미 다 아시겠지만 그래도 보여드리겠습니다 🥹

 

@media 를 사용한 CSS 코드

위에서 clamp 를 사용한것보다 훨씬 길고 더러워보이지 않나요?

 

제가 예시로 든 코드는 실제 사용될리가 절대 없는 쓸모없는 코드이지만,

실제로 사용한다면 예시 코드보다 훨씬 더 간결하게 작성할 수 있을겁니다.

 

하지만 clamp를 사용해서 @media 친구가 해주던 모든 일을 대체할 수는 없겠다라고 생각이 들었습니다.

분명히 @media 를 사용해서만 할 수 있는일이 있을거라고 말이죠.

 

그래서 이번에 제가 생각하고 느낀건 이겁니다.

 

@media 코드를 사용하지 않을 수 있는 코드는 간결하게 clamp 사용하고,

@media 가 꼭 필요한 부분에서만 @media 를 사용한다면 CSS코드를 보고 더 쉽고 빠르게 이해할 수 있지 않을까?

 

라고 말이죠.

 

그리고 이미 다른 많은 분들이 어떻게하면 반응형을

더 간단하면서도 이쁘게 잘 적용할 수 있을까를 많이 공부, 연구해주셨기 때문에

다른 많은 방법들이 존재합니다.

 

Fluid Typography 라고 하는 CSS trick 도 존재하고,

min(), max(), % 단위와 rem 등 여러가지 수많은 방법이 존재합니다.

 

어떤 방법이든 아무렇게나 막 남발하며 사용하기보다는

사용목적에 알맞게 사용하는게 중요하다는 생각이 듭니다.

 

이미 예전에 나온 CSS 함수이긴 하지만

이 함수를 오늘 처음 알게된 저에게는 오늘 나온 신기술과도 같으니 당장 사용해보러 가보려고 합니다.

 

새로운 기술을 적용할 생각에 벌써 설레네요 😝

그럼 이만~ 💸

 

 

 

 

 

정보 출처 :

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

clamp() - CSS: Cascading Style Sheets | MDN

https://css-tricks.com/snippets/css/fluid-typography/

Fluid Typography | CSS-Tricks