16.HTML Lists

 

 

See the Pen 01.HTML Lists by heunho (@heunho) on CodePen.

 

 

 

 

 

 

---

정렬되지 않은 HTML List

---

순서가 없는 List는 <ul> 태그로 시작합니다. 각 리스트 아이템(항목)은 <li> 태그로 시작합니다.

리스트 아이템은 기본적으로 검은 색 원(아이콘)으로 표시됩니다.

 

See the Pen 02.Example - Disc by heunho (@heunho) on CodePen.

 

 

 

참고 : <td>요소는 테이블의 데이터 컨테이너입니다. 여기에는 모든 종류의 HTML 요소가 포함될 수 있습니다. 텍스트, 이미지, 목록. 기타 테이블 등이 있습니다.

 

 

 

 

정렬되지 않은 HTML List - 리스트 아이템 마커 선택

---

CSS list-style-type 속성은 리스트 아이템 마커의 스타일을 정의하는 데 사용됩니다.

 

값	설명
disc	리스트 아이템 마커를 글 머리 기호로 설정합니다.
circle	리스트 아이템 마커를 원으로 설정합니다.
square	리스트 아이템 마커를 정사각형으로 설정합니다.
none	리스트 아이템 마커를 지정하지 않습니다.

 

예제 Disc

See the Pen 02.Example - Disc by heunho (@heunho) on CodePen.

 

 

예제 Circle

See the Pen 02.Example - Circle by heunho (@heunho) on CodePen.

 

 

예제 Square

See the Pen 02.Example - Square by heunho (@heunho) on CodePen.

 

 

예제 None

See the Pen 02.Example - None by heunho (@heunho) on CodePen.

 

 

 

 

 

정렬 된 HTML List

---

 

정렬된 List는 <ol> 태그로 시작합니다. 각 List 항목은 <li> 태그로 시작합니다.

List 항목은 기본적으로 숫자로 표시됩니다.

See the Pen 03.Ordered HTML List by heunho (@heunho) on CodePen.

 

 

정렬 된 HTML List - 타입 속성

---

<ol> 태그의 type 속성은 List 항목 마커의 유형을 정의합니다.

값	설명
type="1"	List 항목을 숫자 번호로 지정합니다. (기본 값)
type="A"	List 항목을 영어 대문자로 지정합니다.
type="a"	List 항목을 영어 소문자로 지정합니다.
type="I"	List 항목을 로마 숫자 대문자로 지정합니다.
type="i"	List 항목을 로마 숫자 소문자로 지정합니다.

 

예제 Number

See the Pen 04.Example Numbers by heunho (@heunho) on CodePen.

 

 

예제 영어 대문자

See the Pen 04.Example Uppercase Letters by heunho (@heunho) on CodePen.

 

 

예제 영어 소문자

See the Pen 04.Example Lowercase Letters by heunho (@heunho) on CodePen.

 

 

예제 로마 대문자

See the Pen 04.Example Uppercase Roman Numbers by heunho (@heunho) on CodePen.

 

 

예제 로마 소문자

See the Pen 04.Example Lowercase Roman Numbers by heunho (@heunho) on CodePen.

 

 

 

 

HTML Description List - 설명 List

---

HTML은 설명 목록도 지원합니다.

설명 목록은 각 용어에 대한 설명이 포함된 List입니다.

<dl> 태그는 Description List를 정의하고, <dt> 태그는 용어 혹은 이름을 정의하며, <dd> 태그는 해당 용어 혹은 이름에 대한 설명을 합니다.

See the Pen 04.HTML Description Lists by heunho (@heunho) on CodePen.

 

 

 

 

중첩된 HTML List

---

List는 중첩이 가능합니다. (리스트 안에 리스트를 작성할 수 있습니다.)

See the Pen 05.Nested HTML Lists by heunho (@heunho) on CodePen.

참고 : List 항목에는 새 List 및 이미지, 링크 등의 다른 HTML 요소가 포함될 수 있습니다.

 

 

 

 

Control List Counting - 시작 숫자 지정

---

기본적으로 정렬된 목록은 1부터 계산을 시작합니다. 지정된 숫자부터 계산을 시작하려면 start 속성을 사용해보세요.

See the Pen 06.Control List Counting by heunho (@heunho) on CodePen.

 

 

 

 

리스트를 이용해 Navigation Menu 만들기 - CSS

---

HTML 리스트는 CSS를 사용하여 다양한 방식으로 스타일을 지정할 수 있습니다.

인기 있는 방법 중 하나는 리스트를 가로로 스타일을 지정하여 내비게이션 메뉴를 만드는 것입니다.

See the Pen 07.Navigation Menu by heunho (@heunho) on CodePen.

 

 

 

 

---

단원 요약

---

• 정렬되지 않은 리스트를 정의하려면 HTML <ul> 요소를 사용하세요.

• CSS의 list-style-type 특성을 사용하여 리스트 항목의 마커를 정의하세요.

• 순서화된 리스트를 정의하려면 HTML <ol> 요소를 사용하세요.

• HTML type 속성을 사용하여 번호의 타입을 정의하세요.

• HTML <li> 요소를 사용하여 리스트 항목을 정의하세요.

• HTML <dl> 요소를 사용하여 설명 리스트를 정의하세요.

• HTML <dt> 요소를 사용하여 설명 용어를 정의하세요.

• 설명 리스트에서 용어를 설명하려면 HTML <dd> 요소를 사용하세요.

• 리스트는 리스트 안에 중첩이 가능합니다.

• 리스트 항목은 다른 HTML 요소를 포함할 수 있습니다.

• 리스트를 가로로 표시하려면 CSS 속성 중 float:left 또는 display:inline을 사용하세요.

 

 

---

틀린 내용, 오타, 오역이 있을 경우 댓글로 알려주시면 감사하겠습니다.

질문도 올려주시면 아는 선에서 답변해드리겠습니다.

---

대부분의 내용의 저작권은 w3schools에 있습니다.

HTML Lists