단락을 구분 짓는 태그 (1)
<p></p> 태그
이 p 태그는 HTML 문서의 텍스트를 단락으로 분리되게 한다.
이 <p> 태그는 시각적으로 구분되는데 <p> 태그를 연속적으로 두 번 사용하면
두 줄 사이에 빈 줄이 남아서 구분이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>p 태그 테스트</p>
<p>p 태그 테스트</p>
</body>
</html>결과화면
이렇게 p 태그를 사용하면 위 <p> 태그와 아래 <p> 태그 사이에 단락이
구분 지어진다.
단락을 구분 짓는 태그 (2)
<br> 태그
이 br 태그는 HTML 문서의 텍스트를 강제적으로 줄 바꿈 함으로써 단락을 만들 수 있다.
이 태그는 단일 태그이기 때문에 닿는 </br> 이 태그는 사용하지 않는다.
단순 <br> 태그 한 번만 써서 사용해주면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<p>br 태그를 테스트 합니다.<br>br 태그를 테스트 합니다. <br><br> br 태그를 테스트 합니다.</p>
</body>
</html>결과 화면
이 처럼 br 태그를 한번 쓰면 줄 바꿈 두번 연달아 사용하면
단락을 시각적으로 표현이 가능하다.
br 태그는 가능하면 줄바꿈 용도로 사용하고 단락을
표시하고 싶다면 p태그를 사용하는 게 바람직하다.
반응형
단락을 구분 짓는 태그 (3)
<hr> 태그
이 hr 태그는 강조를 위해 수평선 <hr> 단락 사이에 태그를 삽입하여 단락을 구분 짓게 한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>단락 테스트 p, br, hr</h1>
<h2>p 태그 안에 hr 태그</h2>
<p>br 태그를 테스트 합니다.<hr>br 태그를 테스트 합니다.</p>
<br>
<h2>p 태그 다음 hr 태그 사용</h2>
<p>2번 째 테스트 입니다. 2번 째 테스트 입니다. 2번 째 테스트 입니다.</p>
<hr>
<p>3번 째 테스트 입니다. 3번 째 테스트 입니다. 3번 째 테스트 입니다.</p>
</body>
</html>결과 화면
이 처럼 <p> 태그 안에 <hr> 태그를 사용해서 단락을 구분 지어도 되지만
이렇게 사용하는 것보다 두 번째처럼 <p> 태그를 사용하여 단락을 구분 짓고,
그다음 <hr> 태그를 사용하여 확실히 구분 짓는 게 바람직하다.
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| HTML5 - 텍스트(강조태그) <b>, <i>, <strong>, <em> (0) | 2022.02.22 |
|---|---|
| HTML5 - 텍스트(인용 구문 태그)<blockquote>, <q> (0) | 2022.02.21 |
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 4 (0) | 2022.02.20 |
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag) - 3 (0) | 2022.02.19 |
| 웹 페이지(html 시멘틱) 구획 요소 태그 (tag), 웹접근성, 랜드마크 ARIA - 2 (0) | 2022.02.16 |