HTML에서 글자 크기 조절 방법

HTML에서 텍스트의 크기를 조절하는 것은 웹 페이지 디자인의 중요한 요소입니다. 이를 통해 사용자의 주목을 끌거나, 정보의 계층 구조를 강조하고, 전반적인 가독성을 향상시킬 수 있습니다. HTML과 CSS를 사용하여 글자 크기를 조절하는 다양한 방법이 있습니다.

HTML 태그를 이용한 글자 크기 조절

Heading 태그는 기본적으로 서로 다른 폰트 크기를 가집니다. H1은 가장 큰 제목을 나타내며, H6까지 갈수록 글자크기가 작아집니다.

<h1>가장 큰 제목</h1> <h2>두 번째로 큰 제목</h2> ... <h6>가장 작은 제목</div>

옛날 HTML에서는 <font size=""> 속성을 사용하여 직접적으로 폰트 사이즈를 지정할 수 있었습니다. 하지만 현재는 사용하지 않는 것이 권장됩니다.

<font size="5">중간 사이즈의 텍스트</font>

CSS 스타일 속성을 활용하면 HTML 요소의 폰트 사이즈를 보다 세밀하게 조정할 수 있습니다.

<p style='font-size: 20px;'>20픽셀 사이즈의 텍스트.</p>

HTML 태그 내부에서 직접 스타일을 지정하는 방법입니다. 이 방법은 간단하고 빠르지만, 유지 관리가 어렵고 코드의 재사용성을 저해합니다.

<p style='font-size: 20px;'>20픽셀 사이즈의 텍스트.</p>

HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다. 이는 특정 HTML 문서에서만 작동하며, 다른 문서에는 영향을 미치지 않습니다.

<style> body {font-size: 16px;} h1 {font-size: 32px;} </style>

외부 CSS 파일에 스타일을 정의하고 HTML 문서에서 그 파일을 링크하는 방법입니다. 이는 여러 HTML 문서에서 동일한 스타일 규칙을 공유할 수 있게 해줍니다.

<link rel='stylesheet' href='styles.css'>

728x90