Development/HTML

[HTML] 본문태그 (p, pre, q, br, hr)

MUMYEONG IMDA 2022. 3. 9. 15:44
반응형
본문(main text)태그 

1) p 

  • 단락 (Paragraphs) 즉, 하나의 문단을 지정한다.
  • 줄바꿈 없이 브라우저에 표시된다.

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MainText</title>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
</body>

</html>

 

결과

 

2) pre 

  • 태그 내의 작성된 내용은 그대로 브라우저에 표시된다.

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MainText</title>
</head>

<body>
    <pre>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </pre>
</body>

</html>

 

결과

 

3) q

    • 짧은 인용문을 지정할때 사용한다.
    • 브라우저는 앞뒤에 큰따옴표("")로 내용을 감싸서 표시된다.

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MainText</title>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. <q>Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.</q>
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
</body>

</html>

 

결과

 

4) br

    • 텍스트 내의 줄바꿈을 지정할때 사용한다.
    • 빈 요소(empty element)로 닫는태그가 없다.

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MainText</title>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.<br>
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
</body>

</html>

 

결과

 

5) hr

  • 내용을 구분하기 위해 수평선을 지정할때 사용한다.

코드

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MainText</title>
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
    <hr>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
    <hr>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.Incidunt odio
        deleniti doloremque nobis nesciunt provident harum eum aliquid a quibusdam.
        Amet, cupiditate magnam maxime id optio tempore sequi animi error?
    </p>
</body>

</html>

 

결과

반응형
LIST