16.05.24 CSS style sheets - govl2233/project_studyej GitHub Wiki
: ์น๋ฌธ์์ ๊ธฐ๋ณธ์ ์ธ ์คํ์ผ์ ๋ฏธ๋ฆฌ ์ง์ ํด๋ ์คํ์ผ์ํธ. ๋ฌธ์์ ์ผ๊ด์ฑ์ ์ ์งํ๊ณ ์ด์ฉํ๊ธฐ ํธ๋ฆฌํ๋ค๋ ํน์ง์ด ์์
External style sheets : ํ๋์ css ํ์ผ๋ก ๋ชจ๋ style์ ์ฉ์ํจ ๊ฒ
ex)
<link rel="stylesheet" href="external.css">
-- html๋ฌธ์์ ํ์ฅ์cssํ์ผ์ ๋ถ๋ฌ์ค๋๊ฒ. (rel : ํ์ฌ ๋ถ๋ฌ์ค๋ ์ธ์ด)
Internal style sheets : HTML ๋ฌธ์์ <body>
์์ ์์๋ค์ style๋ก ์ ์ฉ ์ํค๋ ๊ฒ.
style ์ ์ฉ๋ฒ : <head>
ํ๊ทธ์์ <style>
ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ.
ex)
<html>
<head>
<meta charset="UTF-8">
<title>css</title>
<style>
p {border :1px blue solid}
span {border:1px #F00 solid}
.box {border:1px blue solid; width:100px; height:100px;} (."name" --class๋ก ์ด๋ฆ์ ์ ํํด์ค๊ฒ ๋๋ฌธ์ .์ ์จ์ค)
</style>
</head>
<body>
<p>hello world</p>
<sapn>text</span>
<div class="box">text</div> (class๋ก ์ด๋ฆ์ ์
ํ๋ ๊ฒ์ ์ด๋ ํน์ ํ ์์ ํ๋๋ง ์ ์ฉ์ํค๋ ค๊ณ )
</body>
</html>
Inline style sheets : HTML ๋ฌธ์์ <body>
ํ๊ทธ ์์ ์์๋ค์ style๋ก ๋ฐ๋ก ์ ์ฉ์ํค๋ ๊ฒ.
style ์ ์ฉ๋ฒ : <body>
ํ๊ทธ์์ ์คํ์ผ ์์๋ค์ ์ฌ์ฉํ๋ ๊ฒ.
ex)
<html>
<head>
</head>
<body>
<div style="border:1px blue solid; width:100px; htight:100px;">text</div>
</body>
</html>