목록태그 ol,ul,li, dl,dt,dd

🔶목록태그

• 기본 사용
  -ul,ol태그 아래는 li태그 밖에 못나옴, 다른 요소는 들어갈 수 없음.
  -그러나 li태그 하위에는 li보다 작은 다른요소는 넣을 수 있음.

• 구조화 된 페이지에서 <div> <p>의 난발을 막고 <ul> <li></li> </ul>로 정렬해서 사용할 수도 있음.
  ​

1.순서형 <ol>

• 리스트의 목록 모양을 바꾸는 법 : list-style

/* html */
		<ol>
			<li>가</li>
			<li>가</li>
            <li>가</li>
		</ol>

/*css - 목록의 모양을 바꿈 */
		.o2{
            list-style: none; /* 목록스타일 없앰 */
            list-style: decimal-leading-zero; /* 01,02,03... */
			list-style: upper-alpha; /* 대문자 알파벳 */
			list-style: lower-alpha; /* 소문자 알파벳 */
			list-style: upper-roman; /* 큰 로마기호 */
			list-style: lower-roman; /* 작은 로마기호 */
            list-style: cjk-ideographic; /* 한자 */
            list-style: url("이미지주소"); 
            }

2.비순서 <ul>

/* html */
<ul>
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

/* css - 목록의 모양을 바꿈 */
li{
	list-style: none;  
	list-style: circle;  
	list-style: square;  
	list-style: url("이미지주소") ;
  }

🔶 원하는 리스트 스타일로 꾸미는 법

• <리스트 스타일을 이미지로 주는 법> list-style : url("./img");
  -이미지로 넣으면 브라우저 확대했을시 이미지가 깨짐.
  -리스트 스타일로 이미지를 넣으면 그 이미지는 위치를 조절하지 못함.
     따라서 background로 해서 위치 조절할 수 있게 할 수도 있음.
  

• <리스트 스타일 li의 background-image 로 주는 법>
  -이미지의 위치를 조절 할 수 있음
  -background는 젤 아래 레이어층으로 가게됨.

/* html */
<ul>
	<li class="u2">나</li>
</ul>

/* css */
.u2{
		list-style: none;    /* 1.기본 스타일을 없애줌 */
		background-image:url("./imgs/icon2.png") ;  /* 2 그림 배경이미지로 가져옴 */
		background-repeat: no-repeat;  /* 3 이미지 반복 안되게끔 함 */
		background-position: 0 7px;  /* 4 이미지의 위치를 조절 */
		padding-left: 10px;  /* 5. 아이콘과 목록내용이 곂치지 않도록 padding으로 밀어줌 */
	}

`

3.정의형 목록 <dl>

• dl
  : 설명 목록을 나타냄.
  : dl태그 하위에는 반드시 dt태그와 dd태그만 사용해야 함. (다른 태그는 쓸 수 없음)
  : 그러나 dt,dd태그 안엔 이보다 더 크기가 작은 다른 요소(인라인요소) 쓸 수 있음.

• dt
  : 목록의 주제
  : dl태그 하위에는 하나의 dt만 사용 가능함.

*dd
: 주제에 대한 답(들여쓰기로 됨)
: dd태그는 여러개 사용 가능

<dl>
   <dt>목록의 주제</dt>
	<dd><span>안에 다른태그 쓸 수 있음</span></dd>  
	<dd>dl태그의 하위에는 하나의 dt만 사용 가능함</dd>
	<dd>dd태그는 여러개 사용 가능함</dd>
</dl>