๋ง์ง ์์๋ ๋ง์ง๋ผ๋ฆฌ ๊ฒน์ณ์ ๋ ํฐ ๋ง์ง๋ง ๋จ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค.
1. ๋ฐ์์ํฉ
- ์ธ์ ํ์ ๊ฐ์ ๋ฐ๊นฅ ๋ง์ง
- ๋น ๋ธ๋ก
- ๋ถ๋ชจ์ ์์์ ๋ถ๋ฆฌํ๋ ์ปจํ ์ธ ๊ฐ ์์ ๋
2. ์์
- ์ธ์ ํ์ ๊ฐ์ ๋ฐ๊นฅ ๋ง์ง
<body>
<div class="first">first</div>
<div class="second">second</div>
</body>.first, .second {
margin: 10px 0;
}- ๋ถ๋ชจ์ ์์์ ๋ถ๋ฆฌํ๋ ์ปจํ ์ธ ๊ฐ ์์ ๋
<body>
<div class="parent">
<div class="first__child">first</div>
<div class="second__child">second</div>
<div class="last__child">last</div>
</div>
</body>div {
margin: 10px 0;
}
...