6.<ul><ol><li><dl><dt><dd> 태그 정리

자 오늘은 6번째 html 태그 정리 시간입니다.

뭔가 글 남기기 참 힘드네요.. 요즘 유튜브에 메모하는 습관 같은 영상 가끔씩 보는데,

참 유용하다는 것을 알고 느꼈던 바도 있지만, 기록을 남기는게 참 쉽지가 않습니다. 특히 싱글이 아니라면 더욱 더 그렇죠 ㅠㅠ

자 각설하고 정리 들어가보겠습니다.

---

https://www.w3schools.com/html/html_lists.asp 에 따르면 글 제목과 같은 태그들을 List tag로 정의하고 있고,

그 tag의 종류는 글 제목과 같습니다.

늘 그랬듯, 어떤 단어를 축약해놓은 것인지 단어 정리 먼저 들어가볼게요.

<ul> : Unondered List : 정돈되지않은, (질서)정연하지 않은, 순위적이지 않은

<ol> : Ordered List : 정돈된, (질서)정연한, 순위적

<li>: List item : 목록 항목

<dl> : description list : 기술 목록

<dt> :  a term/name in a description list. : 기술 목록의 설명

<dd> : Describes the term in a description list : 기술 목록에 기술된 내용

<dt>와 <dd>태그는 잘 모르겠네요 단어의 뜻을. 그러나 <dl>태그와 관련 있음을 알 수 있을 듯 합니다.

---

일단 위 링크 페이지의 순서에 따라 태그 사용 목적 사용법, 코드 등을 보도록 할게요.

<ul> 태그 입니다.

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
The list items will be marked with bullets (small black circles) by default:

순서가없는 목록은 <ul> 태그로 시작합니다. 각 목록 항목은 <li> 태그로 시작합니다. <li> 목록 항목은 기본적으로 글 머리 기호 (작은 검은 색 원)으로 표시됩니다.

어떻게 쓰는건지 코드를 보도록 할게요.

<h2>An Unordered HTML List</h2>
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>  

결과 값은 아래와 같습니다.

An Unordered HTML List

• Coffee
• Tea
• Milk

자 어떻게 써야하는지 감이 오시나요?

일단 <ul>태그로 <li>태그를 감싼 모습을 볼 수 있고, <li>태그내 기술된 목록은 검은 점으로 표시 된 것을 알 수 있습니다. 그리고 아래로 정렬되는 것을 보아 block 성격의 태그임을 알 수 있습니다.

그리고 위 사이트를 보시면 알겠지만, <ul>태그 속성값으로 기호 모양을 바꿀 수 있습니다. CSS로 적용시켜야 합니다.

---

<ol> 태그 입니다. 

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

정렬 된 목록은 <ol> 태그로 시작합니다. 각 목록 항목은 <li> 태그로 시작합니다.  기본적으로 숫자로 표시됩니다.

<h2>An ordered HTML list</h2>

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

An ordered HTML list

1. Coffee
2. Tea
3. Milk

<ul>태그와 다르게 번호가 적용되는 것을 알 수 있습니다.

<ol>태그의 속성값으로 번호가 아니라 알파벳으로 바꿀 수도 있고 로마 숫자로도 바꿀 수 있는데요. 위 사이트 설명에 CSS가 명시되어 있지 않은것으로 보아 태그에 속성값이 적용 가능한 것으로 보입니다.

TypeDescription

type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

추가로 시작 번호도 바꿀 수 있네요! 속성은 start 이구요 값은 정수로만 반영 가능 한 것으로 생각됩니다.

깔끔하게 위 속성들이 적용 된 하나의 코드를 더 보도록 하겠습니다.

<ol start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

<ol type="I" start="50">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

결과값은 아래와 같습니다.

<ol태그 속성>

---

<dl><dt><dd>태그 입니다.

HTML also supports description lists. A description list is a list of terms, with a description of each term.

