CSS๋ HTML ํ๊ทธ๋ค์ ๋์์ธ์ ์
ํ์ฃผ๋ ๊ฒ์ด๋ค.
HTML์ด ํค๋, ๋ฌธ๋จ, ํ
์ด๋ธ ๋ฑ์ผ๋ก ์ ๋ณด๋ฅผ ์กฐ์งํํ๋ ๊ตฌ์กฐ๋ฅผ ์ ๊ณตํ๋ค๋ฉด, CSS๋ HTML์ด ์๋ฆ๋ค์ ๋ณด์ด๋๋ก ์คํ์ผ์ ์
ํ๋ ๊ฒ์ด๋ค.
๋ฌธ๋ฒ์ผ๋ก๋ ์๋์ ๊ฐ๋ค.(CSS ๋ฌธ๋ฒ๋ ์ฝ๋ค.)
์ ํ์ {์์ฑ:๊ฐ;
}
์ ํ์ {์์ฑ:๊ฐ;
} /* ์ฃผ์์ ์ด๋ ๊ฒ ์์ฑํ๋ค. */
html ํ์ผ๊ณผ ๋ถ๋ฆฌํ์ฌ cssํ์ผ์ ๋ฐ๋ก ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค.
htmlํ์ผ์์ ์ด๋ cssํ์ผ์ด ์ฐ์๋์ง ๋ธ๋ผ์ฐ์ ์ ์๋ ค์ผ ํ๋ฏ๋ก, ๋งํฌ๋ฅผ ํด์ฃผ๋ ํ๊ทธ๋ฅผ ์ถ๊ฐํด์ผ ํ๋ค.
๋ฐฉ๋ฒ์ head
ํ๊ทธ ์์ link
ํ๊ทธ๋ฅผ ์ด์ฉํ์ฌ ์ฐ๊ฒฐ์์ผ์ค๋ค.
<head>
<title>์๊ธฐ์๊ฐ</title>
<link rel="stylesheet" type="text/css" href="ํ์ผ์ด๋ฆ.css">
</head>
link
link
ํ๊ทธ๋ก ์ฌ์ฉํ cssํ์ผ์ ๋งํฌํด์ค๋ค.
href href ์์ฑ์ css ํ์ผ ๊ฒฝ๋ก๋ฅผ ์์ฑํ๋ค.
typelink
ํ๊ทธ๋ก ์ฐ๊ฒฐ๋๋ ํ์ผ์ด ์ด๋ค ๊ฒ์ธ์ง ์๋ ค์ค๋ค. ์ฌ๊ธฐ์ css file์ ์ฐ๊ฒฐํ๋ฏ๋ก type๊ฐ์ ํญ์ "text/css"
rel rel์ HTML file๊ณผ CSS file๊ณผ์ ๊ด๊ณ๋ฅผ ์ค๋ช ํ๋ ์์ฑ์ด๋ค. cssํ์ผ์ ๋งํฌํ ๋๋ ํญ์ "stylesheet"๊ฐ์ ๋์ !
html ํ์ผ ๋ด์ css๋ฅผ ์์ฑํ ์ ์๋ ๋ฐฉ๋ฒ์ด๋ค.
<head>
<title>์๊ธฐ์๊ฐ</title>
<style>
์ ํ์ {์์ฑ:๊ฐ;
}
์ ํ์ {์์ฑ:๊ฐ;
}
</style>
</head>
- html ํ์ผ์ HTML ์ฝ๋๋ ์์ฑํ๊ณ , CSS๋ ์์ฑํ๋ ํธํ๊ณ ๋น ๋ฅธ ๋ฐฉ๋ฒ
- ๊ธฐ๋ฅ์ ์ผ๋ก(HTML๊ตฌ์กฐ์ ๋์์ธ) ๋ถ๋ฆฌ๋์ง ์์๊ธฐ ๋๋ฌธ์ ์ ์ง๋ณด์์ ์ ํฉํ์ง ์๋ค.
- HTML์ ์์ ํ๋ ค๋ฉด html ํ์ผ์ ํ์ธํ๊ณ , ๋์์ธ์ ์์ ํ๋ ค๋ฉด cssํ์ผ์ ํ์ธํ๋ ๊ฒ์ด ๊ฐ๋ฐํ๊ธฐ ์ข๋ค.
ํ๊ทธ style ์์ฑ์ ์ง์ ์์ฑํ ์ ์๋ค.
<a herf="1.html" style="์์ฑ:๊ฐ;">
- ๋น ๋ฅด๊ณ ํธํ๋ค.
- ์ ์ฉํด์ผํ ์คํ์ผ์ด ๋ง์์ง๋ฉด ์ฝ๋ ๊ฐ๋ ์ฑ์ด ๋จ์ด์ง๋ค.
- html ํ๊ทธ์ style์ฝ๋๊ฐ ํผ์ฌ๋์ด ์์ด ์ ์ง๋ณด์์๋ ์ข์ง ์๋ค.