반응형
<ul> 태그는 unordered list 의 약자로 순서가 없는 리스트를 만듭니다.
예제를 통해서 <ul>태그를 확인해 봅니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- UnOdered list -->
<ul>
<li>나이키</li>
<li>아디다스</li>
<li>푸마</li>
<li>프로스펙스</li>
</ul>
</body>
</html>
결과 값은 하기와 같습니다.
순서가 없기에 순서대신 기호가 붙습니다.
이 기호를 불릿(bullet) 이라고 부릅니다. 블릿 기호는 list-style 속성을 추가하여 변경이 가능합니다.
<!-- UnOdered list -->
<ul>
<li>나이키</li>
<li>아디다스</li>
<li>푸마</li>
<li>프로스펙스</li>
</ul>
<ul style="list-style: circle;">
<li>나이키</li>
<li>아디다스</li>
<li>푸마</li>
<li>프로스펙스</li>
</ul>
<ul style="list-style: square;">
<li>나이키</li>
<li>아디다스</li>
<li>푸마</li>
<li>프로스펙스</li>
</ul>
블릿 list-style 속성
- disc : 검정색 원 기호(속성 없을때 기본값)
- circle : 흰색원 기호.
- square : 사각형 기호.
https://soo0100.tistory.com/2123
반응형
'앱 만들기 > HTML5 study' 카테고리의 다른 글
html 표 만들기 (4) | 2023.02.28 |
---|---|
<dl> 태그 예제 (2) | 2023.02.27 |
<ol> 태그 속성 (2) | 2023.02.19 |
<ol> 태그 사용법 (4) | 2023.02.06 |
<hr> 태그 예제 (2) | 2023.02.04 |
댓글