🥊 환경 정보
- HTML ver : HTML5
🥊<body> 태그
<body> 태그의 안에 들어갈 내용들은 실제 브라우저에 표시될 내용이다.
내용을 표현하는 여러 태그가 있는데, 이번에는 리스트 관련 태그들을 알아보자.
🥊 목록을 만드는 태그
💧 <ul> </ul>
- 순서 없는 목록을 만드는 태그.
- 각 항목 앞에 불릿(
•)이 붙여진다. - 닫는 태그와 함께 사용한다.
<li>~</li>태그와 함께 사용해야 한다.
아래와 같은 형태로 사용된다.
<ul>
<li> 순서없는 목록 1st </li>
<li> 순서없는 목록 2nd </li>
<li> 순서없는 목록 3rd </li>
</ul>
- 순서없는 목록 1st
- 순서없는 목록 2nd
- 순서없는 목록 3rd
💧 <ol> </ol>
- 순서 있는 목록을 만드는 태그
- 각 항목 앞에 숫자가 붙여진다.
- 닫는 태그와 함께 사용한다.
<li>~</li>태그와 함께 사용해야 한다.- 속성은 다음과 같다.
| 속성 | 사용처 |
|---|---|
| type | 각 항목의 숫자 형태 변경 |
| start | 시작 번호 변경 |
| reserved | 역순으로 표시 |
아래와 같은 형태로 사용된다.
<ol>
<li> 순서 목록 1st </li>
<li> 순서 목록 2nd </li>
<li> 순서 목록 3rd </li>
</ol>
- 순서 목록 1st
- 순서 목록 2nd
- 순서 목록 3rd
💧 <ul>, <ol>
- 목록 태그는
<li>하위에 다시 목록 태그인<ul>or<ol>를 추가하여 다중 목록을 구현할 수 있다.
<ol>
<li> 순서 목록 1st
<ul>
<li> 순서없는 목록 1st </li>
<li> 순서없는 목록 2nd </li>
<li> 순서없는 목록 3rd
<ol type="a">
<li> 순서 목록 a </li>
<li> 순서 목록 b </li>
<li> 순서 목록 c </li>
</ol>
</li>
</ul>
</li>
<li> 순서 목록 2nd
<ol type="a" start="4">
<li> 순서 목록 2-d </li>
<li> 순서 목록 2-e </li>
<li> 순서 목록 2-f </li>
</ol>
</li>
<li> 순서 목록 3rd </li>
</ol>
- 순서 목록 1st
- 순서없는 목록 1st
- 순서없는 목록 2nd
- 순서없는 목록 3rd
- 순서 목록 a
- 순서 목록 b
- 순서 목록 c
- 순서 목록 2nd
- 순서 목록 2-d
- 순서 목록 2-e
- 순서 목록 2-f
- 순서 목록 3rd
💧 <dl>, <dt>, <dd>
- 제목과 설명으로 이루어진 목록을 만드는 태그.
<dl>태그 안에<dt>태그와<dd>태그를 사용한다.<dt>: 제목<dd>: 설명- 닫는 태그와 함께 사용한다.
아래와 같은 형태로 사용된다.
<dl>
<dt> 제목 1 </dt>
<dd> 설명 1-1 </dd>
<dd> 설명 1-2 </dd>
<dt> 제목 2 </dt>
<dd> 설명 2-1 </dd>
<dd> 설명 2-2 </dd>
</dl>제목 1 설명 1-1 설명 1-2 제목 2 설명 2-1 설명 2-2
🥊 썸네일
제작자 : wonkooklee
차근차근 한 걸음씩 걸어나가는 개발자 꿈나무.