<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ํด๋์ค_์์ด๋_์ฌ๋ฌ๊ฐ</title>
</head>
<style>
div, section, article{ /* ๋ชจ๋ ๋ค ์ ํํ ๋
์ฃผ์: ,(์ฝค๋ง) ํ์ธ!! ์์ผ๋ฉด ํ์์ ํ์๊ฐ ๋์ด๋ฒ๋ฆผ! */
color: green;
}
.num2 { /* num2 ํด๋์ค ๊ฐ์ ๊ฐ์ง ๋ชจ๋ ์์๋ฅผ ์ ํ */
color: red;
}
article.num2{
/* article์ด๋ฉด์ num2 ํด๋์ค๊ฐ์ธ ์์ ์ ๋ถ ์ ํ
article.num2 << ๋์ด์ฐ๊ธฐ ์ ๋!! ํ์ง์๊ธฐ ์กฐ์ฌ!! */
color: darkgoldenrod;
}
.bold{
font-weight: bold;
}
/* number4๋ผ๋ id๊ฐ ๋ถ์ฌ๋ ์์์๊ฒ ์ ์ฉํด! ๋ ๊ฐ๋ ฅํ๋ค(ํด๋์ค ์ด๋ฆ๋ณด๋ค id๊ฐ ์ฐ์ ์ ์ฉ) */
/* CSS๋ ์ ํํ๊ฒ ํํํ ์๋ก ์ฐ์ ์ด ๋๋ค. */
/* ID๋ ์น ํ์ด์ง ํ๋๋น ๋ฌด์กฐ๊ฑด ํ๋(๊ทธ id๊ฐ ๋ถ์ฌ๋ ์์๊ฐ ํ๋๋ผ๋ ๋ป) */
#number4{
font-size: 30px;
}
section{
font-size: 10px;
}
</style>
<body>
<div>1</div>
<div class="num2">2</div>
<div>3</div>
<div>4</div>
<section>1</section>
<section class="num2 bold">2</section>
<!--num2 bold๋ ํ๊ฐ์ ํด๋์ค๊ฐ ์๋๊ณ , 2๊ฐ์ ํด๋์ค -->
<section>3</section>
<section id="number4">4</section>
<article>1</article>
<article class="num2">2</article>
<article>3</article>
<article>4</article>
</body>
</html>
