(HTML코딩일기) 자주 쓰는 텍스트 태그

1. 제목 태그 <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년대: 대격변
  - 유명한 한국 감독
    - 박찬욱
    - 봉준호
    - 임권택  
    - 김기덕
    - 김기영
    - 최동훈

2. 본문 <p>

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

<h1>한국 영화</h1>

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

위 HTML 코드에 담겨 있는 정보의 구조를 그려보면 아래와 같습니다.

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

 

3. 줄바꿈 <br>

제목이나 본문 같은 데서 줄을 바꿀 때 사용하는 태그입니다. 줄 바꿈이 없으면 보통 한문단으로 이어서 보여주고 아래와 같이 <br>을 붙이면 줄 바꿈이 됩니다.

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

 

4. 중요 <strong>

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

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

5. 강조 <em>

글자를 조금 다른 모양으로 바꾸어서 강조를 합니다. 크롬 브라우저에서는 <em> 태그의 기본 디자인을 기울어진 글씨로 보여눈데, 영어권에서 강조할 때 주로 사용하는 표시입니다.

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

6. 취소 <s>

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

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

7. 인용 <blockquate>, <q>

다른 곳에서 가져온 내용을 긴 글로 인용할 때는 blockquate를 씁니다.

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

글 안에서 짧게 인용할 때는 <q>를 쓰면 됩니다. 크롬 브라우저에서는 기본적으로 <q> 태그를 따옴표로 감싸는 디자인으로 보여줍니다.

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

8. 위 첨자, 아래 첨자

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

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

9. 주제 전환 (Thematic Break)

HTML 에서 글에서 주제를 전환할 때 쓰는 태그입니다. 브라우저에서는 가로 선을 그어서 보여줍니다. 

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

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

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

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

 

11. 코드 <code>

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

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