CSS에서 반응형 글꼴 만들기
- 뷰포트 값을 사용하여 CSS에서 반응형 글꼴 만들기
- 미디어 쿼리를 사용하여 CSS에서 반응형 글꼴 만들기
-
calc()함수를 사용하여 CSS에서 반응형 글꼴 만들기 -
clamp()함수를 사용하여 CSS에서 반응형 글꼴 만들기
이 기사에서는 CSS를 사용하여 반응형 글꼴을 구현하는 방법만 설명합니다. 현대 CSS와 CSS3가 다양한 화면 크기의 장치에서 글꼴을 읽을 수 있게 만드는 여러 방법을 소개합니다.
뷰포트 값을 사용하여 CSS에서 반응형 글꼴 만들기
글꼴을 반응형으로 만드는 가장 쉬운 방법 중 하나는 표시 영역의 크기나 브라우저의 창 크기에 따라 글꼴 크기를 조정하는 것입니다. 브라우저 창의 축과 관련하여 CSS에서 제공하는 다양한 뷰포트 단위가 있어 반응형 웹 페이지를 만드는 데 매우 유용합니다. 일부 뷰포트 단위는 vw, vh, vmin 및 vmax입니다. CSS 단위에서 이러한 단위의 정보를 얻을 수 있습니다. em, px 또는 pt 대신 이러한 뷰포트 단위를 사용하여 반응형 글꼴을 만들 수 있습니다.
예를 들어 h1, h2 및 p 태그를 각각 생성합니다. 이 태그 사이에 원하는 텍스트를 작성하십시오. CSS에서 h1, h2 및 p 태그의 font-size 속성을 각각 5.9vw, 3.0vh 및 2vmin으로 설정합니다.
브라우저의 크기를 조정하면 브라우저의 뷰포트가 변경되고 그에 따라 텍스트의 글꼴 크기도 변경됩니다. 이런 식으로 글꼴 크기의 뷰포트 단위를 사용하여 CSS에서 반응형 글꼴을 만들 수 있습니다.
예제 코드:
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
미디어 쿼리를 사용하여 CSS에서 반응형 글꼴 만들기
미디어 쿼리를 사용하여 CSS에서 반응형 글꼴을 만들 수 있습니다. 또한 미디어 쿼리를 사용하여 장치의 특정 높이/너비에서 글꼴 크기를 변경할 수 있습니다. @media 키워드를 사용하여 미디어 쿼리를 작성합니다.
예를 들어 font-size 속성을 3em으로 설정합니다. 다음으로 max-width:320px 조건으로 미디어 쿼리를 작성합니다. 그런 다음 font-size 속성을 2em으로 설정합니다.
예제 코드:
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
여기에서 위의 코드를 구현하고 320px 미만의 화면 크기를 가진 장치에서 실행하면 글꼴 크기가 줄어듭니다. 글꼴은 높이가 320px 미만인 장치의 경우 2em으로 설정됩니다. 그리고 글꼴은 320px보다 큰 화면 크기를 가진 장치의 경우 3em입니다.
이 방법의 단점은 디자인이 특정 크기의 장치에서 중단되기 시작하면 더 많은 미디어 쿼리를 추가해야 할 수도 있다는 것입니다.
calc() 함수를 사용하여 CSS에서 반응형 글꼴 만들기
오늘날 대부분의 최신 브라우저는 CSS에서 calc() 메서드를 지원하므로 반응형 코드를 더 쉽게 작성할 수 있습니다. 또한 이 방법은 코드를 복잡하게 만들지 않고 작업을 수행하는 데 더 효과적입니다. calc() 함수를 사용하여 글꼴 크기를 반응형으로 만들 수 있습니다. 함수의 결과는 속성 값입니다.
예를 들어 body 태그의 font-size 속성을 calc() 함수로 설정합니다. 함수 내부에 0.75em + 1vw를 작성합니다.
예제 코드:
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
화면 크기가 다른 장치에서 1vw 값이 변경되면 글꼴 크기가 달라집니다. 따라서 CSS에서 반응형 글꼴을 만들 수 있습니다.
clamp() 함수를 사용하여 CSS에서 반응형 글꼴 만들기
clamp() 함수는 최대값과 최소값 사이의 값을 고정합니다. 이 함수는 3개의 매개변수를 인수로 사용합니다. 첫 번째 매개변수는 최소값, 두 번째 매개변수는 기본 값, 마지막 매개변수는 최대 허용 값입니다. clamp() 함수를 사용하여 length, angle, percentage, number 등과 같은 속성을 설정할 수 있습니다. 이 함수를 사용하여 CSS에서 반응형 글꼴을 만들 수 있습니다.
예제 코드:
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
위의 예에서 2rem 값은 최소 허용 글꼴 크기입니다. 마찬가지로 다음 값인 10vw는 기본 글꼴 크기이고 마지막 값인 5rem은 허용되는 최대 글꼴 크기입니다. 여기에서 중간 값은 vw, ch 또는 vh와 같이 상대적이어야 하며 px 및 pt와 같이 절대적이지 않아야 합니다.
