CSS font-size 속성은 페이지나 웹사이트에 있는 모든 텍스트 요소의 글꼴 크기를 설정합니다. font-size 속성은 텍스트 콘텐츠를 포함하는 모든 클래스, ID 또는 요소에 적용할 수 있습니다. 속성은 px, em, rem, vw, vh 및 키워드 사용 값을 허용합니다.
대부분의 개발자는 다양한 글꼴 크기 조합을 사용하여 웹 페이지의 스타일을 지정합니다. 예를 들어, 웹 개발자는 제목에 큰 글꼴을 사용하고 본문 및 기타 항목에 더 작은 글꼴을 사용할 수 있습니다. 많은 사람들이 묻습니다. CSS 또는 HTML에서 글꼴 크기를 어떻게 변경합니까?
CSS font-size 속성을 사용하면 개발자가 웹 페이지의 단락이나 텍스트 줄에 글꼴 크기를 설정할 수 있습니다.
이 튜토리얼에서는 예제를 참조하여 font-size를 사용하는 방법에 대해 설명합니다. 재산. 이 가이드를 통해 텍스트 크기 변경에 대한 전문가가 될 수 있습니다.
CSS font-size
적절한 글꼴 스타일은 웹 디자인의 중요한 부분입니다. 스타일이 지정되지 않은 텍스트는 방문자에게 읽기 어려움을 야기하여 거의 확실히 불쾌한 웹사이트 경험을 제공합니다.
font-weight, font-family, text-decoration 및 color와 같이 텍스트가 표시되는 방식을 사용자 정의하는 데 사용할 수 있는 글꼴에 대한 많은 CSS 스타일이 있습니다. 또 다른 중요한 속성은 텍스트 블록의 글꼴 크기를 제어하는 font-size입니다.
CSS font-size 구문 속성:
font-size: sizeValue;
sizeValue 텍스트 블록에서 사용할 글꼴 크기입니다. 텍스트 블록에서 사용하는 글꼴 크기를 지정하는 방법에는 여러 가지가 있습니다. 이 기사에서 논의할 방법은 다음과 같습니다.
참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.
부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.
- 픽셀
- 그들
- 루트 엠
- 표시 영역 단위
- 키워드
웹 페이지에서 각 글꼴 크기 접근 방식을 사용하는 방법의 예를 살펴보겠습니다.
픽셀을 사용하여 글꼴 크기 설정
글꼴 크기를 설정하는 가장 일반적인 방법 중 하나는 픽셀을 사용하는 것입니다.
픽셀은 정확한 측정을 가능하게 하기 때문에 좋은 측정 단위입니다. 픽셀 단위는 운영 체제나 웹 브라우저의 영향을 거의 받지 않습니다. 한 화면의 픽셀은 다른 화면의 픽셀입니다. 지정한 픽셀 값은 다른 브라우저에서 거의 같은 방식으로 나타납니다.
그러나 픽셀을 사용하여 텍스트 블록의 글꼴 크기를 설정하는 데에는 접근성이라는 한 가지 제한이 있습니다. 일부 브라우저에서는 사용자가 글꼴 크기를 사용자 정의할 수 없기 때문에 픽셀을 사용하여 정의된 글꼴 크기에 액세스할 수 없습니다. 예를 들어 시각 장애가 있는 사용자는 픽셀을 사용하여 글꼴 크기를 정의하는 사이트를 사용하는 데 어려움을 겪을 수 있습니다.
글꼴 크기가 28px인 웹사이트를 만들고 있다고 가정해 보겠습니다. 모든 <h1>에 대해 요소 및 12px 모든 <p>에 대해 집단. 다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
h1 { font-size: 28px; }
p ( font-size: 12px; }
우리 코드에서는 CSS 선택기를 사용하여 모든 <h1>의 글꼴 크기를 설정했습니다. 요소를 28px로 및 모든 <p> 요소를 12px로 . 다음 스니펫은 이러한 요소가 새로운 글꼴 크기로 어떻게 나타나는지 보여줍니다.
<style>
h1 { font-size: 28px; }
p { font-size: 12px; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
ems를 사용하여 글꼴 크기 설정
CSS에서 글꼴 크기를 설정하는 또 다른 일반적인 방법은 em 크기를 사용하는 것입니다. em 측정 단위는 상위 요소의 글꼴 크기를 나타냅니다. 글꼴 크기를 2em으로 설정하면 , 글꼴 크기는 상위 요소의 두 배입니다.
ems를 사용한 CSS 글꼴 크기 조정의 예
예를 들어 상자에 저장된 텍스트 단락이 있다고 가정합니다. 상자의 글꼴 크기는 20px입니다. . 텍스트 단락의 글꼴 크기를 1em으로 지정한 경우 , 단락의 글꼴 크기는 20px입니다. . 상위 요소의 글꼴 크기와 동일합니다.
상위 요소의 글꼴 크기를 설정하지 않은 경우 브라우저는 해당 브라우저에 대해 지정된 기본값을 사용합니다. 일반적으로 16px입니다. . 결과적으로 글꼴 크기를 지정하지 않은 경우 1em 기본적으로 16px입니다. , 2em 기본적으로 32px입니다. .
웹 페이지의 글꼴 크기가 16px라고 가정합니다. . 텍스트의 모든 단락이 해당 글꼴 크기를 사용하여 표시되기를 원합니다. 즉, 1em 값을 사용해야 합니다. . 또한 모든 제목이 24px의 글꼴 크기로 표시되기를 원합니다. , 이는 1.5em과 같습니다. .
다음 코드를 사용하여 이 작업을 수행할 수 있습니다.
p { font-size: 1em; }
h1 { font-size: 1.5em; }
우리 코드에서 모든 단락의 크기는 16px입니다. (1em =16px 기본적으로) 및 모든 <h1> 요소는 24px입니다. (1.5em =24px ).
다음은 웹 페이지에 텍스트가 표시되는 방식입니다.
<style>
p { font-size: 1em; }
h1 { font-size: 1.5em; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
위의 예에서 두 <h1>에 대한 새로운 스타일을 볼 수 있습니다. 및 <p> 요소.
<h1> <h1> 크기의 다른 글꼴 크기를 가진 상자 안에 나타납니다. 변경됩니다. em 값은 부모의 글꼴 크기를 상속하기 때문입니다.
루트 em을 사용하여 글꼴 크기 설정
루트 em의 약자, rem 글꼴 크기를 설정하는 데 사용할 수 있는 CSS3에 도입된 새로운 측정 단위입니다. rem을 사용하는 값 루트 <html>에 상대적입니다. 부모 요소 대신 요소.
rem 값은 전체 문서에 상대적인 값을 지정할 수 있기 때문에 유용합니다. 이렇게 하면 상위 요소에 다른 em 값이 있어도 텍스트 크기에 영향을 미치지 않습니다.
기본 글꼴 크기가 16px인 웹 페이지가 있다고 가정합니다. . 이전 예에서와 같이 모든 <h1>를 원합니다. 24px로 표시 모든 단락은 16px로 표시됩니다. . 다음 코드를 사용하여 이러한 글꼴 크기를 설정할 수 있습니다.
<style>
p { font-size: 1rem; }
h1 { font-size: 1.5rem; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
코드는 이전 예제와 거의 동일합니다. 유일한 차이점은 우리가 사용하는 측정 단위가 rem이라는 것입니다. em 대신 . 이 예에서 글꼴 크기는 여전히 24px입니다. 및 16px 최상위 머리글과 단락에 대해 각각. 웹 페이지의 기본 글꼴 크기가 16px이기 때문입니다. .
키워드를 사용하여 글꼴 크기 설정
CSS에서 글꼴 크기를 설정하는 데 사용할 수 있는 키워드에는 두 가지 유형이 있습니다.
절대 키워드는 웹 페이지의 변경 사항에 관계없이 동일하게 유지되는 글꼴 크기를 설정하는 데 사용됩니다. 절대 글꼴 크기를 설정하는 데 사용할 수 있는 키워드는 다음과 같습니다.
xx-small(9px)x-small(10픽셀)small(13픽셀)medium(16픽셀)large(18픽셀)large(24픽셀)xx-large(32픽셀)
괄호 안에 지정된 값은 기본 글꼴 크기가 16px인 브라우저를 기반으로 합니다. .
반면에 상대 키워드는 웹 페이지의 다른 곳에서 글꼴 크기에 따라 변경되는 글꼴 크기를 설정합니다. 사용할 수 있는 상대 키워드는 더 작고 큽니다. 이 키워드는 페이지의 다른 글꼴 크기가 변경될 때 글꼴 크기를 변경할 수 있기 때문에 유용합니다.
모든 <h2>의 크기를 설정하고 싶다고 가정합니다. 페이지의 요소를 24px로 (x-large) 및 모든 <h3> 요소를 18px로 (크기가 큰). 다음 코드를 사용하여 그렇게 할 수 있습니다.
<style>
h2 { font-size: x-large; }
h3 { font-size: large; }
</style>
<html>
<h2>This is a heading.</h2>
<p>This is some paragraph text.</p>
<h3>This is a lower-level heading.</h3>
<p>This is some more paragraph text.</p>
</html>
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
<h2>의 글꼴 크기 및 <h3> 태그는 24px입니다. 및 18px , 각각. 그러나 픽셀을 사용하여 이러한 크기를 지정하지 않았습니다. 대신 브라우저에서 제공하는 기본 글꼴 크기 키워드를 사용했습니다.
뷰포트 단위를 사용하여 글꼴 크기 설정
뷰포트 단위는 브라우저의 뷰포트 크기에 대한 백분율로 계산됩니다. CSS에서 지원하는 두 개의 뷰포트 단위는 다음과 같습니다. 뷰 높이(vh ) 및 보기 너비(vw ).
표시 영역 단위는 브라우저 표시 영역 크기의 백분율이므로 1vh 예를 들어 뷰포트 높이의 1%와 같습니다. 따라서 너비가 1000px인 표시 영역이 있는 경우 1vh 10픽셀과 같습니다.
브라우저 창의 크기를 조정하면 글꼴 크기가 변경되므로 뷰포트 단위를 사용하면 유용합니다. 이를 통해 다양한 브라우저 및 기기 크기에 맞춰 더욱 액세스 가능한 사용자 환경을 제공할 수 있습니다.
헤더가 뷰포트 너비의 4%이고 단락이 뷰포트 너비의 1%인 사이트를 만들고 싶다고 가정합니다. 다음 코드를 사용하여 그렇게 할 수 있습니다.
<style>
p { font-size: 1vw; }
h1 { font-size: 4vw; }
</style>
<html>
<h1>This is a heading.</h1>
<p>This is a paragraph of text.</p>
</html>
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인하세요.
브라우저의 크기를 조정하면 이러한 제목의 크기가 변경됩니다.
결론
font-size 속성은 CSS(따라서 HTML)에서 글꼴 크기를 변경하는 데 사용됩니다. 픽셀, em, rem, 키워드 및 뷰포트 단위를 포함하여 글꼴 크기를 표시할 수 있는 여러 측정 단위를 허용합니다. CSS 클래스 및 ID는 물론 요소 자체에도 적용할 수 있습니다.
이 튜토리얼에서는 CSS 글꼴 크기의 기본 사항을 살펴보았습니다. 이제 전문가처럼 font-size 속성을 사용할 준비가 되었습니다.