마지막 업데이트 : 2021년 03월 31일
조회수 : 

글꼴크기가 가변적인 제목만들기

clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다. clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다. media (max-width: )는 page-width 값을 참조하여 설정합니다. 상기 설정에서 vw값은 […]
Written by: doogak
  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

clamp() 속성을 이용하여 글꼴크기가 Container의 사이즈에 따라서 유동적으로 변하도록 할 수 있습니다.

clamp() 속성은 최소값, vw값, 최대값의 3가지 속성을 설정합니다.

media (max-width: )는 page-width 값을 참조하여 설정합니다.

/* media max-width는 page-width로 조정함 */

@media (max-width: 1300px) {
  h1 {
    font-size: clamp(24px, 4.31vw, 56px);
  }
  h2 {
    font-size: clamp(22px, 3.46vw, 45px);
  }
  h3 {
    font-size: clamp(20px, 2.77vw, 36px);
  }
  h4 {
    font-size: clamp(18px, 2.31vw, 30px);
  }
  h5 {
    font-size: clamp(16px, 1.85vw, 24px);
  }
  h6 {
    font-size: clamp(14px, 1.54vw, 20px);
  }
}

상기 설정에서 vw값은 아래 링크된 사이트에서 Viewport Width값과 px값을 입력하여 쉽게 구하실 수 있습니다.

PX to VW

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기
power-switchmagnifiercross