16. HTML의 목록

소개

목록은 연관된 정보들이 서로간에 명확하게 연결되도록, 또한 읽기 쉽도록 하나로 묶는 역할을 합니다. 최근의 웹 개발에서 목록은 내비게이션을 비롯하여 일반적인 컨텐츠에도 매우 다양하게 사용됩니다.

목록은 구조적 관점에서 유용합니다. 잘 구조화되고, 접근하기 쉽고, 관리하기 쉬운 문서를 만드는데 도움을 주기 때문입니다. 또한 이것은 순수하게 실용적인 면에서도 유용한데, CSS 스타일을 적용할 수 있는 추가적인 요소를 제공하므로 매우 다양하게 스타일을 적용할 수 있기 때문입니다. (CSS에 관해서는 이 시리즈의 이후에서 다룰 것입니다. 목록과 링크에 스타일을 주는 법 을 먼저 읽어보고, 차례 를 확인해서 CSS를 다루는 글 들을 읽어보기 바랍니다)

이 글에서는, HTML에 있는 목록의 종류를 다룹니다. 언제, 어떻게 그런 것들을 사용하는 지 살펴본 후, 몇가지 현실적인 예제들을 제공할 것입니다. 차례는 다음과 같습니다(이것도 목록입니다!)

  • 목록의 세가지 종류
    • 순서 없는 목록
      • 순서 없는 목록의 마크업
    • 순서 있는 목록
      • 순서 있는 목록의 마크업
      • 순서 있는 목록을 1 이외의 숫자로 시작하기
    • 정의 목록
  • 목록 종류 선택
  • HTML 목록과 텍스트의 차이점
  • 목록의 중첩
  • 단계별 예제
    • 메인 페이지 마크업
    • 요리법 페이지
    • 요리법 페이지 마크업
  • 요약
  • 더 읽어볼 것
  • 연습문제

목록의 세가지 종류

HTML 에는 세가지 종류의 목록이 있습니다:

  • 순서 없는 목록 – 서로 연관된 아이템들을 특정한 순서 없이 묶습니다.
  • 순서 없는 목록 – 서로 연관된 아이템들을 특정한 순서에 따라 묶습니다.
  • 정의 목록 – 개념/정의, 시간/이벤트 와 같이 이름/값 쌍을 보여주는데 사용합니다.

각각의 것들은 특별한 목적과 의미를 갖습니다. 이러한 것들을 서로 바꿔서 쓸 수는 없습니다!

순서 없는 목록

순서 없는 목록 – 혹은 불릿 있는 목록이라고도 하는 – 은 어떤 순서로도 배열할 수 있는 것들을 나타내기 위해 사용합니다. 예를 든다면 구입 목록입니다:

  • 우유
  • 버터
  • 커피

이러한 아이템들은 목록의 일부분입니다만, 다른 순서로 써도 되며 여전히 말이 됩니다:

  • 커피
  • 우유
  • 버터

CSS 를 이용해서 몇가지 스타일의 불릿 중 하나를 선택할 수도 있고, 이미지를 사용할 수도 있으며, 불릿을 아예 쓰지 않을 수도 있습니다 – 목록과 링크에 스타일을 주는 법 에서 방법을 살펴 볼 것입니다.

순서 없는 목록의 마크업

순서 없는 목록은 <ul></ul> 태그로 <li></li>을 둘러싸서 표현합니다.

<ul>
  <li>빵</li>
  <li>커피</li>
  <li>우유</li>
  <li>버터</li>
</ul>

순서 있는 목록

순서 있는 목록 – 숫자 붙인 목록이라고도 하는 – 은 특정한 순서로 나열되어야 하는 아이템의 목록을 나타내기 위해 사용합니다. 한가지 예로는 조리법이 있을 수 있습니다. 조리법은 순서대로 따라 해야 하니까요.

  1. 재료를 모읍니다.
  2. 재료를 섞습니다.
  3. 조리 접시에 재료를 놓습니다.
  4. 오븐에서 한시간동안 조리합니다.
  5. 오븐에서 꺼냅니다.
  6. 10분간 기다립니다.
  7. 접대합니다.

이러한 아이템들을 다른 순서로 배열했다면, 정보는 더이상 말이 되지 않을 것입니다:

  1. 재료를 모읍니다.
  2. 오븐에서 한시간동안 조리합니다.
  3. 오븐에서 꺼냅니다.
  4. 접대합니다.
  5. 조리 접시에 재료를 놓습니다.
  6. 10분간 기다립니다.
  7. 재료를 섞습니다.

