[html] step05~07. ul / ol / dl

step05. ul

    <h1>순서 없는 목록 (unordered list) ul element</h1>

    <h2>친구 목록입니다.</h2>
    김구라 <br>
    해골 <br>
    원숭이

    <p>
        어떤 목록을 나타낼 때 문자열을 단순히 나열하는게 아니고
        아래와 같이 구조화해서 나열해야 한다.
    </p>

    <h2>친구 목록입니다.</h2>
    <ul>
        <li>김구라</li>
        <li>해골</li>
        <li>원숭이</li>
    </ul>
    <p>ul은 block element이고 top/bottom margin과 left padding을 가지고 있다.</p>
    <p>하지만 표기는 margin-top/bottom, padding-left로 함.</p>

1. un-ordered list. 순서없는 나열이다.
2. 중구난방으로 나열하는 것이 아닌 구조화를 통해서 나열해야한다.
3. 검사를 해보면 ul은 block element이고 padding을 가진다. 기본 스타일을 css를 통해 변경할 수 있다.
4. 동그란 점을 'disc'라고 한다.
5. padding은 내용과 border 사이의 안쪽 여백, border는 경계선 및 테두리, margin은 border 바깥 여백을 말한다.
6. 명명은 xxx-left, right, top, bottom으로 한다.

 

step06. ol

    <h1>순서 있는 목록 (ordered list) ol element</h1>
    <p>목록 앞에 disc 대신 number가 붙은 것을 제외하고는 ul element와 유사하다.</p>
    <h2>할 일 목록입니다.</h2>
    <ol>
        <li>html 공부하기</li>
        <li>css 공부하기</li>
        <li>javascript 공부하기</li>
    </ol>

1. disc 대신 숫자가 붙은 것을 제외하고는 ul과 유사하다.

 

step07. dl (정의형 목록)

    <h1>정의형 목록 (definition list) dl</h1>
    <dl>
        <dt>html</dt>
        <dd>Hyper Text Markup Language의 약자입니다.</dd>

        <dt>css</dt>
        <dd>Design적인 요소를 결정합니다.</dd>
        
        <dt>javascript</dt>
        <dd>language 적인 요소를 담당합니다.</dd>
    </dl>

1. 제목에 해당하는 dt와 내용에 해당하는 dd로 이루어진 목록이다.

 

 

와 이걸 왜 이제 만들었지...