반응형
HTML 태그 - 제목 태그
<body>
<h1>제목태그(h1)</h1>
<h2>제목태그(h2)</h2>
<h3>제목태그(h3)</h3>
<h4>제목태그(h4)</h4>
<h5>제목태그(h5)</h5>
<h6>제목태그(h6)</h6>
</body>실행결과
- 문서의 정보 계층을 구조화
- 블록방식의 태그
- 숫자가 낮을수록 높은 단계(중요한)의 제목
- 크기만 크게 보일뿐만 아니라 컴퓨터가 문서를 파악하기 위해 쓰이는 상황에 맞게 사용
HTML 태그 - 본문 태그
1. <p> 태그
<body>
<h2>Lorem</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam excepturi corrupti praesentium, nostrum unde labore et animi.
Neque, officia beatae! Sunt optio quae obcaecati maiores tempora quas
sed cupiditate aliquam!
</p>
</body>실행결과
- 블록 형태의 태그
- 하나의 문단을 설정
- 코드에서 줄 바꿈을 해도 줄 바꿈이 화면에서 출력 X
2. <br> 태그
코드에 작성한 것처럼 줄 바꿈이 될 수 있도록 할 수 있는 태그 → <br>
<body>
<h2>Lorem</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>
Quisquam excepturi corrupti praesentium, nostrum unde labore et animi. <br/>
Neque, officia beatae! Sunt optio quae obcaecati maiores tempora quas <br/>
sed cupiditate aliquam!
</p>
</body>실행결과
- Enter가 아닌 <br> 태그를 삽입해야 줄 바꿈 가능
- 단독으로 쓰이는 태그인 경우 태그 이름 뒤에 /를 붙임
3. <pre> 태그
<pre>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quisquam excepturi corrupti praesentium, nostrum unde labore et animi.
Neque, officia beatae! Sunt optio quae obcaecati maiores tempora quas
sed cupiditate aliquam!
</pre>실행결과
- 서식이 미리 지정된 텍스트를 설정
- 텍스트의 공백과 줄 바꿈을 유지하여 표시할 수 있음
- 기본적인 Monospace 글꼴 계열로 표시
4. <hr> 태그
<h2>Lorem</h2>
<hr>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. <br/>
Quisquam excepturi corrupti praesentium, nostrum unde labore et animi.<br/>
Neque, officia beatae! Sunt optio quae obcaecati maiores tempora quas<br/>
sed cupiditate aliquam!
</p>실행결과
- 문단의 분리를 위해 설정
- 주제별로 분리를 하여 의미적 관점으로 사용
- 대부분 수평선으로 표시
참고자료
반응형
'Web > HTML' 카테고리의 다른 글
| HTML태그 - 입력양식태그 (2) | 2020.09.17 |
|---|---|
| HTML 태그 - 표 태그 (12) | 2020.09.15 |
| HTML 태그 - 목록태그 (4) | 2020.09.15 |
| HTML 태그 - 앵커태그, 글자 형태 관련 태그 (19) | 2020.09.13 |
| HTML 란? (13) | 2020.09.12 |
댓글