<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>구조 선택자</title>
<style>
li {
float:left; /*옆으로 나열하는 것*/
list-style: none; /*점을 없애버린다.*/
padding : 10px 15px 10px 15px;/*간격을 상하좌우 각각 조절한다.*/
background-color : #c84646; /*배경색상을 넣는다.*/
}
li:first-child {border-radius:10px 0 0 10px;} /*라운드처리 태그 왼쪽부터 시계방향으로*/
li:last-child {border-radius:0 10px 10px 0;} /*라운드처리 태그 왼쪽부터 시계방향으로*/
li:nth-child(2n) {background-color:#ff0003;} /*짝수 상자를 수정*/
li:nth-child(2n+1) {background-color:#c84646;} /*홀수 상자를 수정*/
li:hover { background-color: blue; color:white; font-weight: 900;} /*마우스가 올라가면 색상이 변경
background 배경 color 글자색 font-weight 글자 두께 변경*/
</style>
</head>
<body>
<ul>
<li>첫 번째</li>
<li>두 번째</li>
<li>세 번째</li>
<li>네 번째</li>
<li>다섯 번째</li>
<li>여섯 번째</li>
<li>일곱 번째</li>
</ul>
</body>
</html>
float:left-> 옆으로 나열한다.
list-style-> li에 있는 o을 없애버린다.
padding-> 사각형 상하좌우 간격을 조절한다.
backgroung-color->배경 색상을 넣는다.
li:first-child {border-radius:10px 0 0 10px;} -> 맨 처음 사각형에 라운드처리를 한다. 4개의 숫자가 있는데 왼쪽위부터 순서대로 적용
li:last-child {border-radius:0 10px 10px 0;} -> 맨 마지막 사각형에 라운드처리를 한다. 4개의 숫자가 있는데 왼쪽위부터 적용
li:nth-child(2n) {background-color:#ff0003;} -> 짝수번째 사각형에 배경색상을 적용한다.
li:nth-child(2n+1) {background-color:#c84646;} ->홀수번째 사각형에 배경색상을 적용한다.
li:hover { background-color: blue; color:white; font-weight: 900;} ->마우스가 사각형 위로 올라갔을때 사각형 색상이 변경 배경색상은 파란색으로, 글자색은 하얀색으로 폰트는 두껍게 변경
