[HTML/CSS] 리스트(ul, ol, dl)

ul 태그 : 순서가 없는 리스트

자식태그로 <li></li>를 갖는다.

**<li>는 블록요소로 자동개행됨

 

 

 

 

ol 태그 : 순서가 있는 리스트

리스트 항목들은  <li></li>를 사용한다.

리스트 구분은 숫자가 기본 값이다.

 

 

---

 

리스트 구분 기본 값은 disc로 색이 채워진 둥근 점 모양.

리스트 구분 값은 css의 list-style-type으로 지정할 수 있음. 

 

disc : 기본값, 채워진 둥근 점

circle : 비워진 둥근 점 

square : 사각형 모양 점 

none : 구분없음(사라짐)

 

 

 

리스트 구분 값을 원하는 이미지로 대체하는 경우

background : url 을 이용한다.

참고로 no-repeat을 사용하지 않으면 꽉차게 반복해서 채워지니 주의! 

 

---

 

 

리스트끼리 중첩이 가능하다!

 

 

---

내용 추가+)

 

dl 태그 : 사전처럼 용어를 설명하는 리스트

자식태그로 <dt></dt>와  <dd></dd> 를 갖는다.

**<dt>와 <dd>는 블록요소로 자동개행됨

<dt>: 용어의 제목

<dd>: 용어의 설명

 

새로 배웠거나 어려웠던 부분 확인(스타일 태그 안에서 적용)

*{margin:0; padding:0;} /* 별표는 body안의 모든 태그로, 모두 왼쪽정렬하는 내용 */

margin : 0 auto; /* 상하:0, 좌우:auto =>화면 가운데 자동정렬 / auto속성을 사용하려면 반드시 width속성이 적용되어있어야 한다.*/

text-align: center; /* 텍스트 가운데 정렬 */

letter-spacing: 10px; /* 자간 */

text-indent: 15px; /* 들여쓰기 */