반응형
html에서 제목 요소로 사용되는 <h1>~<h6>태그를 사용하는 방법입니다.
<h1>~<h6> 태그에서 h는 'heading'의 약자이고
h태그는 블록요소입니다.
블록요소의 가장 큰 특징은 일반적으로 태그가 끝나면 자동으로 줄이 바뀝니다.
h태그는 기본적으로 글자가 볼드로 설정되어 있습니다.
제목의 글자 크기와 중요도에 따라 <h1>부터 <h6>까지 나누어 지고.
숫자가 낮을수록 글자 크기와 중요도가 높아집니다.
따라서 <h1>의 글자 크기가 가장 크고 <h6>의 글자 크기가 가장 작습니다.
<body>
<h1>안녕하세요.</h1>
<h2>안녕 하세요.</h2>
<h3>안녕 하세요.</h3>
<h4>안녕
하세요.</h4>
<h5>안녕하세요.</h5>
<h6>안녕하세요.</h6>
</body><h1>태그에는 띄어쓰기나 줄 바꿈을 사용하지 않고
<h2>태그에는 띄어쓰기를 한번, <h3>태그에는 띄어쓰기를 여러번 주고
<h4>태그에는 줄 바꿈을 주었습니다.
결과를 출력한 이미지입니다.
띄어쓰기가 없는 <h1>태그와 띄어쓰기를 한번 사용한 <h2>태그는 문제가 없지만
띄어쓰기가 여러번 있는 <h3>태그와 <h4>태그는 제대로 출력이 되지 않았습니다.
<h3>태그가 제대로 출력되지 않은 이유는 html에서는 띄어쓰기를 여러번 사용해도
한번만 인식되기 때문에 띄어쓰기를 여러번 하려면  를 입력하면 여러번 띄어쓰기가 됩니다.
<h4>태그가 제대로 출력되지 않는 이유는 텍스트가 영역의 너비를 넘지 않을 때에는
자동으로 줄바꿈이 되지않아 <br> 태그를 사용해서 줄바꿈을 해주어야 합니다.
<body>
<h1>안녕<br>하세요.</h1>
<h1>안녕    하세요.</h1>
</body> 와 br태그를 사용하고 출력된 이미지입니다.
띄어쓰기와 줄 바꿈이 제대로 출력됩니다.
반응형
'html' 카테고리의 다른 글
| 구글 폰트를 웹 폰트로 사용하는 방법 (0) | 2024.03.14 |
|---|---|
| CSS로 형광펜(하이라이터) 효과를 주는 방법 (0) | 2024.01.03 |
| CSS로 글자에 그라디언트 색상 넣는 방법 (1) | 2023.08.03 |