2023. 10. 8. 23:47ㆍHtml, Css
▼목록 만들기
▷순차 목록 (순서가 있는 목록 ex. 123. 가나다)
<ol> - <li>
ㄴex)
<body>
<ol>
<li>순서가 있는 목록1</li>
<li>순서가 있는 목록2</li>
<li>순서가 있는 목록3</li>
</ol>
</body>
▽비순차 목록 (순서가 없는 목록 ex. -, ※, ●)
<ul> - <li>
-한줄에 여러개의 요소를 나타내려고 하는데 스타일이 비슷할 때 사용함
ㄴex)
<body>
<ul>
<li>순서가 없는 목록1</li>
<li>순서가 없는 목록2</li>
<li>순서가 없는 목록3</li>
</ul>
</body>
○앞에 표시를 지울 수 있음
ㄴex)
<style>
ul{list-style: none;}
</style>
○목록 list 사용법
>예전방식 float: left/right (어려워서 태그가 업데이트 됐으나 여전히 많이 사용중)
-공중에 띄워서 left/right 로 보내라
-center는 없음
-left/ right 사용시 순서대로 적용 (left: 1234 / right: 4321)
>최신방식 display: flex
○float시 공중에 떠서 다른 태그와 겹쳤을 때
> after{clear: both; content:"" ; display: block;}
-자식이 아닌 부모에게 적용해야함
-margin 값이 통합 되지 않음
ㄴex)
<style>
ul:after{clear: both; content:"" ; display: block;}
</style>
<body>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
</ul>
</body>
▷정의형 목록 (국어사전 처럼 단어를 설명하고 싶을 때 사용하는 목록)
<dl> - <dt><dd>
ㄴex)
<dl>
<dt>주말날씨</dt>
<dd>자외선 높음. 32도</dd>
<dt>html</dt>
<dd>웹문서 만들기 위한</dd>
</dl>
'Html, Css' 카테고리의 다른 글
| 선택자 (0) | 2023.10.08 |
|---|---|
| 주석 / 폰트 (0) | 2023.10.08 |
| 외부 스타일 / hover (1) | 2023.10.08 |
| 여백 (0) | 2023.10.08 |
| 이미지 삽입 / 하이퍼 링크 (0) | 2023.10.08 |