순서 있는 목록은 몇가지 숫자, 혹은 알파벳 순서로 나타내어집니다. 대부분의 브라우저에서 기본값은 숫자이지만, 다른 옵션들도 있습니다:

  • 글자
    • 아스키 소문자 (a, b, c…)
    • 아스키 대문자 (A, B, C…)
    • 고대 그리스 소문자 (έ, ή, ί…)
  • 숫자
    • 십진수 숫자 (1, 2, 3…)
    • 0으로 시작하는 십진수 숫자 (01, 02, 03…)
    • 로마 숫자 소문자 (i, ii, iii…)
    • 로마 숫자 대문자 (I, II, III…)
    • Traditional Georgian numbering (an, ban, gan…)
    • Traditional Armenian numbering (mek, yerku, yerek…)

다시한번 말하지만, CSS를 이용해서 목록의 스타일을 바꿀 수 있습니다.

순서 있는 목록의 마크업

순서 있는 목록은 <ol></ol> 태그로 <li></li>을 감싸서 나타냅니다:

<ol>
  <li>재료를 모읍니다.</li>
  <li>재료를 섞습니다.</li>
  <li>조리 접시에 재료를 놓습니다.</li>
  <li>오븐에서 한시간동안 조리합니다.</li>
  <li>오븐에서 꺼냅니다.</li>
  <li>10분간 기다립니다.</li>
  <li>접대합니다.</li>
</ol>

1이 아닌 숫자로 순서 있는 목록을 시작하는 방법

순서 있는 목록을 1(또는 i, I 등)이 아닌 숫자로 시작하게 할 수 있습니다. start 속성을 통해 가능한데, 그 값으로 숫자를 사용하면 됩니다. CSS 속성 list-style-type 를 통해 로마 숫자나 알파벳으로 바꾸었다고 하더라도 정확하게 표현됩니다. 이러한 것은 목록 사이사이에 일종의 참고라든가 기타 연관된 정보들을 삽입하고 싶을 때에 유용합니다. 앞의 예를 다시 보겠습니다.

<ol>
  <li>재료를 모읍니다.</li>
  <li>재료를 섞습니다.</li>
  <li>조리 접시에 재료를 놓습니다.</li>
</ol>

조리 접시에 재료를 놓기 전에 먼저 오븐을 섭씨 180도/화씨 350도로 예열해야 합니다.

<ol start="4">
  <li>오븐에서 한시간동안 조리합니다.</li>
  <li>오븐에서 꺼냅니다.</li>
  <li>10분간 기다립니다.</li>
  <li>접대합니다.</li>
</ol>

결과는 다음과 같을 것입니다.

  1. 재료를 모읍니다.
  2. 재료를 섞습니다.
  3. 조리 접시에 재료를 놓습니다.

 

조리 접시에 재료를 놓기 전에 먼저 오븐을 섭씨 180도/화씨 350도로 예열해야 합니다.

 

 

  1. 오븐에서 한시간동안 조리합니다.
  2. 오븐에서 꺼냅니다.
  3. 10분간 기다립니다.
  4. 접대합니다.

 

이 속성(start)은 가장 최근의 HTML 명세에서는 폐기된 것입니다. 즉 strcict DTD를 사용할 경우, 이 속성을 사용하면 유효성 검사를 통과할 수 없게 됩니다. 좀 이상하게 들릴 것입니다. 이 속성은 이치에도 맞는 것 같고, 이것을 대체할 수 있는 CSS도 없습니다. 이러한 것은 항상 HTML의 유효성을 검사하는 것이 이상적인 목표이지만, 항상 절대적으로 지킬 수는 없다는 것을 보여줍니다. 이 속성은 HTML5 명세에서는 더이상 폐기된 속성이 아닙니다. 이러한 기능을 HTML4 strict 페이지에서 필요로 하고, 반드시 유효성 검사를 통과해야만 한다면, 이것 대신 CSS 카운터 를 사용할 수 있습니다.

 

정의 목록

정의 목록은 특정한 아이템과 그 정의를 연결합니다. 예를 들어, 장바구니 목록에 넣은 물건들에 정의를 추가하고자 한다면, 이렇게 할 수 있을 것입니다:

 

