[HTML] 3-6. 목록 작성하기

항목 목록과 번호 목록(ul 요소, ol요소, li요소)

------------------------------------------------------
ul - http://html5.clearboth.org/grouping-content.html#the-ul-element
ol - http://html5.clearboth.org/grouping-content.html#the-ol-element
li - http://html5.clearboth.org/grouping-content.html#the-li-element
------------------------------------------------------

일반적으로 목록작성에는 ul요소(비순차적 목록 unordered list) 또는 ol요소(순차적 목록 ordered list) 를 사용하며 각 항목은 li요소(list item)으로 정의한다.
ul요소, ol요소 모두 블륵 레벨 요소이지만 li요소 이외의 요소를 포함시킬 수 없다. li요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함할 수 있고 또 다른 블록 레벨 요소를 포함할 수 있다.


li에 서브메뉴를 만들 때는 조심할 것. 
- nuli coding convention에서는 서브메뉴는 들여스기를 하지 않도록 한다. 


예제)
<h1>자동차의 종류</h1>
<ul>
    <li>
        경차
        <ul>
            <li>스파크</li>
            <li>모닝</li>
            <li>레이</li>
        </ul>        
    </li>
    <li>
        소형차
        <ul>
            <li>액센트</li>
            <li>아베오</li>
        </ul>
    </li>
    <li>준중형차</li>
    <li>중형차</li>
    <li>대형차</li>
    <li>특대형차</li>
</ul>
<p>등이 있다</p>


------------------------------------------------------


<h1>기증 프로세스</h1>
<ol type="a"> <!-- i | I | a | A | 1 -->
    <li>기증신청 및 접수</li>
    <li>기증품 수거</li>
    <li>물품분류 및 판매가격 책정</li>
    <li>매장/행사장 판매</li>
    <li>배분사업을 통한 수익나눔</li>
</ol>



정의형목록(dl 요소, dt요소, dd요소)

------------------------------------------------------
dl - http://html5.clearboth.org/grouping-content.html#the-dl-element
dt - http://html5.clearboth.org/grouping-content.html#the-dt-element
dd - http://html5.clearboth.org/grouping-content.html#the-dd-element
------------------------------------------------------

'용어'와 '그 설명'으로 구성된 목록을 '정의형 목록'(definition list)이라고 한다. 정의형 목록은 dl요소로 정의하고 용어를 나나태는 dt(definition term)요소와 그 설명인 dd(definition description)요소를 포함한다. dl요소는 블록 레벨 요소이지만 dt요소와 dd요소 이외의 요소를 포함할 수 없다. dt요소는 인라인 요소이며 인라인 요소와 텍스트를 포함할 수 있다. dd요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함할 수 있고, 또 블록 레벨 요소를 포함할 수 있다. 

용어-설명 (제목-내용) 구조 
dt에는 블록 요소가 올 수 없음. 

- dl안에 dt만 있으면 안됨
- dl 안에 dt는 하나, dd는 여러개여도 됨. 
 대신 dt가 여러개, dd가 하나는 곤란 
- dd 내부에 서브메뉴를 만들어도 되나, 별로 좋지 않은 구조가 된다. 
- dl로 만들어보니, 서브메뉴가 없는 경우도 있으면 dt가 더 많아지기도 해서, 구조가 어색해서 
 이제는 메뉴를 만들 때는 그냥 ul을 쓴다. 

예제)

<dl>
    <dt><strong>html</strong></dt>
    <dd>
        <p>인터넷 서비스의 하나인 월드 와이드 웹을 통해 볼 수 있는 문서를 만들 때 사용하는 프로그래밍 언어의 한 종류이다. 특히 하이퍼텍스트를 작성하기 위해 개발되었으며, 인터넷에서 웹을 통해 접근되는 대부분의 웹 페이지들은 HTML로 작성된다.</p>
        <p>HTML은 문서의 글자크기, 글자색, 글자모양, 그래픽, 문서이동(하이퍼링크) 등을 정의하는 명령어로서 홈페이지를 작성하는 데 쓰인다. HTML에서 사용하는 명령어는 태그(tag)라고 하는데 꺽쇠괄호"<>"를 사용하여 나타낸다. 일반적으로 태그는 시작과 끝을 표시하는 2개의 쌍으로 이루어져 있으나 "img", "br"등의 태그와 같이 시작태그만으로 그 영향을 나타내는 경우도 있으며, 종료 태그의 이름은 슬래시 문자[/]로 시작된다. 이와같이 HTML로 작성된 문서를 HTML문서라 하며 이 HTML로 작성된 문서를 웹 브라우저가 해석하여 이용자에게 보여주게 된다. HTML에서는 문서가 별도의 코드(code)를 인식하여 완벽한 하이퍼텍스트를 만들 뿐만 아니라 단어 또는 단문을 인터넷의 다른 장소나 파일로 연결시킬 수 있다.</p>
        <p>HTML은 전자 문서의 서식을 정의하기 위해 만들어졌으며, 국제표준 SGML의 부분 집합으로 정의되었다. HTML은 SGML에서 특히 하이퍼텍스트를 강조하여 만들어진 언어이며, 아스키코드로 된 일반적인 텍스트로 구성되었다. 이 언어는 별도 컴파일러가 필요치 않으며, 웹 브라우저에서 해석이 가능한 사용하기 쉬운 언어로 각광을 받고 있다.</p>
    </dd>
    <dt><strong>css</strong></dt>
    <dd>
        <p>기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따르는데, 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 바로 CSS 이다. 간단히 스타일시트라고도 한다.</p>
        <p>HTML을 이용해서 웹 페이지를 제작할 경우 전반적인 틀에서 세세한 글꼴 하나 하나를 일일이 지정해주어야 하지만, 웹 페이지의 스타일(작성형식)을 미리 저장해 두면 웹 페이지의 한 가지 요소만 변경해도 관련되는 전체 페이지의 내용이 한꺼번에 변경되므로, 문서 전체의 일관성을 유지할 수 있고 작업 시간도 단축된다.</p>
        <p>따라서 웹 개발자들은 보다 풍부한 디자인으로 웹을 설계할 수 있고, 글자의 크기, 글자체, 줄간격, 배경 색상, 배열위치 등을 자유롭게 선택하거나 변경할 수 있으며 유지·보수도 간편하게 할 수 있다.</p>
    </dd>
</dl>