HTML에서 쓰는 다양한 태그들

텍스트 문서를 작성하는데 필요한 태그를 살펴보겠습니다.

 

마크업의 의미를 이해하자

어떤 태그가 있는지 아는 것도 중요하지만, 마크업의 의미를 잘 이해하고 넘어가는 게 더 중요합니다.

예를 들어서 제목 태그인 <h1>은 웹 브라우저에서 큰 글자로 두껍게 보입니다. 하지만 이런 겉모습이 제목 태그의 본질은 아닌데요. <h1> 태그의 본질은 현재 페이지에서 가장 큰 제목이라는 의미입니다.

 

제목 태그 <h1> ~ <h6>

문서의 제목을 나타내는 태그입니다. 조금 과장해서 예를 들어보자면 아래처럼 한국 영화에 대한 문서를 만들 수 있는데요.

<h1>한국 영화</h1>

<h2>한국 영화의 역사</h2>
<h3>1950년대: 침체기</h3>
<h3>1960년대: 황금기</h3>
<h3>1970년대: 쇠퇴기</h3>
<h3>1980년대: 암흑기</h3>
<h3>1990년대: 전환점</h3>
<h3>2000년대: 르네상스</h3>
<h3>2010년대: 최전성기</h3>
<h3>2020년대: 대격변</h3>

<h2>유명한 한국 감독</h2>
<h3>박찬욱</h3>
<h3>봉준호</h3>
<h3>임권택</h3>
<h3>김기덕</h3>
<h3>김기영</h3>
<h3>최동훈</h3>

위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래처럼 될 겁니다. 이런 식으로 문서에서 제목을 나누는 태그입니다.

- 한국 영화
  - 한국 영화의 역사
    - 1950년대: 침체기
    - 1960년대: 황금기
    - 1970년대: 쇠퇴기
    - 1980년대: 암흑기
    - 1990년대: 전환점
    - 2000년대: 르네상스
    - 2010년대: 최전성기
    - 2020년대: 대격변
  - 유명한 한국 감독
    - 박찬욱
    - 봉준호
    - 임권택
    - 김기덕
    - 김기영
    - 최동훈

 

본문 <p>

본문을 작성할 때 쓰는 태그입니다.

<h1>한국 영화</h1>

<h2>한국 영화의 역사</h2>
<h3>1950년대: 침체기</h3>
<p>
    1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
    하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
    점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
</p>
<h3>1960년대: 황금기</h3>
...

위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래처럼 되겠죠?

- 한국 영화
  - 한국 영화의 역사
    - 1950년대: 침체기
      - 1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
          하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어 ...
    - 1960년대: 황금기
    ...

 

줄바꿈 <br>

제목이나 본문 같은 데서 줄을 바꿀 때 사용하는 태그입니다. 줄 바꿈이 없으면 보통 아래처럼 한 문단으로 이어서 보여 주는데요.

<p>
    1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.
    하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
    점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
</p>

만약에 여기에 강제로 줄 바꿈을 하고 싶으면 <br> 태그를 씁니다.

<p>
    1950년대에는 한국전쟁이 일어나면서 영화계는 침체를 맞게 됩니다.<br>
    하지만 1950년대 중반을 지나서 그 사이 발전된 기술에 힘입어
    점점 많은 영화가 나오기 시작하더니 1950년대 후반에 들어서는 1년에 100편 가까이 제작되었습니다.
</p>

 

중요 <strong>

중요한 내용을 강조해서 표시할 때 사용하는 태그입니다.

<p>
    코드잇 영화관에서는 영화 상영 전 광고없이 정시에 상영을 시작합니다.
    정시에 입장하여 관람중인 관객들을 위해
    <strong>상영 시작 10분 후에는 입장이 제한됨을 알려드립니다.</strong>
</p>

크롬 브라우저에서는 기본적으로 <strong> 태그를 두꺼운 글씨로 보여줍니다. 여기서 주의할 점은 두꺼운 글씨를 쓰고 싶다고 이 태그를 쓰면 안 됩니다! 꾸미기 위해 두꺼운 글씨를 넣으려면 CSS로 두꺼운 글씨를 만들고, 의미상 강조의 의미가 있는 경우에만 <strong>을 사용하세요.

 

강조 <em>

글은 말하는 것과 달리 억양을 다르게 표현하기 힘들다는 단점이 있습니다. 그래서 전통적으로 책이나 잡지 같은데서는 글자를 조금 다른 모양으로 보여주거나 하는 식으로 억양을 표현하는데요. 일반적인 문장이지만 조금 다르게 읽어서 강조를 하곤 하죠. HTML에서도 <em> 이라는 태그를 사용해서 이런 내용의 강조를 나타낼 수 있습니다.