우유
흰색의 액상 낙농 생산품
밀가루나 보리가루로 만든 구운 음식
버터
노랗고 단단한 낙농 생산품
커피
커피 나무의 과일의 씨앗

각각의 정의와 단어는 정의 그룹(혹은 이름-값 그룹)입니다. 원하는 만큼의 정의 그룹을 가질 수 있지만, 최소한 하나의 단어와 하나의 정의가 매 그룹마다 있어야 합니다. 정의 없는 단어, 또는 단어 없는 정의는 사용할 수 없습니다.

여러개의 단어에 하나의 정의를 연결할 수도 있고, 그 반대로 할 수도 있습니다. 예를 들어, “커피” 라는 단어는 여러가지 의미를 가질 수 있고, 그러한 것을 나열할 수 있습니다:

 

커피
커피 콩을 구워서 갈아 낸 것으로 만든 음료
한 컵의 커피
커피를 마시는 모임
어두운 갈색

반대로, 여러개의 단어가 하나의 정의로 설명될 수도 있습니다. 이러한 것은 유의어 등을 나타내는 것에 유용합니다.

 

소다
거품이 있는 음료
콜라
단 맛이 나는 탄산음료

정의 목록은 다른 목록과는 다릅니다. 목록 아이템 들 대신 정의하는 단어와 정의하는 설명을 가진다는 점에서 그렇습니다.

따라서, 정의 목록은 <dl></dl> 요소로 <dt></dt> 와<dd></dd>태그를 감싸서 나타냅니다. 최소한 하나 이상의 <dt></dt>가 있어야 하며 <dd></dd>도 최소한 하나 이상 있어야 합니다. 또한 목록 내부에서는 항상 <dt></dt>가 처음에 나타나야 합니다.

하나의 단어와 하나의 정의로 이루어진 단순한 정의 목록은 다음과 같이 보일 것입니다:

<dl>
  <dt>단어</dt>
  <dd>그 단어의 정의</dd>
  <dt>단어</dt>
  <dd>그 단어의 정의</dd>
  <dt>단어</dt>
  <dd>그 단어의 정의</dd>
</dl>

이것은 다음과 같이 표현될 것입니다:

 

단어
그 단어의 정의
단어
그 단어의 정의
단어
그 단어의 정의

이 예제에서는, 하나의 단어에 여러개의 정의를 연결하기도 했고, 그 반대도 있습니다:

<dl>
  <dt>단어</dt>
  <dd>그 단어의 정의</dd>
  <dt>단어</dt>
  <dt>단어</dt>
  <dd>앞의 두 단어 모두에 적용되는 정의</dd>
  <dt>다음의 두 정의을 모두 가질 수 있는 단어</dt>
  <dd>그 단어에 대한 한가지 정의</dd>
  <dd>그 단어에 대한 또 다른 정의</dd>
</dl>

이것은 다음과 같이 표현될 것입니다:

 

단어
그 단어의 정의
단어
단어
앞의 두 단어 모두에 적용되는 정의
다음의 두 정의를 모두 가질 수 있는 단어
그 단어에 대한 한가지 정의
그 단어에 대한 또 다른 정의

일반적으로 여러개의 단어가 하나의 정의를 갖는 경우는 드물지만, 그런 경우가 있을 경우 이렇게 사용할 수 있다는 것을 알아두면 유용할 것입니다.

목록 종류 중에서 선택하는 방법

어떤 종류의 목록을 사용할 지 선택해야 한다면, 두가지 단순한 질문을 통해 결정할 수 있습니다:

  1. 단어를 정의하고 있나? 혹은 이름/값 쌍을 연결하고 있나?
    • 그렇다면, 정의 목록을 쓴다.
    • 아니라면, 정의 목록을 쓰지 않고 다음의 질문으로 넘어간다.
  2. 목록의 순서가 중요한가?
    • 그렇다면, 순서 있는 목록을 쓴다.
    • 아니라면, 순서 없는 목록을 쓴다.

HTML 목록과 텍스트의 차이점

