ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • HTML - <p>태그 / <br>태그
    HTML/HTML 2020. 2. 26. 17:47

    오늘은 <p> ~ </p> 태그와 <br> 태그에 대해서 알아보자!

    [예제]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다.
        저분은 백 법학박사이고, 이분은 박 법학박사이다.
        작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다.
    </body>
    </html>

    우선, 문장이 저렇게 3개의 문장이 주어졌다.

    하지만, 3개의 문장이 단락이 구분되는 것이 아니라 한 줄로 출력되는 것을 확인할 수 있다.

    그렇다면 이 3개의 문장을 가지고 단락을 구분하고 싶다면 <p> 태그를 사용하면 가능하다.

    [예제]

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <p>간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다.</p>
        <p>저분은 백 법학박사이고, 이분은 박 법학박사이다.</p>
        <p>작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다.</p>
    </body>
    </html>

     

    결과는 이렇게 단락이 구분되어 깔끔하게 3개의 문장이 나뉘어서 출력이 되는 것을 확인할 수 있다.

    그렇다고 단락을 나눌 때 꼭 p태그만을 이용하는 것은 아니다.


    우리는 <br> 태그를 통해 단락을 구별할 수 있다.

    <br> 태그는 생각하면 된다.

    <br> 태그는 'void element'라고 해서 내용이 없는 태그를 의미한다.
    그렇기 때문에 닫는 태그 없이 열리는 태그 하나만 있어도 된다.
    <a> abcdefg </a>처럼 <a> 태그는 어디서부터 어디까지 인지를 지정해줘야 하는 태그인데, 이런 태그와는 다르다.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        간장 공장 공장장은 강 공장장이고, 된장 공장 공장장은 공 공장장이다.<br><br>
        저분은 백 법학박사이고, 이분은 박 법학박사이다.<br><br>
        작년에 온 솥장수는 새 솥장수이고 금년에 온 솥장수는 헌 솥장수이다.<br><br>
    </body>
    </html>

    <br> 태그의 개수는 사용자가 마음대로 쓸 수 있다.

    이처럼 p태그와 같이 단락을 구분할 수 있게 되었다.

    하지만 단락만을 구분하고 싶다면 <p> 태그를 쓰는 것을 권장한다.

    'HTML > HTML' 카테고리의 다른 글

    HTML - <table>태그  (0) 2020.03.02
    HTML - img태그  (0) 2020.02.29
    HTML - <ul> 태그 / <ol>태그  (0) 2020.02.25
    HTML - <a>태그와 속성  (0) 2020.02.24
    HTML - 기본문법  (0) 2020.02.23

    댓글

Designed by Tistory.