1. CSS ์ ํ์ ํ ๋์ ๋ณด๊ธฐ
| ์ ํ์ | ์์ | ์ค๋ช |
| ํ๊ทธ ์ ํ์ | h1 | ํ๊ทธ๋ก ์์๋ฅผ ์ ํ |
| ์ ์ฒด ์ ํ์ | * (์ ๋๋ฒ์ ์ ํ์) | ๋ชจ๋ ์์๋ฅผ ์ ํ |
| div * | ํน์ ์์์ ์์ ์์ ๋ชจ๋ ์ ํ | |
| ํด๋์ค ์ ํ์ | .slide | ํด๋์ค๋ช ์ผ๋ก ์์๋ฅผ ์ ํ |
| ์์ด๋ ์ ํ์ | #logo | ์์ด๋๋ช ์ผ๋ก ์์๋ฅผ ์ ํ |
| ํ์ ์ ํ์ | .slide h2, .slide .btn | ํ์(์์) ์์๋ฅผ ์ ํ |
| ์์ ์ ํ์ | .slide > div | ์ ์ ํ์์ ๋ฐ๋ก ๋ฐ ์์ ์์ ์ ํ |
| ์ธ์ ํ์ ์ ํ์ | .banner + div | ์ ์ ํ์์ ํ์ ์์ ๋ฐ๋ก ๋ค์ ์์ ์ ํ |
| .banner ~ div | ์ ์ ํ์์ ํ์ ์์ ์ค ๋ ๋ฒ์งธ ์์ ๋ชจ๋ ์ ํ | |
| ๊ทธ๋ฃนํ | h1, h2color: red | ์ฝค๋ง๋ก ์ ํ์๋ฅผ ๋์ดํ์ฌ ์ ํ |
| ์์ฑ ์ ํ์ | a[target], a[target="_blank"] | ์์ฑ๋ช ๋๋ ์์ฑ๋ช ์ ๊ฐ์ผ๋ก ์์ ์ ํ |
| ๊ฐ์ ์ ํ์ | :visited | ๋ฐฉ๋ฌธํ ๋งํฌ ์ ํ |
| :hover | ์์์ ๋ง์ฐ์ค ์ฌ๋ฌ์ ๋ | |
| :active | ๋งํฌ ๋๋ฅด๋ ์๊ฐ | |
| :focus | ๋งํฌ, ๋ฒํผ, ์ ๋ ฅ์์ ๋ฑ์ ์ด์ ์ด ์ด๋ํ์ ๋ | |
| :input:checked | input์ ์ฒดํฌ๋์์ ๋ | |
| ์์ฌ ์์ ์ ํ์ | h1:after content:'-'; | :before, :after (๋ด์ฉ์ ์ ๋ค) |
| ๊ตฌ์กฐ ์ ํ์ | :first-child, :last-child | ์ฒซ์งธ ์์, ๋ง๋ด ์์ |
| :nth-child(2n), :nth-child(2n+1) | ํน์ ๋ฒ์งธ ์์๋ฅผ ์์์ผ๋ก ์ ํ | |
| :nth-child(even), :nth-child(odd) | ์ง์, ํ์ ์์ ์ ํ | |
| ํํ๊ตฌ์กฐ ์ ํ์ | :first-of-type, :last-of-type, :nth-of-type(2n) | ๊ฐ์ ํ๊ทธ ์ข ๋ฅ ์ค ์ฒซ์งธ, ๋ง๋ด, ํน์ ๋ฒ์งธ ์์ ์ ํ |
| ๋ถ์ ์ ํ์ | :not(p) | ๊ดํธ ์ ์ ํ์์ ๋ฐ๋ ์์๋ฅผ ์ ํ |
| li:not(last-child) | ๋ง๋ด์์๋ฅผ ์ ์ธํ๊ณ ๋๋จธ์ง ์์ ์ ํ |
2. ์์ฃผ ์ฌ์ฉ๋๋ ์ ํ์์ ์ข ๋ฅ
๊ธฐ๋ณธ์ ์ธ ์ ํ์
2-1. ํ๊ทธ์ ํ์
ํ๊ทธ๋ช { /CSS ์ฝ๋ ๋ด์ฉ/}
HTML์ ํ๊ทธ๋ช ์ผ๋ก CSS์ ์ ์ฉํ๋ค. ํด๋น ํ๊ทธ๋ช ์ ๊ฐ์ง๋ชจ๋ ์์๋ฅผ ์ ํ
2-2. ํด๋์ค ์ ํ์
.class๋ช { /*CSS ์ฝ๋ ๋ด์ฉ*/}
class์ด๋ฆ์ class์ ๊ฐ์ผ๋ก ๊ฐ์ง๋ ๋ชจ๋ ํ๊ทธ๋ฅผ ์ ํ
2-3. ์์ด๋ ์ ํ์
#id๋ช { /CSS ์ฝ๋ ๋ด์ฉ/}
id์ด๋ฆ์ id๊ฐ์ผ๋ก ๊ฐ์ง๋ ๋ชจ๋ ํ๊ทธ๋ฅผ ์ ํํ๋ค.
*ํ ํ์ด์ง ๋ด์์ id๊ฐ์ ํ๋(๊ณ ์ ๊ฐ)
2-4. ๊ธฐ๋ณธ์์ฑ ์ ํ์
.ํด๋์ค๋ช [href = “/”]{ /CSS ์ฝ๋ ๋ด์ฉ/}
[์์ฑ]{ /CSS ์ฝ๋ ๋ด์ฉ/}
[์์ฑ=๊ฐ]{ /CSS ์ฝ๋ ๋ด์ฉ/}
htmlํ๊ทธ ์ค ํด๋น ์์ฑ๊ณผ ์ผ์นํ๋ ์์๋ฅผ ์ ํํ๋ค
[์์์ฝ๋1]
<button type="button">๋ฒํผA</button>
<button type="submit">๋ฒํผB</button><style>
[type="button"]{
background-color: orange;
}
</style>
[๊ฒฐ๊ณผ1]
[์์์ฝ๋2]
<body>
<a class="className" href="/">
Start
</a>
<a href="className">
End
</a>
</body><style>
.className[href="/"]{
background-color: deepskyblue;
}
</style>
[๊ฒฐ๊ณผ2]
๊ฒฐํฉ์
์์์ ์ธ๊ธํ ์ ํ์๋ค์ ๊ฒฐํฉํ์ฌ ์ฌ์ฉํ ์ ์๋๋ก ํด ์ค.
2-5. ๊ทธ๋ฃน ์ ํ์
์ ํ์1, ์ ํ์2, ์ ํ์3{ /CSS ์ฝ๋ ๋ด์ฉ/}
์ฌ๋ฌ ์ ํ์๋ฅผ ํ๋์ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ ๋ ์ฌ์ฉ
{ /CSS ์ฝ๋ ๋ด์ฉ/}๋ฅผ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ์ธ ๋ชจ๋ ์ ํ์์ ์์์ ์ ์ฉ
2-6. ์์ ์ ํ์
๋ถ๋ชจ ์ ํ์ > ์์ ์ ํ์{ /CSS ์ฝ๋ ๋ด์ฉ/}
์์ ์ ํ์๋ ๋ถ๋ชจ ์์ ํ์์ ์๋ ์์ ์์๋ฅผ ์ ํ. ์์(๊น์ด 2์ด์) ์์๋ ์ ํํ์ง ์์.
<body>
<div class="parent">
<h1>first child</h1>
<h1>second child</h1>
<h2>kid</h2>
</div>
</body>
2-7. ํ์ ์ ํ์
์ ํ์1 ์ ํ์2{ /CSS ์ฝ๋ ๋ด์ฉ/}
์ ํ์์ ๋ฒ์๋ฅผ ํน์ ๋ถ๋ชจ ์์(์ ํ์ 1)์ ํ์ ์์(์์)์ผ๋ก ํ์ . ์ ํ์์ ์ ํ์ ์ฌ์ด๋ฅผ ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถํ๋ค.
์์ ๋ฟ๋ง์ด ์๋๋ผ ์์ ๋ชจ๋ ์์์ ์ ์ฉ๋๋คโ โ โ
<body>
<div class="parent">
<h1>first child</h1>
<h1>second child</h1>
<h2>kid</h2>
<div>
<h2>kid2</h2>
</div>
</div>
</body>
2-8. ์ธ์ ํ์ ์ ํ์
์ ํ์1 + ์ ํ์2{ /CSS ์ฝ๋ ๋ด์ฉ/}
์ธ์ ํ์ ์ ํ์๋ ์ ํ์1์ ๋ฐ๋ก ๋ค์์ ์ค๋ ํ์ ์์๋ฅผ ์ ํ
์ ํ์ 1์ ์์๋ ์ ํํ์ง ์๊ณ ์ธ์ ํ ์ ํ์ 2์ ์์๋ง์ ์ ํํจ.
<body>
<h1>Title</h1>
<p>contents1</p>
<p>contents2</p>
<p>contents3</p>
</body><style>
h1 + p{
background-color: mediumaquamarine;
}
</style>
2-9. ์ผ๋ฐํ์ ์ ํ์
์ ํ์1 ~ ์ ํ์2{ /CSS ์ฝ๋ ๋ด์ฉ/}
์ผ๋ฐ ํ์ ์ ํ์๋ ์ ํ์1 ๋ค์์ ์ค๋ ์ ํ์ 2๊ฐ ์ ์ฉ๋๋ ๋ชจ๋ ํ์ ์์๋ค์ ์ ํํจ.
์ธ์ ํ์ ์ ํ์๊ฐ ์ ํ์ 1 ๋ค์์ ์ค๋ 1๊ฐ๋ง ์ ํ VS ์ผ๋ฐ ํ์ ์ ํ์๋ ๋ชจ๋ ํ์ ์์ ์ ํํ๋ ์ฐจ์ด
<body>
<h1>Title</h1>
<p>contents1</p>
<p>contents2</p>
<p>contents3</p>
</body><style>
h1 ~ p{
background-color: mediumaquamarine;
}
</style>
๊ฐ์ํด๋์ค ์ ํ์
๊ฐ์ํด๋์ค ์ ํ์๋? ์์์ ์ํ๋ฅผ ์ด์ฉํ์ฌ ์ ํ์๋ฅผ ์ง์ ํ๋ ๋ฐฉ๋ฒ
2-10. ๋์ ๊ฐ์ํด๋์ค ์ ํ์
:hover
์์์ ๋ง์ฐ์ค ์ปค์๊ฐ ์ฌ๋ผ๊ฐ๋ฉด ํด๋น ํ๊ทธ๊ฐ ์ ํ์๋ก ์ง์ . ๋ฒํผ์ด๋ nav ๋ฐ์ ์ ์ฉ
:active
์์๋ฅผ ๋ง์ฐ์ค๋ก ํด๋ฆญํ๋ ๋์ ํด๋น ํ๊ทธ๊ฐ ์ ํ์๋ก ์ง์
์ ๋ ฅ ์์์ ๊ฐ์ ํด๋์ค ์ ํ์
์ธํ ๋ฑ์ ์์์ ํน์ ์ํ๊ฐ ๋ง์กฑ๋๋ฉด ์ ํ์๋ก ํด๋น ์์๋ฅผ ์ง์ ํ๊ฒ ๋๋ค.
:checked
์ฒดํฌ๋ฐ์ค๊ฐ ํ์๋์ด์์ผ๋ฉด ์ ํ์๋ก ์ง์ ํ๋ค.
:focus
:์ ๋ ฅ ์์์ ์ปค์๊ฐ ํ์ฑํ๋๋ฉด ์ ํ์๋ก ์ง์
2-11. ๊ตฌ์กฐ์ ๊ฐ์ํด๋์ค ์ ํ์
:first-child
E์ ์ฒซ๋ฒ์งธ ์์ ์์๋ฅผ ์ง์ ํ๋ค.(์์ ์์์์ E๊ฐ ์ฒ์ ๋์ฌ ๊ฒฝ์ฐ ์ ํํ๋ค)
E:last-child
E์ ๋ง์ง๋ง ์์ ์์๋ฅผ ์ง์ ํ๋ค.(์์ ์์์์ E๊ฐ ๋ง์ง๋ง์ผ๋ก ๋์ฌ ๊ฒฝ์ฐ ์ ํํ๋ค)
E:nth-child(n)
E์์๊ฐ ๋ถ๋ชจ ์์์ ์์ ์์ ์ค n๋ฒ์งธ ์์์ด๋ฉด ์ ํ
- odd : ํ์๋ก ์ง์
- even : ์ง์๋ก ์ง์
E:nth-last-child(n)
E์์๊ฐ ๋ถ๋ชจ ์์์ ์์ ์์ ์ค ๋ค์์ n ๋ฒ์งธ์ด๋ฉด ์ ํ
E:nth-of-type(n)
๋ถ๋ชจ ์์์ ์์ ์์ ์ค n๋ฒ์งธ๋ก ๋์ค๋ E ์์๋ฅผ ์ ํ
E:nth-last-of-type(n)
๋ถ๋ชจ ์์์ ์์ ์์ ์ค ๋ค์์ n๋ฒ์งธ๋ก ๋ฑ์ฅํ๋ E ์์ ์ ํ
E:fitst-of-type
๋ถ๋ชจ ์์์ ์์ ์์ ์ค ์ฒ์ ๋ฑ์ฅํ๋ E ์์ ์ ํ
E:last-of-type
๋ถ๋ชจ ์์์ ์์ ์์ ์ค ๋ง์ง๋ง์ผ๋ก ๋ฑ์ฅํ๋ E ์์ ์ ํ
[๊ตฌ์กฐ์ ๊ฐ์ํด๋์ค ์ ํ์ ์์]
<body>
<div>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</div>
<div>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</div>
<div>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
</div>
</body>
[first-child]
<style>
h2:first-child{
background-color: aqua;
}
</style>
[nth-child(๋ช๋ฒ์งธ)]
<style>
div > h2:nth-child(3){
background-color: aquamarine;
}
</style>
3. ์ ํ์ ์ฐ์ ์์
CSS ์ ํ์์๋ ์ฐ์ ์์๊ฐ ์๋ค. ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์์น์ ๋์ผํ ์ ํ์์ ๊ฒฝ์ฐ CSS ์คํ์ผ ์ค ํ๋จ์ ์์์๋ก ์ฐ์ ์์๊ฐ ๋๋ค.์๋ํ๋ฉด ํ๋จ์ ์๋ ์์ฑ์ ๊ฐ์ฅ ๋์ค์ ์์ ๋๊ฑฐ๋ ์๋ก ์ถ๊ฐ๋ ์์ฑ์ด๊ธฐ ๋๋ฌธ์ด๋ค. ๋ ์ข ๋ ๊ตฌ์ฒด์ ์ผ๋ก ์ ํํ ๊ฒ์ด ์ฐ์ ์์๊ฐ ๋๋ค. (์ ์ ๋์์๋ก ์ฐ์ ์์ ๋์)
| ์ ํ์ | * | Tag | Class | Id | Inline Style | !Important |
| ์ ์ | 0 | 1 | 10 | 100 | 1,000 | 10,000 |
