CSS ๊ธฐ๋ณธ ๋ฌธ๋ฒ
CSS๋ฅผ ์ ์ํ๋ ๋ฐฉ๋ฒ์ผ๋ก๋ ๋ด๋ถ ์คํ์ผ์ํธ, ์ธ๋ถ ์คํ์ผ์ํธ, ์ธ๋ผ์ธ ์คํ์ผ์ํธ ๋ฑ์ด ์์ต๋๋ค. ์ค์ ๋ก๋ ์ธ๋ถ ์คํ์ผ์ํธ๋ฅผ ์ฃผ๋ก ์ฌ์ฉํฉ๋๋ค. ์ธ๋ผ์ธ ์คํ์ผ์ํธ๋ ๋์ฒด๋ก ๊ฑฐ์ ์ฌ์ฉํ์ง ์์ผ๋, ์ฐ์ ์์๊ฐ ๊ฐ์ฅ ๋๊ธฐ ๋๋ฌธ์ ํ์ํ ๊ฒฝ์ฐ์๋ ํธ๋ฆฌํ๊ฒ ์ฌ์ฉํ ์ ์์ต๋๋ค. ์ฐธ๊ณ ๋ก, CSS์์์ ์ฃผ์์ /* */๋ก ํํํฉ๋๋ค.
๋ด๋ถ ์คํ์ผ์ํธ
CSS๋ฅผ HTML ๋ฌธ์ ์์ <style> ํ๊ทธ๋ก ๊ธฐ์ฌํ์ฌ HTML ๋ฌธ์ ์์ CSS๊ฐ ํจ๊ป ์ ์ฅ๋๋๋ก ํ๋ ํํ์ ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>๋ด๋ถ ์คํ์ผ์ํธ</title>
<style type = "text/css">
p {color : red;}
</style>
</head>
<body>
<p>๋ฉ์ง ๋นจ๊ฐ์ ๊ธ์</p>
</body>
</html>
๊ฒฐ๊ณผ ๋ณด๊ธฐ
์ธ๋ถ ์คํ์ผ์ํธ
์คํ์ผ ์์ฑ๋ค์ ๋ฐ๋ก ์ ์ฅํ์ฌ HTML ๋ฌธ์์ ํ์ผ๋ช ์ผ๋ก ์ฐ๊ฒฐํ ์ ์์ต๋๋ค. ์ด๋ ์คํ์ผ์ *.css ํ์ฅ์๋ฅผ ๊ฐ์ง ๋ณ๋์ ํ์ผ๋ก ์ ์ฅํ๊ณ , HTML์์๋ <link> ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์ ์ธํฉ๋๋ค. ๋ด๋ถ ์คํ์ผ์ํธ๋ ๊ทธ ์คํ์ผ์ด ๊ธฐ์ ๋ ํ์ด์ง์๋ง ์ ์ฉ๋๋ ๋ฐ๋ฉด, ์ธ๋ถ ์คํ์ผ์ํธ๋ ๊ทธ ์คํ์ผ์ ์ ์ธํ ๋ชจ๋ HTML ํ์ด์ง์ ์ ์ฉ๋ฉ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ธ๋ถ ์คํ์ผ์ํธ</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>๋ฉ์ง ๋นจ๊ฐ์ ๊ธ์</p>
</body>
</html>
์ธ๋ถ ์คํ์ผ ์ํธ(CSSํ์ผ)์๋ ๋ค์๊ณผ ๊ฐ์ด, @charset "utf-8"; @charset "euc-kr"; ๋ฑ html ๋ฌธ์์์ ์ง์ ํ ๊ฒ๊ณผ ๋์ผํ ๋ฌธ์์ ์ ์ง์ ํฉ๋๋ค.
@charset "utf-8";
p {color: red;}
๊ฒฐ๊ณผ ๋ณด๊ธฐ
@import
@import๋ CSS ์์ผ๋ก ๋ค๋ฅธ CSS ํ์ผ์ ๋ถ๋ฌ๋ค์ผ ๊ฒฝ์ฐ ์ฌ์ฉํฉ๋๋ค. CSS์ ๋งจ ์์ค์ ๊ธฐ์ ํฉ๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์คํ์ผ์ํธ ํฌํจ</title>
<style type="text/css">
@import url("style.css");
</style>
</head>
<body>
<p>๋ฉ์ง ๋นจ๊ฐ์ ๊ธ์</p>
</body>
</html>
๊ฒฐ๊ณผ ๋ณด๊ธฐ
๋ํ, @import๋ ์ด๋ค CSS ํ์ผ ์์ ๊ณตํต CSS๋ฅผ ๋ถ๋ฌ๋ค์ผ ๊ฒฝ์ฐ์๋ ์ฌ์ฉํ ์ ์์ต๋๋ค.
@charset "utf-8";
@import url("common.css");
@import๋ ๊ณตํต์ผ๋ก ๋ค์ด๊ฐ์ผ ํ ์คํ์ผ์ ๋ฐ๋ก ์ ์ฅํ์ฌ ๋ค๋ฅธ CSS์ ์ฝ์ ์์ผ ์ฌ์ฉํ ์ ์๋๋ก ํด์ค๋๋ค. ๊ทธ๋ฌ๋ CSSํ์ผ์ ๋๋ฌด ์ฌ๋ฌ ๊ฐ๋ก ๋ถ๋ฆฌํ๋ฉด ์คํ๋ ค ๋ณต์กํด์ง๋ฏ๋ก, ์ฉ๋์ด ์ ๋ค๋ฉด ํ๋์ ํ์ผ๋ก ์ ์ฅํ๋ ๊ฒ์ด ์ข์ต๋๋ค.
์ธ๋ผ์ธ ์คํ์ผ(inline style)
์ธ๋ผ์ธ ์คํ์ผ์ ํ๊ทธ์ ์ง์ CSS๋ฅผ ์ ์ํด์ฃผ๋ ๊ธฐ๋ฒ์ผ๋ก, ํด๋น ์์์ style=" " ํ์์ผ๋ก ๊ธฐ์ ํฉ๋๋ค. ์ธ๋ผ์ธ ์คํ์ผ์ ๋ด๋ถ์คํ์ผ์ด๋ ์ธ๋ถ์คํ์ผ์์ ๊ธฐ์ ๋ ์์ฑ๋ณด๋ค ์ฐ์ ์ ์ผ๋ก ์ ์ฉ๋๋ฏ๋ก, ์ฐ์ ์์๊ฐ ์ ๋์ ์ผ๋ก ๋์์ผ ํ ๊ฒฝ์ฐ์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ ์คํ์ผ์ ๊ณตํต CSS๋ก ์์ ํ ์ ์๊ณ , ์ผ์ผ์ด html์ ์ด์ด์ ํธ์งํด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ผ๋ฐ์ ์ผ๋ก ๋ง์ด ์ฌ์ฉํ์ง๋ ์์ต๋๋ค.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ธ๋ผ์ธ ์คํ์ผ</title>
</head>
<body>
<p style="color: red;">๋ฉ์ง ๋นจ๊ฐ์ ๊ธ์</p>
</body>
</html>
๊ฒฐ๊ณผ ๋ณด๊ธฐ
'CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| CSS : ์ด๋ฏธ์ง ์คํ๋ผ์ดํธ(image sprite) (5) | 2022.08.22 |
|---|---|
| CSS : SCSS ์์๋ณด๊ธฐ (10) | 2022.08.18 |
| CSS : ์ ๋๋ฉ์ด์ ๋ง๋ค๊ธฐ : ๊ผฌ๋ฆฌ๋ฅผ ํ๋๋ ๊ฐ์์ง (9) | 2022.08.18 |
| CSS : ๋ฏธ๋์ด์ฟผ๋ฆฌ(media query) (5) | 2022.08.15 |
| CSS : ๋นํธ๋งต ๋ฐฉ์๊ณผ ๋ฒกํฐ ๋ฐฉ์ (10) | 2022.08.09 |
๋๊ธ