HTML 목록과, 그저 불릿이나 숫자가 매겨진 텍스트와의 차이점에 대해 궁금해할지도 모르겠습니다. HTML 목록을 사용하게 되면 몇가지 장점이 있습니다:

  • 순서 있는 목록에서 그 순서를 바꾸어야 할 필요가 생긴다면, HTML에서는 단순히 그것을 위로 올리면 됩니다. 텍스트를 직접 작성했다면, 순서를 바꿨을 경우 그 숫자 역시 전부 손으로 고쳐서 써야 합니다. 이것은 아무리 좋게 말해도 귀찮은 작업입니다.
  • HTML 목록을 사용하게 되면 목록에 정상적으로 스타일을 부여할 수 있습니다. 텍스트 덩어리를 사용했다면, 각각의 아이템들을 유용한 방법으로 스타일링하기는 어려웠을 것입니다. 사용된 것이 다른 텍스트와 마찬가지일테니 말입니다.
  • HTML 목록을 사용하면 “목록처럼 보이는” 효과에 더해, 내용에 적합한 의미 구조를 부여할 수 있습니다. 이러한 것은 스크린 리더 사용자에게 중요한 혜택을 주는데, 숫자와 텍스트가 뒤섞인 혼란스러운 덩어리를 읽는 것이 아니라 목록을 읽고 있다는 것을 확실히 하기 때문입니다.

다른 말로: 텍스트와 목록은 서로 다른 것입니다. 목록 대신에 텍스트를 사용하면 당신은 할 일이 더 많아지고, 당신이 작성한 문서를 읽는 사람들에게는 문제를 발생시키게 됩니다. 따라서 문서에 목록이 필요하다면, 정확한 HTML 목록을 사용해야 합니다.

목록의 중첩

목록 아이템은 다른 목록을 포함할 수 있습니다. 이러한 것을 보통 “중첩된” 목록 이라고 합니다. 중첩된 목록은 예를 들면 이 글의 맨 처음에 있었던 차례 같은 것을 표현하는데 유용합니다.

  1. 제 1장
    1. 제 1절
    2. 제 2절
    3. 제 3절
  2. 제 2장
  3. 제 3장

목록을 중첩할 때의 핵심은, 포함된 목록은 하나의 특정한 목록 아이템과 연관되어야 한다는 것입니다. 이러한 것을 마크업에 반영한다면, 포함된 목록은 그 목록 아이템 내부로 들어가게 됩니다. 위의 것을 마크업한 코드는 아래와 같을 것입니다:

<ol>
  <strong><li></strong>제 1장
    <ol>
      <li>제 1절</li>
      <li>제 2절</li>
      <li>제 3절</li>
    </ol>
  <strong></li></strong>
  <li>제 2장</li>
  <li>제 3장</li>
</ol>

포함된 목록이 <li>와, 거기에 포함된 목록 아이템의 텍스트(“제 1장”) 다음에 시작한 후, 포함된 목록 아이템을 끝내는 </li>앞에서 끝나는 것을 눈여겨 보십시오, 중첩된 목록은 종종 웹사이트 내비게이션 메뉴의 기초가 되는데, 그러한 것이 웹사이트의 구조를 정의하는 좋은 방법이기 때문입니다.

이론적으로는 얼마든지 많은 목록들을 중첩시킬 수 있지만, 현실적으로는 너무 깊이 들어가게 되면 매우 혼란스러울 것입니다. 아주 큰 목록의 경우라면, 헤딩을 주어서 별도의 목록으로 분리하거나, 또는 별도의 페이지로 분리하는 것이 좋을 수 있습니다.

단계별 예제

이제 모든 것을 종합하는 단계별 예제를 따라 해 봅시다. 다음의 상황을 가정해 보십시오:

HTML 요리 학원을 위해 조그마한 웹사이트를 만들려고 합니다. 메인 페이지에 사용할 분류된 레시피들의 목록을 만들어야 하며, 각각의 것들은 레시피 페이지로 링크되어야 합니다. 각각의 레시피 페이지들은 필요한 재료, 재료에 대한 노트, 그리고 준비 방법들이 수록되어 있습니다. 세개의 분류는 각각 케잌(“스펀지 케잌”, “쵸콜릿 케잌”, “사과 차 케잌” 이 포함됩니다), 비스킷(“ANZAC 비스킷”, “잼 드랍”, “Melting Moments” 가 포함됩니다), 즉석 빵(“댐퍼”, “스콘” 이 포함됩니다) 입니다. 클라이언트는 분류의 순서나 레시피의 순서에는 신경을 쓰지 않을 것입니다. 클라이언트가 바라는 것은 단순히 어떤것이 분류이며 어떤것이 레시피인지 구분할 수 있도록 하라는 것입니다.

그럼 이제 사이트를 만들어 보겠습니다.

