CSS font-size, 텍스트 크기 조절을 위한 속성

FONT-SIZE 속성이란?

font-family와 함께 다니는 속성인 필수 도구입니다. 웹페이지의 텍스트 크기를 조절하는 중요한 역할을 합니다. 결국 컨텐츠를 잘 보여주기 위해서는 폰트 컬러, 글꼴 유형 뿐만 아니라 크기도 잘 정의해야 해요. 웹페이지의 가독성과 사용자 경험에 큰 영향을 미치기 때문입니다.

 

사용법

h1 {
  font-size: 32px;
}

p {
  font-size: 16px;
}

• h1 요소와 p 요소의 텍스트 크기를 정한 예시입니다
• font-size 속성 뒤에 픽셀을 입력합니다. 예시에서는 픽셀을 입력했지만 다른 방식으로도 가능합니다.
  • px : 기본적인 값 픽셀입니다. 우리가 흔히 알고 있는 폰트 크기와 같습니다. 12폰트는 12px 폰트인거죠.
  • %(백분율) : 아래의 em과 비슷할수도 있지만 120%라고 작성하면 부모 현재 폰트 크기 대비 1.5배 크기로 커집니다. 
  • em : 현재 폰트 크기 대비 상대적인 크기를 의미합니다. 1.2em은 기본 폰트 크기대비 1.2배 크기로 키우라는 뜻입니다
  • rem : 최상위요소 (예를 들면 body에 달린 속성)의 크기를 기준으로 조정합니다. root em의 약자가 rem이에요. 얘도 em가 마찬가지로 1.2rem이라고 쓰면 최상위 속성 폰트 크기의 1.2배 크기로 조정합니다.
  • vw : 뷰포트 크기에 따라 조정하는 방식입니다. 반응형의 경우 사용자의 브라우저 너비에 따라 텍스트 크기를 조절합니다. 예를 들어 3vw라고 작성하면 뷰포트 너비 대비 3%의 크기로 텍스트를 조정합니다. 뷰포트가 1000px이라고 하면 30px 크기가 되겠죠?

 

예시

font-size를 여러 방식으로 만들어보았어요.

 

See the Pen Untitled by 40's Programmer (@40sProgrammer) on CodePen.

 

이렇듯 font-size속성의 다양한 값을 이용해서 텍스트 크기를 유연하게 조절할 수 있습니다.