4) HTML 텍스트 요소 - 단락
2021. 7. 10. 00:44ㆍWEB/HTML
반응형
단락(Paragraph)
HTML에서 문단을 나누어 독립된 단락을 생성하는 경우 <p> 태그를 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>단락을 나누는 p태그</title>
</head>
<body>
<p>1번째 단락입니다.</p>
<p>2번째 단락입니다.</p>
<p><p>3번째 단락입니다.</p></p>
</body>
</html><p> 태그를 사용한 경우 웹브라우저에서는 단락을 구분하기 위해 단락의 위아래로 여백이 자동으로 삽입된다.
또한 <p> 태그를 연속적으로 여러 번 사용해도 처음 <p> 태그만 처리되고 나머지 <p> 태그는 무시된다.
줄바꾸기
HTML 문서에서 <body> 태그 내에 텍스트 입력 시 엔터키를 사용하여도 모든 텍스트는 한 줄로 표시된다.
따라서 HTML 문서에서 엔터키와 같은 줄바꿈 표현하기 위해 <br> 태그를 사용한다.
<!DOCTYPE html>
<html>
<head>
<title>단락을 나누는 p태그</title>
</head>
<body>
1번째 문장입니다.
2번째 문장입니다. 엔터키를 사용하여도 줄이 바뀌지 않습니다.
<br>
3번째 문장입니다. br 태그를 사용하여 줄이 바겼습니다.
<br><br><br>
4번째 문장입니다.
</body>
</html><br> 태그는 종료태그가 없는 빈 태그이다. 따라서 <br> 또는 <br/>로 사용 가능하다.
<br> 태그는 연속적으로 사용 가능하며, 사용한 만큼 빈줄이 생성된다.
수평선
수평선은 단락의 주제를 구분하는 용도로 사용한다.
이렇게 사용되는 수평선을 HTML 코드에서는 <hr>로 표현할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>단락을 나누는 p태그</title>
</head>
<body>
hr 태그는 수평선을 그리는 태그이다.
<hr>
단락 단위로 주제를 바꿀 때 사용할 수 있다.
</body>
</html><hr> 태그 또한 <br> 태그와 마찬가지로 종료태그가 없는 빈 태그이며, <hr> 또는 <hr/>로 사용 가능하다.
입력한 텍스트 그대로 출력하기
HTML 문서에서는 기본적으로 문서에 포함된 공백, 탭 , 줄바꿈 등이 무시된다.
하지만 <pre> 태그를 사용할 경우 태그 내에 작성된 텍스트의 공백, 탭 줄 바꿈 등이 웹브라우저에 그대로 표현된다.
<!DOCTYPE html>
<html>
<head>
<title>단락을 나누는 p태그</title>
</head>
<body>
<pre>
pre 태그는 'preformatted text'의 약자이다.
문작 입력된 형식 그대로 유지하여 웹브라우저에 출력한다.
공백, 줄바꿈 등을 자유롭게 입력할 수 있다.
</pre>
</body>
</html><pre> 태그 내에 포함된 모든 텍스트는 고정폭(모든 글자의 폭이 동일한 글꼴)으로 자동 변환되며, 행의 길이가 웹브라우저의 폭보다 길어져도 자동으로 줄 바꿈 되지 않는다.
반응형
'WEB > HTML' 카테고리의 다른 글
| 6) HTML 텍스트 요소 - 글자 스타일(서식) (0) | 2021.07.19 |
|---|---|
| 5) HTML 텍스트 요소 - 특수문자 (0) | 2021.07.14 |
| 3) HTML 텍스트 요소 - 제목 (0) | 2021.07.07 |
| 2) HTML 텍스트 요소 - 주석 (0) | 2021.07.06 |
| 1) HTML 기초 (0) | 2021.07.05 |