HTML의 리스트

오늘은·2022년 9월 23일

HTML

목록 보기
3/10
post-thumbnail

List

여러 요소를 나열한 목록을 의미하며
HTML에서는 리스트 3가지로 나누어 제공한다.

  1. 순서가 없는 리스트 (Unordered List)
  2. 순서가 있는 리스트 (Ordered List)
  3. 정의 리스트 (Definition List)

1. 순서가 없는 리스트

<ul> 태그를 사용하여 순서가 없는 리스트임을 정의한다. 내부 리스트는 <li> 태그로 시작한다.
기본 마커는 검은 원.

마커 모양 변경하기

CSS속성인 list-style-type 을 사용하여 변경 가능
모양 더보기 - MDN : list-style-type

2. 순서가 있는 리스트

<ol> 태그를 사용하여 순서가 있는 리스트임을 정의한다. 내부 리스트는 <li> 태그로 시작한다.
기본 마커는 아라비아 숫자로 1.

속성

역순으로 숫자를 나열 - reversed
시작 숫자 변경 - start
숫자 타입 변경 - type

숫자 타입 변경

유형type="ㅤ"style="list-style-type:ㅤ"
영어 소문자alower-alpha
영어 대문자Aupper-alpha
로자 숫자 소문자ilower-roman
로마 숫자 대문자Iupper-roman
아라비아 숫자1decimal

두가지 방법이 존재.

3. 정의 리스트

<dl> 태그를 사용하여 <dt>를 정의한다.
<dd> 태그는 이를 설명하게 된다.


예시

profile
게으르지만 기록은 하고싶어!

0개의 댓글