[HTML+CSS] [텍스트 관련 태그] 01

[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기

[HTML+CSS] [HTML 기본 다지기] 04 - HTML 문서의 기본구조 [HTML+CSS] [HTML 기본 다지기] 03 - Tag(태그) 개념 및 사용시 주의해야 할 점 [HTML+CSS] [HTML 기본 다지기] 02 - Visual Studio Code 설치 및 확장..

onelight-stay.tistory.com

텍스트와 관련된 태그들 중에서도

텍스트를 작성하는데 자주 사용하는

덩어리로 묶어주는 태그에 대해 알아보자.

블록 레벨 태그

텍스트를 덩어리로 묶어주는 태그

<hn> - 제목 표시

<hn>은 제목은 뜻하는 'heading'의 'h'와

숫자(1~6)를 사용해 <h1>에서 <h6>까지 나타낼 수 있다.

<hn>을 사용할 경우 일반적인 텍스트보다 굵게 나타낼 수 있으며,

숫자가 커질수록 제목의 크기가 작아진다.

<p> - 단락

<p>는 단락을 뜻하는 'paragraph'의 'p'를 사용하며

사용할 경우에 앞 뒤에 줄 바꿈이 있는 텍스트 덩어리를 만들어 준다.

이때, <p>는 </p>를 만나기 전까지 줄 바꿈 없이 한 줄로 표시하며,

브라우저의 창의 너비가 글보다 좁을 경우에 자동으로 줄이 바뀐다.

<br> - 줄 바꿈

<br>은 ‘break’의 ‘br’을 따와서 만든 태그로

<p>를 사용할 경우에 줄바꿈 없이 한줄로 계속되는 텍스트를

줄 바꿈을,

줄을 바꿀 위치에 사용하면 줄이 자연스럽게 바뀐다.

<hr> - 수평 줄 삽입

<hr>은 ‘horizontal’의 ‘hr’을 따와서 만든 태그로

수평 줄을 삽일 할 때 사용한다.

여러 개의 텍스트를 단락으로 작성 중 텍스트의 주제가 바뀌거나

화제 전환을 위해 사용된다.

<blockquote> - 인용문 삽입

<blockquote>는 인용 블록이라는 뜻으로 주로 사이트의 글을 인용할 경우 사용한다.

해당 태그를 사용할 경우 기본 텍스트보다 들여써지므로 구별이 가능하다.

<pre> - 입력 그대로 화면 표시

<pre>는 ‘preformat’의 ‘pre’를 따와서 만든 태그로

HTML에서 텍스트에 많은 공백을 넣어도 한 개의 공백만 표시될 경우에

<pre>를 사용해 표시한 공백 그대로 브라우저에 나타나게 만들어주는 태그이다..

단, 해당 태그는 소리로 읽어주는 기계나 점자로 표시하는 기계가 그냥 건너뛰어 버리기 때문에

대체 텍스트로 바꿔주거나 유희해서 사용해 주는 것이 좋다.

<!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>텍스트를 덩어리로 묶어주는 태그</title>
</head>
<body>
    <h1>애 국 가</h1>
    <h3>애국가를 제창해 주시기 바랍니다.</h3>
    <hr>
    <h2>1절</h2>
    <p>
        동해물과 백두산이 마르고 닳도록<br>
        하느님이 보우하사 우리나라 만세<br>
        무궁화 삼천리 화려 강산<br>
        대한 사람 대한으로 길이 보전하세<br>
    </p>
    <h2>2절</h2>
    <p>
        남산 위에 저 소나무 철갑을 두른 듯<br>
        바람 서리 불변함은 우리 기상일세<br>
        무궁화 삼천리 화려 강산<br>
        대한 사람 대한으로 길이 보전하세<br>
    </p>
    <h2>3절</h2>
    <p>
        가을 하늘 공활한데 높고 구름 없이<br>
        밝은 달은 우리 가슴 일편단심일세<br>
        무궁화 삼천리 화려 강산<br>
        대한 사람 대한으로 길이 보전하세<br>
    </p>
    <h2>4절</h2>
    <p>
        이 기상과 이 맘으로 충성을 다하여<br>
        괴로우나 즐거우나 나라 사랑하세<br>
        무궁화 삼천리 화려 강산<br>
        대한 사람 대한으로 길이 보전하세<br>
        <br>
    </p>
    <blockquote>작사 미상 / 작곡 안익태</blockquote>
    <br>
    <br>
    <h1>소스코드</h1>
    <h3>사용된 소스코드를 확인해 보자.</h3>
    <hr>
    <pre>
        &lt;h1&gt;애 국 가&lt;/h1&gt;
        &lt;h3&gt;애국가를 제창해 주시기 바랍니다.&lt;/h3&gt;
        &lt;hr&gt;
        &lt;h2&gt;1절&lt;/h2&gt;
        &lt;p&gt;
            동해물과 백두산이 마르고 닳도록&lt;br&gt;
            하느님이 보우하사 우리나라 만세&lt;br&gt;
            무궁화 삼천리 화려 강산&lt;br&gt;
            대한 사람 대한으로 길이 보전하세&lt;br&gt;
        &lt;/p&gt;
        &lt;h2&gt;2절&lt;/h2&gt;
        &lt;p&gt;
            남산 위에 저 소나무 철갑을 두른 듯&lt;br&gt;
            바람 서리 불변함은 우리 기상일세&lt;br&gt;
            무궁화 삼천리 화려 강산&lt;br&gt;
            대한 사람 대한으로 길이 보전하세&lt;br&gt;
        &lt;/p&gt;
        &lt;h2&gt;3절&lt;/h2&gt;
        &lt;p&gt;
            가을 하늘 공활한데 높고 구름 없이&lt;br&gt;
            밝은 달은 우리 가슴 일편단심일세&lt;br&gt;
            무궁화 삼천리 화려 강산&lt;br&gt;
            대한 사람 대한으로 길이 보전하세&lt;br&gt;
        &lt;/p&gt;
        &lt;h2&gt;4절&lt;/h2&gt;
        &lt;p&gt;
            이 기상과 이 맘으로 충성을 다하여&lt;br&gt;
            괴로우나 즐거우나 나라 사랑하세&lt;br&gt;
            무궁화 삼천리 화려 강산&lt;br&gt;
            대한 사람 대한으로 길이 보전하세&lt;br&gt;
        &lt;br&gt;
        &lt;/p&gt;
        &lt;blockquote&gt;작사 미상 / 작곡 안익태&lt;/blockquote&gt;
    </pre>

</body>
</html>

블록 레벨 태그를 이용하여 html 파일을 만들어 보았다.

코드와 결과물을 비교하고 오늘 배운 내용을 익히도록 하자.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그 (0)	2020.06.09
[HTML+CSS] [텍스트 관련 태그] 02 - 인라인 레벨 태그 (0)	2020.06.08
[HTML+CSS] [HTML 기본 다지기] 05 - 엔티티 기호 사용하기 (0)	2020.06.06
[HTML+CSS] [HTML 기본 다지기] 04 - HTML 문서의 기본구조 (0)	2020.06.05
[HTML+CSS] [HTML 기본 다지기] 03 - Tag(태그) 개념 및 사용시 주의해야 할 점 (0)	2020.06.04

IT Information Notebook

[HTML+CSS] [텍스트 관련 태그] 01 - 블록 레벨 태그

블록 레벨 태그

<hn> - 제목 표시

<p> - 단락

<br> - 줄 바꿈

<hr> - 수평 줄 삽입

<blockquote> - 인용문 삽입

<pre> - 입력 그대로 화면 표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS] [텍스트 관련 태그] 01 - 블록 레벨 태그

블록 레벨 태그

<hn> - 제목 표시

<p> - 단락

<br> - 줄 바꿈

<hr> - 수평 줄 삽입

<blockquote> - 인용문 삽입

<pre> - 입력 그대로 화면 표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바