메인 페이지 마크업

  1. 틀이 잘 잡힌 HTML 페이지를 만듭니다. 독타입, html, head, body 요소들을 넣고, 이것을 stepbystep-main.html 라는 이름으로 저장합니다. 주된 제목(h1)으로 “HTML 요리 학원”, 그리고 부제목(h2)으로 “레시피” 를 사용합니다:
    <h1>HTML Cooking School</h1><br />
    <h2>Recipes</h2>
  2. 레시피를 세가지로 분류해야 하며, 이 순서는 중요하지 않으므로, 순서 없는 목록이 적합합니다. 따라서 다음과 같이 마크업합니다:
    <h2>Recipes</h2>
      <ul>
      <li>케잌</li>
      <li>비스킷</li>
      <li>즉석 빵</li>
    </ul>

    li 요소들을 들여쓰기 하면 코드를 읽기가 좀 더 쉬워지지만, 꼭 필요한 것은 아닙니다.

  3. 이제 레시피를 추가해야 합니다. 예를 들어 “스펀지 케잌”, “쵸콜릿 케잌”, “사과 차 케잌” 같은 것은 모두 “케잌” 분류의 일부분입니다. 이렇게 하려면, 각각의 분류에 목록을 추가해야 합니다. 이것 또한 순서가 중요하지 않으므로, 순서 없는 목록이 적절합니다. 간단하게 하기 위해, 모든 레시피들을 하나의 레시피 페이지에 넣을 것입니다. (18번 글에서 HTML 링크들을 더 깊이 다루고 있습니다. 링크에 대해 더 읽고 싶다면 그것을 참고하십시오)
    <h2>레시피</h2>
    <ul>
      <li>케잌
        <ul>
          <li><a href="stepbystep-recipe.html">스펀지 케잌</a></li>
          <li><a href="stepbystep-recipe.html">쵸콜릿 케잌</a></li>
          <li><a href="stepbystep-recipe.html">사과 차 케잌</a></li>
        </ul>
      </li>
      <li>Biscuits
        <ul>
          <li><a href="stepbystep-recipe.html">ANZAC 비스킷</a></li>
          <li><a href="stepbystep-recipe.html">잼 드롭</a></li>
          <li><a href="stepbystep-recipe.html">Melting Moments</a></li>
        </ul>
      </li>
      <li>빵/quickbreads
        <ul>
          <li><a href="stepbystep-recipe.html">댐퍼</a></li>
          <li><a href="stepbystep-recipe.html">스콘</a></li>
        </ul>
      </li>
    </ul>

최종적인 결과는 그림 1 처럼 보일 것입니다:

그림 1. 완성된 메인 페이지

여기에서 완성된 메인 페이지 를 볼 수 있습니다.

레시피 페이지

예제이므로, 스폰지 케잌 레시피 페이지만 만들 것입니다. 이것을 템플릿 삼아서 자신만의 것을 만들어 볼 수 있습니다. HTML 요리 학원에서는 당신에게 스펀지 케잌 레시피를 텍스트 파일로 제공했는데, 이런 모양입니다:

간단한 스펀지 케잌
재료
계란 3개
설탕 100그램
발효 밀가루 85그램</code>

<code>
재료 노트:
  설탕 - 정백당
  발효 밀가루 - 밀가루와 소금, 베이킹 파우더를 미리 섞어둔 것</code>

<code>조리법
  1. 오븐을 섭씨 190도로 예열.
  2. 20cm 케잌 팬에 기름을 두른다.
  3. 중간 크기 보울에서 계란과 설탕을 거품이 날 때 까지 휘젓는다.
  4. 잘 젓는다.
  5. 준비된 팬에 붓는다.
  6. 예열된 오븐에서 20분간, 혹은 케잌의 윗부분이 튀어나올때까지 굽는다.
  7. 식힌다.

