제목과 본문 태그 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 제목과 본문 태그
    learn
    Practice
    learn
    04 제목, 내용 관련 태그
    제목과 본문 태그

    전 강의에 이어 <body> 안에서 사용할 수 있는 태그를 좀 더 살펴보겠습니다. 이번 강의에서는 제목 또는 본문을 구분 짓는 태그들을 중점적으로 살펴봅니다.


    제목 태그


    제목 태그(Heading tag)는 제목을 나타내고 싶을 때 사용합니다. 중요도에 따라 <h1>부터 <h6>까지 사용할 수 있으며, <h1>부터 차례대로 중요도가 감소합니다. 일반적으로 사용자가 보는 컨텐츠의 대제목이 <h1>에 해당하고, 소제목 혹은 부제목이 <h2>나 <h3>에 해당합니다. 아래의 코드를 오른쪽 실습 창에서 작성한 뒤 실행 버튼을 클릭해 그 차이를 살펴봅시다.

    위 예시를 실행하면 제목 태그로 감싸는 것만으로도 다른 태그로 감싼 글씨와 다르게 보이는 것을 알 수 있습니다. 이는 브라우저에 이미 지정한 스타일(CSS)이 있기 때문입니다.


    본문 태그


    제목이 있다면 내용도 추가해줘야겠죠? 본문에 해당하는 태그는 다양하지만 주로 사용하는 것은 다음과 같습니다.

    • <p>
    • <div>
    • <pre>
    • <br>

    지금부터 4개의 태그에 대해 예시와 살펴보겠습니다.


    본문 태그: <p> 태그


    <p> 태그는 paragraphs의 약자로, 단락 혹은 문단이라는 뜻을 가집니다. 여기서 단락이란 글을 내용상 끊어 구분한 하나의 토막을 가리킵니다. 서로 이어지는 내용이라 생각하는 텍스트를 하나로 묶어 <p>로 감싸면 단락으로 처리됩니다. 아래 코드를 실습 창에 이어 작성해봅시다.


    본문 태그: <br> 태그


    <br> 태그는 break의 약자로, 앤터와 동일한 역할, 즉 줄 바꿈을 수행합니다. <p> 태그를 설명할 때 사용한 예시 코드와 <br>을 적용한 코드를 비교해보겠습니다. 실습 창에 다음 코드를 덧붙여 작성해봅시다.

    <br> 태그가 적용되지 않은 <p> 태그는 내부에서 엔터를 입력해도 줄 바꿈이 적용되지 않고 일렬로 출력됩니다. 하지만 <br>을 두 문장 사이에 입력하면 줄 바꿈이 적용되어 출력되는 것을 확인할 수 있습니다.

    여기서 한 가지 이상한 점이 있습니다. 이전까지 배운 태그는 모두 시작 태그와 종료 태그가 반드시 존재했습니다. 하지만 <br>의 경우 종료 태그를 쓰지 않아도 올바르게 인식하고 작동합니다. <br>태그와 같이 종료 태그를 쓰지 않는 요소를 빈 요소(Empty element)라고 부릅니다. 종료 태그가 없기 때문에 컨텐츠가 비어 있고, 태그 사이가 비어 있기 때문에 이를 빈 요소라고 하는 겁니다. <br> 태그 외에도 나중에 배우게 될 <img> 태그 역시 빈 요소입니다.


    본문 태그: <pre> 태그


    <br> 태그 이외에 줄 바꿈을 할 수 있는 태그가 또 있습니다. 바로 <pre> 태그입니다. <pre>는 preformatted의 약자로, 형식화된 텍스트를 브라우저에 그대로 표시합니다. 즉, 적은 내용 그대로 브라우저에 표시합니다. 아래 예시를 실습 창에 작성한 뒤 실행 버튼을 클릭해 <p> 태그 결과, <br> 태그 결과와 함께 비교해봅시다.

    Practice
    이론에서 살펴본 코드를 직접 작성하여 결과를 확인한 뒤, 구성 요소를 변경하며 어떤 변화가 일어나는지 확인해봅시다.
    learn
    Practice
    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)