4) HTML 텍스트 요소 - 단락

2021. 7. 10. 00:44WEB/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