<p>
    제 이름은 윤 <em>여정</em>입니다. 요정도 아니고 유정도 아니고 여정이죠.
</p>

참고로 크롬 브라우저에서는 <em> 태그의 기본 디자인을 기울어진 글씨로 보여주는데요. 이건 영어권에서 강조할 때 주로 사용하는 표시입니다.

 

취소 <s>

어떤 내용을 적었다가 지우지 않고, 지웠다는 표시만 남기고 싶을 때가 있죠? 이렇게 어떤 내용이 취소, 제거되었다는 의미를 표현할 때 <s> 태그를 씁니다.

<p>
    <s>단체 관람을 원하시는 분들은 코드잇 홈페이지에서 예약해주세요.</s>
    <br>
    현재 코로나 방역으로 인해 극장 입장을 20인으로 제한하고 있어 단체 관람이 어렵습니다.
</p>

 

인용 <blockquote>, <q>

다른 곳에서 가져온 내용을 긴 글로 인용할 때는 아래처럼 쓰고요.

<blockquote>
    또 감사드릴 분이... 저는 경쟁을 싫어합니다. 제가 어떻게 글렌 클로즈를
    이기겠어요? 저는 그녀의 영화를 수없이 많이 봤습니다. 5명 후보가 모두 각자 다른
    영화에서의 수상자입니다. 우리는 각자 다른 역을 연기했잖아요. 우리끼리 경쟁할
    순 없습니다. 오늘 제가 여기에 있는 것은 단지 조금 더 운이 좋았을 뿐이죠.
    여러분보다 조금 더 운이 좋았네요. 그리고 아마도 미국인들이 한국 배우를
    대접하는 방법일 수도 있죠. 아무튼 감사합니다.
    <br>
    - 윤여정, 오스카 수상소감 중에서
</blockquote>

글 안에서 짧게 인용할 때는 <q> 를 쓰면 됩니다.

<p>
    윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
    <q>
        저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
        아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.
    </q>
    수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
</p>

참고로 크롬 브라우저에서는 기본적으로 <q> 태그를 따옴표로 감싸는 디자인으로 보여줍니다.

 

위 첨자, 아래 첨자

약간 작은 크기의 글자를 위나 아래에 붙여서 쓰는 걸 위 첨자, 아래 첨자라고 합니다. 아래 예시에서는 원소의 개수를 나타내는 화학 기호에 아래 첨자를, 제곱 연산을 나타낸 수학 기호에는 위 첨자를 써 주었습니다.

<p>
    물의 화학식은 H<sub>2</sub>O이고, 3의 제곱(3<sup>2</sup>)은 9이다.
</p>

 

주제 전환(Thematic Break)

과거에는 가로 선(Horizontal Line)이라고 불러서 <hr> 라고 쓰지만, 최근 HTML에서는 글에서 주제를 전환할 때 쓰는 태그입니다. 브라우저에서는 기본적으로 가로 선을 그어서 보여줍니다. 아래 예시 코드에서는 본문 내용 부분과 참고 자료들을 정리한 각주 부분을 <hr> 태그를 써서 구분해 주었습니다.

<p>
    윤여정은 오스카에서 김기영 감독에 대한 애정을 표시하기도 했습니다.
    <q>
        저는 이 상을 저의 첫 번째 감독님, 김기영에게 바치고 싶습니다.
        아주 천재적인 분이셨고 제 데뷔작을 함께 했습니다.<sup>[1]</sup>
    </q>
    수상 소감의 마지막을 그녀가 존경하는 한국의 천재 감독을 언급한 것이죠.
</p>
<hr>
<p>
    [1] "윤여정, 오스카 최고의 수상소감"…미국 '들썩', KBS뉴스 2021.04.27.
</p>

 

미리 서식이 정해진 텍스트 <pre>

본문 태그인 <p> 처럼 글을 이어서 보여주는 게 아니라, HTML에 적혀있는 그대로 보여주는 태그입니다. 보통 코드 같은 걸 쓸 때 많이 사용합니다.

<p>body 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
    body {
        background-color: #000000;
        color: #ffffff;
    }
</pre>

 

코드 <code>

글 안에서 짧은 코드를 작성할 때 씁니다.

<p><code>body</code> 태그의 배경색과 글자색을 바꾸는 CSS 코드입니다.</p>
<pre>
    body {
        background-color: #000000;
        color: #ffffff;
    }
</pre>