CSS(Cascading Style Sheets)
HTML์ด๋ XML๊ณผ ๊ฐ์ ๊ตฌ์กฐํ๋ ๋ฌธ์(Document)์ ๊ฐ ์์(Element)๋ฅผ ํ๋ฉด์ ์ด๋ป๊ฒ ๋ ๋๋ง(style-์คํ์ผ, ๋ ์ด์์ ๋ฑ) ํ ๊ฒ์ธ์ง ์ ์ํ๊ธฐ ์ํ ์ธ์ด
CSS ๊ตฌ๋ฌธ
- ๊ท์น ๊ธฐ๋ฐ ์ธ์ด → ์๋์ ๊ฐ์ด ๊ท์น์ ์ง์ ํ ๋ ์คํ์ผ์ ์ง์ ํ HTML ์์๋ฅผ ์ ํ
h1 {
color: blue;
font-size: 4em;
}
1. Selector
HTML ์์์ style์ ์ ์ํ๊ธฐ ์ํด์ ์คํ์ผ์ ์ ์ฉํ HTML ์์๋ฅผ ์ ํํด์ผ ํ๋ค.
- Rule Set(Rule)์ CSS Rule set์ HTML ๋ฌธ์์์ body ์์๋ฅผ ์ ํํ ํ ์ ํ๋ body ์์์ ์คํ์ผ์ ์ ์ธ ๋ธ๋ก์์ ์ ์ํ๊ณ ์๋ค.
→ Rule Set์ ์งํฉ์ ์คํ์ผ ์ํธ(Style Sheet)๋ผ๊ณ ํ๋ค.
body { background-color: azure; }
2. Property
- selector๋ก HTML ์์๋ฅผ ์ ํํ๊ณ ์ค๊ดํธ({}) ๋ด์ ํ๋กํผํฐ(์์ฑ)์ ๊ฐ์ ์ง์ ํ์ฌ style์ ์ ์ํ ์ ์๋ค.
- ์ฌ๋ฌ ํ๋กํผํฐ๋ฅผ ์ฐ์ํด์ ์ง์ ํ๋ ค๋ฉด ์ธ๋ฏธ์ฝ๋ก ์ผ๋ก ๊ตฌ๋ถํ๋ค.
- ํ๋กํผํฐ๊ฐ ๋ ์ ์๋ ๊ฒ๋ค์ ์ด๋ฏธ ํ์ค ์คํ์ผ๋ก ์ ์๋์ด ์๋ค.
span {
color: red;
}
3. Value
- property์ ๊ฐ์ ํด๋น property์ ์ฌ์ฉํ ์ ์๋ ๊ฐ์ผ๋ก ํค์๋, ํฌ๊ธฐ ๋จ์, ์์ ํํ ๋จ์ ๋ฑ์ด ๋ ์ ์๋ค.
span {
font-size: 20px;
}
4. HTML๊ณผ CSS ์ฐ๋
HTML ์๋ CSS๊ฐ ํฌํจ๋๊ณ CSS๋ฅผ ๊ฐ์ง์ง ์๊ณ ์๋ค๋ฉด ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ผ๋ก ์ ์ฉํ๋ CSS์ ์ํด ๋ ๋๋ง๋๋ค.
4.1 Link style
์ธ๋ถ์ CSS ํ์ผ์ ๋ก๋ํ๋ ๋ฐฉ์
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/example.css">
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
4.2 Embedding style
HTML ๋ด๋ถ์ CSS๋ฅผ ํฌํจ์ํค๋ ๋ฐฉ์
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: blue; }
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
4.3 Inline style
HTML ์์ ์์ฒด style ํ๋กํผํฐ์ CSS๋ฅผ ๊ธฐ์ ํ๋ ๋ฐฉ์
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red">Hello World!</h1>
</body>
</html>
5. Reset CSS
๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ๋ default ์คํ์ผ์ ๊ฐ์ง๊ณ ์์ด CSS๊ฐ ์์ด๋ ๋์ํ๋ค. → ์น ๋ธ๋ผ์ฐ์ ๋ง๋ค default ์คํ์ผ์ด ๋ค๋ฅด๋ฏ๋ก ์ฃผ์
- ์ฉ๋
- ๊ธฐ๋ณธ์ ์ธ HTML ์์์ CSS๋ฅผ ์ด๊ธฐํ → ๋ธ๋ผ์ฐ์ ๋ณ๋ก ์ ๊ฐ๊ฐ์ธ default ์คํ์ผ์ ํ๋์ ์คํ์ผ๋ก ํต์ผ
- ์ข
๋ฅ
- Eric Meyer’s reset
- normalize.css
6. CSS Versions
| Version | Year |
| CSS3 | 2005 |
| CSS2 | 1998 |
| CSS1 | 1996 |
