HTML1-4. 목록 태그 사용법(ol,ul,li)

HTML

by 𖠂𖢕🜇𐃄༶இ௹𒀱𐦄𐦉 2022. 9. 17. 05:11

1. ul 태그

: 일반적으로 항목의 순서와 없는 항목을 나열 할 때에 사용합니다.

unorder list 만들 때 사 <ul> 태그를 사용하고 그 안에는 item list <li> 태그로 내용을

표시합니다.

<ul>

</ul>

2. ol 태그

: order list 항목들에 대한 순서가 필요한 목록 만들 때 <ol>태그를 사용합니다.

속성

type : ol 순서 목록 항목 앞에 시작할 값을 지정할 수 있습니다.

start: 기본값은 1부터 시작하며, 시작하고 싶은 값을 넣어 지정할 수 있습니다.

reversed: 항목을 역순표시.

Tip: 만약 <li> 나열한 아이템이 많다면 </li> 태그를 닫지 않고 <li> 다음 리스트를 적어도

<li>태그를 다시 만나게 되면 자동으로 해당 태그를 닫아줍니다.

<body>

<li>개

<li>두

<li>마

<li>리

</ol>

</body>

로마숫자 소문자로 시작하고 i 번째에서 4번에 시작했으므로 list number 4를 상징하는 iv에서 시작합니다.

그럼 여러분들도 오늘과 내일 할일을 ol 또는 ul를 사용해서 작성해 보세요.

<body>

<li>2022년 9월 7일 To do

<li>댕댕이 밥 챙겨주기

<li>댕댕이 산책 시키기

<li>댕댕이 주간 목욕

<li>집사도 목욕하기

</ol>

<li>2022년 9월 8일 To do

<li>온라인 게임 즐기기

<li>집사 운동하기

<li>병원 방문하기

<li>웹툰 보기

</ol>

</body>

다음 페이지 이전 페이지

LIST

저작자표시 변경금지 (새창열림)

'HTML' 카테고리의 다른 글

HTML1-6. 표 만들기 table 1 -[HTML 표 만들기, HTML th 태그로 행이나 열에 제목 생성, caption & figcaption 사용 방법] (0)	2022.09.17
HTML1-5.설명 목록 만들기 (dl 태그,dt 태그, dd 태그, 프로필 만들기) (0)	2022.09.17
1-3. 기타 텍스트 (0)	2022.09.10
1-2. 텍스트 태그 (0)	2022.09.10
0-1. 코딩하기 전에 중요한 것 (0)	2022.09.10

꼼찌냥1-web

고정 헤더 영역

메뉴 레이어

메뉴 리스트

검색 레이어

검색 영역

상세 컨텐츠

본문 제목

본문

1. ul 태그

2. ol 태그

'HTML' 카테고리의 다른 글

관련글 더보기

댓글 영역

추가 정보

인기글

최신글

티스토리툴바