레시피 페이지 마크업

  1. 다른 HTML 문서를 하나 더 만들고, 이것을 stepbystep-recipe.html 이라는 이름으로 저장합니다. 다음과 같은 제목을 추가합니다.
    <h1>스펀지 케잌</h1>
    <h2>재료</h2>
    <h3>재료 노트</h3>
    <h2>조리법</h2>
  2. 재료 목록에 몇가지 재료들이 있지만 순서는 중요하지 않습니다. 따라서 순서 없는 목록을 사용할 것입니다. 다음과 같은 것을 HTML 파일의 body 요소 안에 추가합니다.
    <h2>재료</h2>
    <ul>
      <li>계란 3개</li>
      <li>설탕 100그램</li>
      <li>발효 밀가루 85그램</li>
    </ul>
  3. 재료 노트는 재료 중 일부를 정확하게 정의한 것입니다. 재료 – 단어 – 와 그 정의를 연결할 필요가 있습니다. 정의 목록이 이러한 목적에 적합합니다. 다음과 같은 것을 HTML에, 앞에서 만든 순서 없는 목록의 다음에 추가합니다:
    <h3>재료 노트</h3>
    <dl>
      <dt>설탕</dt>
        <dd>정백당.</dd>
      <dt>발효 밀가루</dt>
        <dd>밀가루와 소금, 베이킹 파우더를 미리 섞어둔 것.</dd>
    </dl>
  4. 조리법은 반드시 정확한 순서대로 따라 해야 하므로, 순서 있는 목록이 적합합니다. 다음과 같은 것을 HTML에, 정의 목록 다음에 추가합니다:
    <h2>조리법</h2>
    <ol>
      <li>오븐을 섭씨 190도로 예열.</li>
      <li>20cm 케잌 팬에 기름을 두른다.</li>
      <li>중간 크기 보울에서 계란과 설탕을 거품이 날 때 까지 휘젓는다..</li>
      <li>잘 젓는다.</li>
      <li>준비된 팬에 붓는다.</li>
      <li>예열된 오븐에서 20분간, 혹은 케잌의 윗부분이 튀어나올때까지 굽는다.</li>
      <li>식힌다.</li>
    </ol>

페이지는 그림 2 처럼 보일 것입니다:

그림 2. 완성된 레시피 페이지

여기에서 완성된 레시피 페이지 를 볼 수 있습니다.

다 됬군요!

요약

이제 HTML에 있는 3가지 종류의 목록에 대해 명확하게 이해하고 있어야 합니다. 단계별 예제를 통해 세가지 모두를 만들어 보았으며, 목록을 목록 내부에 중첩시키는 방법에 대해서도 이해했습니다.

HTML 목록을 잘 사용하는 법을 일단 익히게 되면, 아마 거의 매번 이것을 사용하게 될 것입니다. 웹에는 원래 목록으로 마크업되어야 하지만, 그저 줄바꿈 태그로 구분되어서 의미 없는 요소 안에 우겨넣어진 것들이 아주 많습니다. 이러한 것은 문제를 해결한다기보다는 오히려 문제를 만들어 내는 나태한 방식이므로, 그렇게 해서는 안됩니다. 항상 의미적으로 정확한 목록을 만들어서 당신의 웹사이트를 사용하는 사람들에게 도움이 되게 해야 합니다. 당신 뿐만이 아니라, 당신 이후에 사이트를 관리하게 될 사람에게도 좋은 습관이 될 것입니다.

더 읽어볼 것들

연습문제

  • HTML 목록의 세가지 종류는 무엇입니까?
  • 각각의 목록을 어떤 경우에 사용합니까? 어떤 방법으로 결정하겠습니까?
  • 목록을 중첩하려 할 땐 어떻게 합니까?
  • 목록에 스타일을 주기 위해 HTML이 아니라 CSS를 사용하는 이유는 무엇입니까?

저자에 대해서

Ben Buchanan은 10년도 더 전부터 웹 페이지를 만들기 시작했는데, 이제는 IT 빼고는 전부 꽤 잘 합니다. 그는 공적인 일(대학)과 사적인 일 모두를 해 왔으며, The Australian and three generations of, Griffith University 같은 웹 사이트의 리뉴얼에도 참여했습니다. 최근에는 News Digital Media 에서 프론트엔드 엔지니어로 일하고 있으며, the 200ok weblog 에 자신의 글을 올리고 있습니다.

이 글과 비슷한 종류의 글은 'HTML' 카테고리에서 더 찾아볼 수 있습니다. 또한, , 태그로도 검색해 보실 수 있습니다. 북마크를 하시려면 퍼머 링크로 기억해 주세요.
이 글을 다 읽어주셨다면, 댓글을 남겨주세요. 좋았다라는 격려도 좋고, 잘못된 부분을 지적해 주시는 것도 좋습니다. 마음에 드셨다면 아래 Like 버튼을 눌러서 페이스북과 트위터로 소개해 주시면 더욱 좋겠습니다.