20240730수업
list작성
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- style문법은 무조건 헤드안에만 존재 -->
<style>
li {
color: blue;
list-style-type: hangul; /*가나다*/
}
#item1 /* id가 item1인걸 찾는것*/ {
background-color: yellow;
}
li.item2 {
background-color: aqua;
}
/* li태그중에서 클래스가 item2인것만 적용하겠음.li없애면 h2도 같이 적용 */
</style>
</head>
<body>
<h2 class="item2">OrderdList, UnOrderdList</h2>
<ul type="square">
<!--attribute(속성) type="", disc, circle, square-->
<li>사과</li>
<li id="item1">배</li>
<li class="item2">바나나</li>
<li class="item2">수박</li>
<!-- id는 원래 중복되면 안됨 대신 class로 여러개 지정 가능 -->
</ul>
<!-- li:list -->
<ol type="I">
<!-- attribute(속성) type="", 1,A,a,I,i -->
<li>복숭아</li>
<li>포도</li>
<li>바나나</li>
<li>딸기</li>
</ol>
<!-- 숫자 -->
</body>
</html>See the Pen Untitled by 유레이나 (@zdixexqp-the-reactor) on CodePen.
ol:ordered list
ul:unordered list
'HTML|CSS' 카테고리의 다른 글
| [html/css] Input type (0) | 2024.08.02 |
|---|---|
| [html/css] table태그 (표 만들기), reset css(스타일 시트 초기화) (0) | 2024.08.01 |
| [html/css] a 태그(문서or링크 연결),padding과 margin의 차이 (0) | 2024.08.01 |
| [html/css]이미지 태그(삽입),css적용 (0) | 2024.08.01 |
| [html/css] display mode (0) | 2024.08.01 |