[ul/ol Tag] 리스트 태그와 정렬태그

안녕하세요 아기크롱입니다.

작성된 글을 읽으시면서 빼먹은 부족한 부분은 댓글고고^^ 

그럼 시작합시다

 

<ul>, <ol>에 대해 공부해보도록 합시다.

 

리스트 태그는 기본목록 태그라고도 불립니다.

 (1) 리스트 태그에는 <ul> 과 <ol>이 있습니다. 그리고 내부에서 <li>를 사용합니다.

 (2) 연관된 항목들이나 메뉴를 만들때 사용된다.

 (3) 리스트 태그에는 type 속성이 있습니다. 속성에 대해서는 아래에서 설명드리겠습니다.

 

1) 순서 없는 목록 만들기 (UL : Unordered List) <ul></ul> :: 순서 없는 목록을 만들 때 사용하는 태그입니다.

그림태그, 문자태그로도 불립니다. 

 (1) ul태그의 type은 disc, square, circle이 있습니다.

 (2) 목록구분자에 이미지를 적용시킬 수 도 있습니다.

 (3) defalut는 circle입니다.

- circle : 흰 원모양

- square : 사각형 모양

- disc : 검은 원모양

 

<ul type="disc">

    <li>이 곳 disc 목록에 각 항을 입력하면 됩니다.</li>

</ul>

<ul type="square">

    <li>이 곳 square 목록에 각 항을 입력하면 됩니다.</li>

</ul>

<ul type="circle">

    <li>이 곳 circle 목록에 각 항을 입력하면 됩니다.</li>

    <li>두 번째 목록입니다.</li>

    <li>세 번째 목록입니다.</li>

</ul>

<ul>

    <li type="disc">첫 번째 목록입니다.</li>

    <li type="square">두 번째 목록입니다.</li>

    <li type="circle">세 번째 목록입니다.</li>

</ul>

스타일시트를 적용시, 

<style type="text/css">

body {

font-family: "맑은 고딕";

}

li {

    height: 30px;

    line-height: 28px;

    color: #9fb1bc;

}

</style>

2) 순서있는 목록 만들기 (OL : Ordered List) ::<ol></ol>: 순서있는 목록을 만들 때 사용하는 태그입니다.

숫자, 알파벳 등으로 표현이 된다. 기본적인 defalut는 아라비안 숫자를 순서대로 하는 것이다. 또한 속성에는 start와 reversed가 있다.

- start : 해당 기준부터 시작된다.

- reversed : reversed라고 작성되면 역순으로 작성된다.

 

type은 목록을 표현하는 방식을 지정하는 속성입니다. 큰따옴표의 안에 1, A, a, I, i를 입력하여 지정하실 수 있습니다. 1은 숫자로, A는 대문자 알파벳으로, a는 소문자 알파벳으로, I는 대문자 로마자로, i는 소문자 로마자로 목록을 표현하여 준답니다. start는 앞에서 끝난 목록을 이어서 계속할 때 사용하는 속성입니다. A, a, I, i의 경우에는 start를 사용해서 목록을 계속 이어나갈 수가 없습니다. 대체적으로 리스트 태그안에 a태그를 사용하는 경우가 많습니다.

 

<ol>

    <li type="1">1 유형의 목록입니다.</li>

    <li type="A">A 유형의 목록입니다.</li>

    <li type="a">a 유형의 목록입니다.</li>

    <li type="I">I 유형의 목록입니다.</li>

    <li type="i">i 유형의 목록입니다.</li>

</ol>

<ol type="1" start="4">

    <li>순서 목록입니다.</li>

    <li>순서 목록입니다.</li>

    <li>순서 목록입니다.</li>

    <li>순서 목록입니다.</li>

    <li>순서 목록입니다.</li>

</ol>

<ol type="1">

    <li>큰 목록 1입니다.

        <ol type="a">

            <li>작은 목록 a입니다.</li>

            <ol type="i">

                <li>더 작은 목록 i입니다.</li>

                <li>더 작은 목록 ii입니다.</li>

                <li>더 작은 목록 iii입니다.</li>

            </ol>

            <li>작은 목록 b입니다.</li>

            <li>작은 목록 c입니다.</li>

        </ol>

    </li>

</ol>

 

이번에는 정렬태그 <dl>에 대해 알아보려고 합니다. 

 

3) 정렬태그

자동 정렬, 들여쓰기를 할 때 사용하고 정의목록 태그라고 불린다.

 (1) 예컨대 단어를 설명하는대에 사용되는 태그로써 제목과 설명을 작성하기 위해 사용된다.

 (2) <dl>, <dt>, <dd>가 있고 <dd>는 자동으로 들여쓰기 기능이 된다.

 

  <dl> : 겉으로 감싸서 정의목록 태그를 사용할 수 있도록 한다.

  <dt> : dl태그내에서 제목을 표현할 때 사용되는 태그이다.

  <dd>: dl태그내에서 내용, 속성을 표현할 때 사용되는 태그로써 자동으로 들여쓰기가 된다.

  ※ dt와 dd는 li처럼 닫기를 하지 않아도 된다.