<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๊ฐ์์ ํ์(์ค์!!)</title>
</head>
<style>
section{
width: 500px;
height: 500px;
background-color: #c8e5ff;
}
/* section"์ด๋ฉด์" ์ฒซ๋ฒ์งธ ์์์ธ ๊ฒ */
section:first-child{
background-color: #d4ffca;
}
/* section"์ด๋ฉด์" ๋ง์ง๋ง ์์์ธ ๊ฒ */
section:last-child{
background-color: #d4ffca;
}
li:nth-child(odd){ /* even: ์ง์ odd: ํ์ */
color: red;
}
li:nth-child(2){ /* ๋๋ฒ์งธ์์์ span์ด๋ฏ๋ก ํด๋นํ๋๊ฒ ์์ */
color: blue;
}
/* li์ธ๋ฐ ์ฒซ๋ฒ์งธ ์์์ด ์๋ li */
li:not(:first-child){
background-color: #ffd6de;
}
li:first-child::after {
/*
before: ์์ ๋ด์ฉ์ถ๊ฐ/ after: ๋ค์ ๋ด์ฉ์ถ๊ฐ
๋จ์ : ๊ฒฐ๊ณผ์ฐฝ์์ ๋๋๊ทธ ์๋จ, ์น์ฌ์ดํธ์์ f12ํ์๋ ๋ด์ฉ์ด ๋์ค์ง์์
*/
content: "NEW!!";
background-color: red;
color: white;
font-weight: bold;
border-radius: 2px;
margin: 0 10px;
padding: 0 10px;
}
</style>
<body>
<!-- ๊ฐ์ํด๋์ค๋ ์์ ์ ํ์ ์์ด๋ ๋ถ๋ชจ ์ ํํ๋ผ๋๊ฑด ์์(= ๊ฑฐ๊พธ๋ก ๊ฑฐ์ฌ๋ฌ ์ฌ๋ผ๊ฐ ์ ์์) -->
<div>
<ul>
<li>1</li>
<span>23</span>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</div>
<main>
<section>SECT1</section>
<section>SECT2</section>
<section>SECT3</section>
</main>
</body>
</html>
