서두르지 말고 쉬지 말자

7. 목록 만들기 본문

코딩 공부/HTML

7. 목록 만들기

philos 2024. 3. 14. 12:38

1. ul 태그

-순서가 없는 목록을 생성할 때 사용함, 목록 내용은 li 태그로

<!--형식-->
<ul>
	<li>목록 내용 1</li>
    <li>목록 내용 2</li>
    <li>목록 내용 N</li>
</ul>

<!--예시-->
<h1>아라라기 하렘</h1>
<ul>
	<li>하네카와 츠바사</li>
    <li>센죠가하라 히타기</li>
    <li>아라라기 카렌</li>
    <li>아라라기 츠키히</li>
    <li>오시노 시노부</li>
    <li>칸바루 스루가</li>
    <li>센고쿠 나데코</li>
    <li>하치쿠지 마요이</li>
    <li>오시노 오우기</li>
    <li>오노노키 요츠기</li>
</ul>

-ul태그는 목록마다 글머리 기호 ● 가 붙음

2. ol 태그

-순서형 목록을 생성함, 목록 내용은 li태그로

<!--예시-->
<ol>
	<li>목록 내용1</li>
    <li>목록 내용2</li>
    <li>목록 내용3</li>
    <li>목록 내용N</li>
</ol>

-목록 내용에 번호가 붙음

3. dl 태그

- 정의형 목록을 만듬

- 정의형 목록: 용어와 용어설명을 나열한 목록

-dt 태그로 용어를, dd태그로 용어설명을 작성

<!--형식-->
<dl>
	<dt>용어 1</dt>
    <dd>용어 설명 1</dd>
    <dt>용어 n</dt>
    <dd>용어 설명 n</dd>
</dl>

<!--예시-->
<dl>
	<dt>오시노 메메</dt>
    <dd>정체를 알 수 없는 중년의 아저씨로, 
    정처없이 떠돌아다니던 도중 흡혈귀 퇴치사들에게 습격당하는 아라라기 코요미를 구해준 것을 계기로 
    봄방학 때 부터 폐건물에 거처하기 시작했다.</dd>
    <dt>카이키 데이슈</dt>
    <dd>괴이의 존재를 믿는 사람들을 속여 돈을 뜯어내는 악질 사기꾼이다. 
    그에 어울리게 존재 자체가 거짓인 가짜 괴이를 다룬다.</dd>
</dl>
반응형

'코딩 공부 > HTML' 카테고리의 다른 글

9. 텍스트 강조  (2) 2024.03.14
8. 링크와 이미지 삽입  (3) 2024.03.14
6. 그룹 짓기  (0) 2024.03.13
5. 텍스트 작성하기  (1) 2024.03.13
4. HTML의 특징  (2) 2024.03.13