리스트 태그

*본 글은 명품 웹 프로그래밍 책을 참조하였습니다.

1. 리스트 태그

• 리스트1
• 리스트2
• 리스트3

이런 표현을 나타낼 수 있는 태그다.

 

리스트 태그에는 세 가지가 있다.

 

1-1. <ol> : 순서 있는 리스트(ordered list)

1. 리스트1
2. 리스트2
3. 리스트3

각 항목에 일련의 순서가 있는 리스트 태그다.

<li>태그는 각 리스트를 나타낼 때 사용하는 태그다.

<ol
	type="1 | A | a | I | i"
	start="3"
>
	<!-- type 속성 : 무슨 패턴으로 마크 할건지(되도록이면 CSS로 작성을 권장) -->
	<!-- start속성 : 몇번째부터 시작할 건지(3이라고 작성하면 세번째부터 시작) -->
    
	<li>리스트1</li>
	<li>리스트2</li>
</ol>

 

type을 I(대문자 i)로 두고, start를 4로 두어보겠다.

	<style>
		ol{
                    border: 1px solid black;
                    display: inline-block;
                    padding: 3px 0px 3px 30px;
                    background: skyblue;
		}
	</style>
	<ol type="I" start="4" style="border: 1px solid black;">
	  <li>리스트1</li>
	  <li>리스트2</li>
	</ol>

 

이미지로 대체

CSS3를 배우면 알겠지만 보통은 type 속성을 CSS3로 따로 작성하긴한다.

위의 코드에서 <style> 태그 안쪽에 해당 태그에 대한 꾸미기라고 생각하면 된다.

 

1-2. <ul> : 순서 없는 리스트(unordered list)

• 리스트1
• 리스트2
• 리스트3

<ol>태그와 비슷하지만 일련의 순서가 없는 리스트 태그라는 차이가 있다.

<ul type="square | disc | circle">
	<!-- 마찬가지로 CSS3로 권장 -->
	<!-- 순서가 없기 때문에 start 속성이 존재하지 않음 -->
	<li>리스트1</li>
	<li>리스트2</li>
</ul>

각 type이 무엇인지는 아래에 결과를 보면 된다.

순서대로 square, disc, circle

참고로 <li> 태그에 type을 따로 지정해 줄 수도 있다.

이걸 응용하자면 다음과 같이도 나타낼 수 있다.

<ol type="I" start="4" style="border: 1px solid black;">
    <li type="A">리스트1</li>
    <li type="a">리스트2</li>
    <li type="I">리스트2</li>
</ol>

type 속성 응용

 

1-3. <dl> :  정의 리스트(definition list)

정의 리스트는 용어나 설명을 하나의 아이템으로 나열하는 리스트다.

순서도 없고 마크도 없는 리스트라고 생각하면 된다.

<style>
    dl{
        border: 1px solid black;
        display: inline-block;
        background: skyblue;
        padding: 3px;
    }
</style>

<dl>
    <dt>소제목1</dt>
    <dd>소제목1 내용1</dd>
    <dd>소제목1 내용2</dd>

    <dt>소제목2</dt>
    <dd>소제목2 내용1</dd>
    <dd>소제목2 내용2</dd>
</dl>

<dt> 태그는 용어에 관해서,

<dd> 태그는 설명에 관해서 표현한다.

 

*리스트 태그는 전부 블록 태그다.