순서 있는 리스트 : ol
순서 없는 리스트 : ul
span 태그는 텍스트 일부분 제어 할 때 사용
div 태그는 보편적으로 많이 사용되는 블록 태그
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="../pretty.css">
<link rel="stylesheet" href="combinator.css">
<title>HTML & CSS 02-01-03</title>
</head>
<body>
<h1>결합자와 가상 클래스</h1>
<ul class="outer">
<li>육류</li>
<li>채소</li>
<li>유제품</li>
<li>과일
<ul>
<li>사과</li>
<li>포도</li>
<li>딸기</li>
<li>키위</li>
</ul>
</li>
</ul>
<ol>
<li>한놈</li>
<li>두시기</li>
<li class="starter">석삼</li>
<li>너구리
<ol>
<li>test</li>
<li>test</li>
<li>test</li>
</ol>
</li>
<li>다섯놈</li>
<li>육개장</li>
<li>칠푼이</li>
<li>팔보채</li>
<li>구공탄</li>
</ol>
<span>span 요소</span>
<div>div 요소</div>
<span>span 요소</span>
<span>span 요소</span>
<div>div 요소</div>
<div>div 요소</div>
<span>span 요소</span>
<span>span 요소</span>
<span>span 요소</span>
<div>div 요소</div>
<div>div 요소</div>
<div>div 요소</div>
<br>
텍스트 사이에 들어있는 <span>span 요소</span>입니다.
<br><br>
<div>
div 요소 안에 들어있는 <span>span 요소</span> 입니다.
</div>
<br>
<span>span 요소 안에 들어있는 <div>div 요소</div>입니다.</span>
</body>
</html>.outer li {
color: olivedrab;
}
.outer>li {
color: dodgerblue;
}
.outer>li li {
text-decoration: underline;
}
.starter~li {
font-style: italic;
}
.starter+li {
font-weight: bold;
color: yellow;
}
ol li:first-child,
ol li:last-child {
color: yellowgreen;
}
.outer>li:not(:last-child) {
text-decoration: line-through;
}
ul:not(.outer) li {
font-weight: bold;
}
ol li:nth-child(3) {
font-weight: bold;
color: deeppink;
}
li:hover {
font-weight: bold;
color: blue;
}
span {
background-color: aqua;
color: bisque;
}
div {
background-color: blue;
color: red;
}
안녕하세요