반응형
비순서형 리스트
<ul>의 태그로 시작하여 요소 안에 <li>로 시작이 되어야한다.
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul>
<li>SamSung</li>
<li>HYUNDAI</li>
<li>SK</li>
</ul>
</body>
</html>
비순서형 리스트 스타일 변경
CSS에서 list-style-type의 구조를 가지며 여러가지 type으로 바꿀 수 있다.
disc: 목록 항목 표시를 글머리로 만든다.
circle: 목록 항목 표시를 원형으로 만든다.
square: 목록 항목 표시를 사각형으로 만든다.
none: 목록 항목 표시를 지정하지 않는다.
<!DOCTYPE html>
<html>
<body>
<h2>An unordered HTML list</h2>
<ul style="list-style-type:disc;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:square;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:circle;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ul style="list-style-type:none;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>위의 예시를 통해 비순형 리스트의 스타일이 변경되있는것을 알 수 있다.
반응형
'웹프로그래밍 > HTML' 카테고리의 다른 글
| HTML Iframes (0) | 2023.09.04 |
|---|---|
| HTML 클래스 class (0) | 2023.09.04 |
| HTML 리스트 list (0) | 2023.09.04 |
| HTML 단락과 <br>,<pre> 사용법 (0) | 2023.09.04 |
| HTML Headings 수직선 입력 방법 (0) | 2023.09.04 |
댓글