How To – 반응형 텍스트

w3.css

반응형 텍스트

CSS를 사용하여 반응형 타이포그래피를 만드는 방법을 알아보자.

반응형 텍스트

브라우저 창 크기를 조절하여 텍스트 크기가 어떻게 변하는지 확인하자.

텍스트 크기를 조정할 때는 “vw” 단위를 사용하자. 10vw는 크기를 뷰포트 너비의 10%로 설정한다.

뷰포트는 브라우저 창 크기다. 1vw = 뷰포트 너비의 1%다. 뷰포트 너비가 50cm이면 1vw는 0.5cm다.

반응형 글꼴 크기

텍스트 크기는 vw “뷰포트 너비”를 의미하는 단위로 설정할 수 있다.

이렇게 하면 텍스트 크기가 브라우저 창 크기에 맞게 조정된다.

1단계) HTML 추가

<h1 style="font-size:8vw;">Hello World</h1>
<p style="font-size:2vw;">Resize the browser window to see how the font size scales.</p>

미디어 쿼리로 글꼴 크기 변경

미디어 쿼리를 사용하여 특정 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있다.

1단계) HTML 추가

<div class="example">Example DIV.</div>

2단계) CSS 추가

/* If the screen size is 601px wide or more, set the font-size of 
 to 80px */
@media screen and (min-width: 601px) {
  div.example {
    font-size: 80px;
  }
}

/* If the screen size is 600px wide or less, set the font-size of 
 to 30px */
@media screen and (max-width: 600px) {
  div.example {
    font-size: 30px;
  }
}