CSS 글자 크기 조절하기

소요 시간: 5분 조회수: 63

CSS에서 글자 크기를 조절하는 방법에 대해 정리했다.

웹페이지에서 텍스트 크기를 변경하는 건 디자인에서 정말 중요한 부분이기 때문에, 여러 가지 방법을 자세히 알아보았다.

각 방법에 대해 예시 코드도 추가했다.


1. 절대 단위

먼저 절대 단위에 대해 배웠다. 절대 단위는 글자 크기가 고정된 값으로 설정된다는 특징이 있다. 예를 들어, `px`나 `pt` 같은 단위는 크기가 변하지 않아서 정확하게 크기를 조정할 수 있다.

픽셀(px):

가장 많이 쓰이는 단위로, 고정된 크기를 설정한다. 예를 들어, font-size: 16px;이라고 하면 글자 크기가 16픽셀로 정확히 고정된다.

p {
  font-size: 16px; /* 고정된 16px 크기 */
}

포인트(pt):

이 단위는 주로 인쇄 매체에서 사용되며, 1pt는 1/72인치에 해당한다. 웹에서는 잘 사용되지 않지만, 인쇄를 고려할 때 유용할 수 있다.

p {
  font-size: 12pt; /* 12포인트 크기 */
}


2. 상대 단위

상대 단위는 부모 요소나 루트 요소의 크기를 기준으로 크기가 결정된다. 이 점이 가장 큰 특징이다. 상대 단위는 화면 크기에 따라 유동적으로 크기를 조절할 수 있어서 반응형 디자인에 적합하다.

em:

em은 부모 요소의 글자 크기를 기준으로 크기가 설정된다. 예를 들어, 부모 요소의 글자 크기가 16px일 때, font-size: 1.5em;을 설정하면 24px이 된다.

/* 부모 요소의 font-size가 16px일 때 */
div {
  font-size: 16px;
}

p {
  font-size: 1.5em; /* 부모 폰트 크기의 1.5배인 24px */
}

rem (root em):

rem은 html 요소의 폰트 크기를 기준으로 한다. 브라우저 기본 폰트 크기는 보통 16px이므로, font-size: 1rem;은 기본 16px로 설정된다.

html {
  font-size: 16px; /* 루트 폰트 크기 설정 */
}

p {
  font-size: 1rem; /* 루트 폰트 크기의 1배인 16px */
}

퍼센트(%):

퍼센트는 부모 요소의 크기를 기준으로 글자 크기를 설정한다. 예를 들어, font-size: 120%;라고 설정하면 부모 폰트 크기의 120%가 적용된다.

div {
  font-size: 16px;
}

p {
  font-size: 120%; /* 부모 폰트 크기의 120%인 19.2px */
}


3. 뷰포트 단위

뷰포트 단위는 화면의 크기, 즉 뷰포트 크기에 따라 폰트 크기가 달라지게 설정하는 방법이다. 이 방식은 반응형 웹 디자인에서 정말 유용하다.

vw (viewport width):

뷰포트 너비의 백분율로 글자 크기를 설정한다. 예를 들어, `font-size: 2vw;`라고 하면, 화면 너비의 2%만큼 글자 크기가 결정된다.

p {
  font-size: 2vw; /* 뷰포트 너비의 2% 크기 */
}

vh (viewport height):

뷰포트 높이의 백분율로 글자 크기를 설정한다. 예를 들어, `font-size: 5vh;`라고 하면, 화면 높이의 5%만큼 글자 크기가 결정된다.

p {
  font-size: 5vh; /* 뷰포트 높이의 5% 크기 */
}

vmin / vmax:

vmin은 뷰포트 너비와 높이 중 더 작은 값을 기준으로 글자 크기가 설정되고, vmax는 더 큰 값을 기준으로 설정된다. 예를 들어, font-size: 3vmin;이라고 하면, 너비와 높이 중 작은 값의 3%가 글자 크기가 된다.

p {
  font-size: 3vmin; /* 뷰포트 너비와 높이 중 더 작은 값의 3% */
}


4. CSS 키워드

글자 크기를 설정할 때 `large`, `medium`, `small` 같은 키워드를 사용할 수도 있다. 이 방법은 굉장히 직관적이고, 빠르게 텍스트 크기를 설정할 수 있다.

p {
  font-size: large; /* 기본 키워드로 설정된 large 크기 */
}


5. 계산 함수 calc()

calc() 함수는 여러 단위를 결합해서 계산할 수 있는 함수다. 고정된 크기와 상대적인 크기를 합칠 수 있기 때문에, 더 복잡한 계산이 필요할 때 유용하다.

p {
  font-size: calc(10px + 2vw); /* 고정된 10px에 뷰포트 너비의 2%만큼 추가 */
}


6. clamp() 함수

clamp() 함수는 최소값, 이상적인 값, 최대값을 설정해서 글자 크기를 제한하는 방법이다. 이 함수는 반응형 디자인에서 글자 크기를 더 유연하게 조절할 수 있게 도와준다.

p {
  font-size: clamp(12px, 2vw, 24px); /* 최소 12px, 최대 24px 사이에서 뷰포트 크기에 따라 변화 */
}


CSS에서 글자 크기를 조절하는 여러 방법들을 정리해봤다.

절대 단위는 고정된 크기를 설정하고, 상대 단위는 부모 요소나 루트 요소에 따라 유동적으로 크기가 변한다.

뷰포트 단위는 화면 크기에 따라 크기가 변하는데, 반응형 웹 디자인에 아주 유용하다.

calc()와 clamp() 함수는 복잡한 계산을 통해 더 세밀하게 크기를 조정할 수 있는 방법이다.

각 단위마다 장단점이 있으니, 상황에 맞는 단위를 선택하는 것이 중요하다는 걸 알게 되었다.

반응형 웹 디자인을 할 때는 em, rem, 뷰포트 단위들을 적절히 사용하면 더 유연한 디자인을 만들 수 있을 것 같다.

인기글

CSS 리스트