๋๋์ด CSS์ ์
๋ฌธํ๋ค.
๊ฐ๋ฉ์ด๋, ๋ผ๋๋ง ์์ด์ ํ์ธกํ html์ ๋ณผ๋๋ง๋ค ์ด์ง ์์ฌ์ ๋๋ฐ
๋๋ ๋์ค์ ๋ค์ด๋ฒ ๊ฐ์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค ์ ์๊ฒ ๋ค ๋ผ๋ ๋ง์์ด
CSS๋ก ์กฐ๊ธ์ด๋๋ง ๊ฐ๊น์์ก์ผ๋ฉด ์ข๊ฒ ๋ฐ ใ
ใ
์ค๋ ๋ฐฐ์ด ๋ด์ฉ
1. CSS์ HTML์ ์๋ ๋ฐฉ๋ฒ
1) html ํ์ผ์ html์ฝ๋์ css์ฝ๋๋ฅผ ํจ๊ป๋ฃ๊ธฐ
๋ฐฉ๋ฒ: (style) ์ด๋ผ๋ ํ๊ทธ๋ฅผ ์ด๋ค. ๊ทธ๋ฆฌ๊ณ css์ฝ๋๋ฅผ ์ด style ํ๊ทธ์์ ์์ฑํ๋ค.
์ฃผ์: style ํ๊ทธ๋ ํญ์ (head)์์ ์์ด์ผํ๋ค.
2) css์ html๋ถ๋ฆฌ
๋ฐฉ๋ฒ: ์๋ก cssํ์ผ์ ๋ง๋ ๋ค. ex)style.css
๊ทธ๋ฆฌ๊ณ (head)์์
<link href="styles.css" rel="stylesheet"/>
์ด๋ ๊ฒ ์ ๋๋ค.
๋๋ ์ฌ๊ธฐ์ ์๋ฌธ์ ์ด ์๊ฒผ๋ค.
์ ํํ rel=stylesheet๋ผ๊ณ ์ ์๊น?
stylesheet๋ ๋ฌด์์ผ๊น?
์ฐพ์๋ณด๋๊น stylesheet๋ ๋ฌธ์์ ๋ ์ด์์ ์คํ์ผ์ ์ ์ํด์ฃผ๋ ๊ฒ์ด๋ค. ํ์ด์ง ์ฌ์ด์ฆ, ์ฌ๋ฐฑ, ํฐํธ ๋ฑ๋ฑ.
๊ทธ๋ฆฌ๊ณ ๊ทธ์ค ๊ฐ์ฅ ์ ์๋ ค์ง stylesheet๊ฐ css์ธ๊ฒ์ด๋ค.
ํ๋ง๋๋ก ์ด๊ฑด "๋๋ ์ด๋ฐํ์ผ๊ณผ ์ฐ๊ฒฐ์ ํ ๊ฑด๋ฐ, ๊ทธ ๊ด๊ณ๋ ๋ ์ด์์์ ๊พธ๋ฉฐ์ฃผ๋ ๊ด๊ณ๋๋๋ค." ๋ผ๋ ๋ป์ผ๋ก ์ ์ถ๋๋ค.
(style)
h1 (ํ๊ทธ๋ฅผ ์ง์ ํด์ฃผ๊ณ )
{ color:blueviolet; (์์ฑ๊ฐ๋ค์ ์ด๋ค)
font-style:italic;
font-weight:800;
}
(/style)
๋ญ๊ฐ ๊พธ๋ฐ์ ์์ผ๋๊น ๋๋ฌด ์ฌ๋ฐ์๊ณ , ์ ๊ธฐํ๋ค.ใ
ใ
๋ด์ผ๋ถํฐ ๋ค๋ฅธ ๊ฐ์ ๋นก์ธ๊ฒ ๋ค์ํ
๋ฐ ์ด์ง ๊ฑฑ์ ๋๋ค!!
์์์ฃ!!ํ์ดํ
์ด๋ท!!๋์จฉํฌ!!