The <dl> tag defines the description list, the <dt> tag defines the term (name), and the <dd> tag describes each term:

HTML은 설명 목록도 지원합니다. 설명 목록은 각 용어에 대한 설명이 포함 된 용어 목록입니다.
<dl> 태그는 설명 목록을 정의하고 <dt> 태그는 용어 (이름)를 정의하며 <dd> 태그는 각 용어를 설명합니다.

음.. <ul><ol>태그와 비슷하게 사용 하면 될 것 같습니다. 그쵸?

위 단어 정의 부부에서 보면 <ul><ol>태그는 order, list라는 단어가 공통적으로 들어가 있었습니다. 즉 책의 목차 같은 느낌이고, 위 <dl><dd><dt>태그는 description 이라는 단어가 공통적으로 추가하여 들어가 있는 것을 보아 목차의 항목을 설명하는 항목으로써 태그를 사용하면 될 것 같습니다. 왜냐면 HTML5는 웹 접근성을 중요시하니까요!

코드 볼게요~!

<h2>A Description List</h2>

<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

결과는 아래와 같습니다.

A Description List

Coffee

         - black hot drink

Milk

         - white cold drink

'-'는 태그에서 처리해주는 것이 아니라 코드를 보면 직접 타이핑 한 것을 알 수 있습니다. 

그런데.... '-'로 표시 되면 더 좋았을 것 같다는 생각이 드는데요??

---

마지막으로 Nested HTML Lists 라는 내용이 있는데요,

List can be nested (lists inside lists):

List의 중첩이 가능하다. 즉, list 내 list가 존재 가능하다라는 내용이지요.

Note: List items can contain new list, and other HTML elements, like images and links, etc.

목록 항목에는 새 목록 및 이미지 및 링크 등의 다른 HTML 요소가 포함될 수 있습니다.

무슨 말인지 코드를 한 번 보도록 하죠.

<h2>A Nested List</h2>
<p>List can be nested (lists inside lists):</p>

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

결과값은 아래와 같습니다.

A Nested List

List can be nested (lists inside lists):

• Coffee
• Tea
  • Black tea
  • Green tea
• Milk

지금 <li> Tea 라고 적고 닫힘 태그를 바로 쓰지 않고,  <ul> 태그로 한 번 더 감써서 tea의 종류를 더 써놓은 듯 합니다.

또 한 Black tea, Green tea 의 기호가 하얀점으로 나오는 것을 알 수 있습니다.

CSS가 적용되어 있는것인가 싶어, VSC(Visual studio code editor)로 쳐보았는데 똑같이 나오네요. 

<li>태그의 자식 항목으로 <ul>이 들어간건데 이렇게도 사용 할 수 있군요. 신기하네요 ㅎㅎ

저도 사실 <dl><dt><dd>태그는 처음보는거라 호기심이 생겨 한 번 아래와 같이 쳐보았습니다.

	<ul>
                <li>Coffe</li>
                <li>Tea
                    <ul>
                        <li>Black tea</li>
                        <dl>
                           <li><dt>Hong Cha</dt></li>
                            <dd>홍차는 어쩌고 저쩌고</dd>
                            <dt><li>Corn cha</li></dt>
                            <dd>옥수수차가 어쩌고 저쩌고</dd>
                        </dl>
                        <li>Green tea</li>
                        <dl>
                            <dt>green tea</dt>
                            <dd>녹차가 어쩌고 저쩌고</dd>
                        </dl>
                    </ul>
                </li>
                <li>Milk</li>
            </ul>

결과값은,

이렇게 나오는 걸 확인 할 수 있었습니다. ㅎ

 

벌써 새벽 3시네요 ㅎㅎ 위닝 한 판 하려고 했는데 스트레스만 쌓일 듯 싶습니다.

오늘의 과제를 마무리하며, 저와 같이 코딩에 관심있으신 분들께 도움이 되는 글이 되었으면 좋겠습니다.

다가 올 신년 잘 맞이하세요~!

감사합니다.