728x90
반응형
HTML에서 글자 크기 조절 방법
HTML에서 텍스트의 크기를 조절하는 것은 웹 페이지 디자인의 중요한 요소입니다. 이를 통해 사용자의 주목을 끌거나, 정보의 계층 구조를 강조하고, 전반적인 가독성을 향상시킬 수 있습니다. HTML과 CSS를 사용하여 글자 크기를 조절하는 다양한 방법이 있습니다.
HTML 태그를 이용한 글자 크기 조절
Heading 태그 (H1 ~ H6)
Heading 태그는 기본적으로 서로 다른 폰트 크기를 가집니다. H1은 가장 큰 제목을 나타내며, H6까지 갈수록 글자크기가 작아집니다.
<h1>가장 큰 제목</h1> <h2>두 번째로 큰 제목</h2> ... <h6>가장 작은 제목</div>Font 태그 (사용하지 않는 것이 좋음)
옛날 HTML에서는 <font size=""> 속성을 사용하여 직접적으로 폰트 사이즈를 지정할 수 있었습니다. 하지만 현재는 사용하지 않는 것이 권장됩니다.
<font size="5">중간 사이즈의 텍스트</font>CSS와 HTML을 결합한 방법
CSS 스타일 속성을 활용하면 HTML 요소의 폰트 사이즈를 보다 세밀하게 조정할 수 있습니다.
<p style='font-size: 20px;'>20픽셀 사이즈의 텍스트.</p>CSS만을 이용한 글자크기 조절
Inline CSS 스타일링
HTML 태그 내부에서 직접 스타일을 지정하는 방법입니다. 이 방법은 간단하고 빠르지만, 유지 관리가 어렵고 코드의 재사용성을 저해합니다.
<p style='font-size: 20px;'>20픽셀 사이즈의 텍스트.</p>Internal CSS 스타일링
HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 정의하는 방법입니다. 이는 특정 HTML 문서에서만 작동하며, 다른 문서에는 영향을 미치지 않습니다.
<style> body {font-size: 16px;} h1 {font-size: 32px;} </style>External CSS 스타일링
외부 CSS 파일에 스타일을 정의하고 HTML 문서에서 그 파일을 링크하는 방법입니다. 이는 여러 HTML 문서에서 동일한 스타일 규칙을 공유할 수 있게 해줍니다.
<link rel='stylesheet' href='styles.css'>728x90
반응형
'IT기초 > HTML5' 카테고리의 다른 글
| [HTML] 태그 가장 많이 사용하는 종류 정리 (0) | 2023.09.12 |
|---|---|
| [HTML/CSS] img 이미지 태그 - 이미지 삽입 방법 (0) | 2023.09.11 |
| [HTML/CSS] h1, h2, h3, h4, h5, h6 제목(Heading) 태그 (0) | 2023.09.11 |
| HTML5 기본태그 - audio, flash 예제 (0) | 2014.10.02 |
| HTML5 기본태그 - 비디오 태그 (0) | 2014.10.02 |