65. 7์) ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์คํ์ผ๋ง ์ ์ฉ๋์ด์ง
์ํ์ ๋๋ค.
head
title๋ค์ด๋ฒ์๋น์ค/title
/head
!
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ ์์ฝ๊ณ ๊ฐํธํ ๋ฐฉ๋ฒ์
๋ฌด์์ด ์์๊น?/q em์๋ง๋ ์ ๋ ฅ์ ์๊ปด ์ฐ๋
์ผ์ผ ๊ฒ์ด๋ค./em/p
/div
div
h3์คํ ์บ์คํธ/h3
ul
listrong์์ค/strong์ ๊ดํ์ฌ/li
lia href=์ญ์ฌ์ ์ธ๋ฌผ๋ค/a/li
liํจ์ ์ ๋ํ์ฌ/li
/ul
/div
/div
/body
66. 6์) ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ์คํ์ผ ๋ณด๋ค ์์ฑํ
์คํ์ผ์ด ์ฐ์ ํฉ๋๋ค.
head
title๋ค์ด๋ฒ์๋น์ค/title
link href=css/reset.css ...์ค๋ต /
/head
!
reset.css
body{color:#666;}
์ด๊ธฐํCSS์ ๊ธฐ๋ณธ์ค์ ์
๊ฐ์์๋ก ์์์ํจ์ํ.
๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ์คํ์ผ์
๋ฎ์์ต๋๋ค.
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ ์์ฝ๊ณ ๊ฐํธํ ๋ฐฉ๋ฒ์
๋ฌด์์ด ์์๊น?/q em์๋ง๋ ์ ๋ ฅ์ ์๊ปด ์ฐ๋
์ผ์ผ ๊ฒ์ด๋ค./em/p
/div
div
h3์คํ ์บ์คํธ/h3
ul
listrong์์ค/strong์ ๊ดํ์ฌ/li
lia href=์ญ์ฌ์ ์ธ๋ฌผ๋ค/a/li
liํจ์ ์ ๋ํ์ฌ/li
/ul
/div
/div
/body
67. 5์) ์์ฑํ ์คํ์ผ์ค ์ง์ ์ ํ๋ ์ ์ธ์ด
์์๋ ์ ์ธ๋ณด๋ค ์ฐ์ ํฉ๋๋ค.
head
title๋ค์ด๋ฒ์๋น์ค/title
link href=css/reset.css ...์ค๋ต /
style type= text/css
p {color:red;}
/style
/head
!
reset.css
๊ธฐํ์ด๊ธฐํ...
...
body{color:#666;}
...
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
div
h3์คํ ์บ์คํธ/h3
ul
listrong์์ค/strong์ ๊ดํ์ฌ/li
lia href=์ญ์ฌ์ ์ธ๋ฌผ๋ค/a/li
liํจ์ ์ ๋ํ์ฌ/li
/ul
/div
/div
68. 4์) ์ง์ ์ ํํ ์์๊ฐ ๊ฐ์ ๊ฒฝ์ฐ
์๋์ฝ๋๊ฐ ์ฐ์ ํฉ๋๋ค.
reset.css
๊ธฐํ์ด๊ธฐํ...
head
basic.css
title๋ค์ด๋ฒ์๋น์ค/title
link href=css/reset.css ...์ค๋ต /
p {color:lime}
001
link href= css/basic.css ...์ค๋ต /
style type= text/css
p {color:red;} 0 0 1
/style
ํ๊ทธ์ด๋ฆ์ผ๋ก ๊ฐ์ ์์๋ฅผ
/head
์ ํํ๊ธฐ ๋๋ฌธ์ ์๋์์
!
๊ฐ ์ฐ์ ํ๋ค.
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
div
h3์คํ ์บ์คํธ/h3
ul
listrong์์ค/strong์ ๊ดํ์ฌ/li
lia href=์ญ์ฌ์ ์ธ๋ฌผ๋ค/a/li
liํจ์ ์ ๋ํ์ฌ/li
69. 3์) ์๋ฌด๋ฆฌ ์์ ์๋๋ผ๋
๊ตฌ์ฒด์ ์ผ๋ก ๋ถ๋ฅด๋ฉด ์ฐ์ ํฉ๋๋ค.
reset.css
head
title๋ค์ด๋ฒ์๋น์ค/title
์ด๊ธฐํ์คํ์ผ...
link href=css/reset.css ...์ค๋ต /
link href= css/basic.css ...์ค๋ต /
style type= text/css
p {color:red;}
#service p {color:orange;}
div div p {color:yellow;}
.castbox p {color:blue;}
/style
/head
4
p {color:lime}
001
1
basic.css
101
003
011
3
2
!
body
div id=โserviceโ
h2๋ค์ด๋ฒ์๋น์ค/h2
div class=โcastboxโ
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
5
001
70. reset.css
์ด๊ธฐํ์คํ์ผ...
head
title๋ค์ด๋ฒ์๋น์ค/title
basic.css
link href=css/reset.css ...์ค๋ต /
link href= css/basic.css ...์ค๋ต /
style type= text/css
p {color:red;}
#service p {color:orange;}
div div p {color:yellow;}
.castbox p {color:blue;}
!
5
001
2
#service div p {color:lime}
101
003
011
4
3
/style
/head
!
body
div id=โserviceโ
h2๋ค์ด๋ฒ์๋น์ค/h2
div class=โcastboxโ
h3๋ค์ด๋ฒ ์บ์คํธ/h3
pq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
div
h3์คํ ์บ์คํธ/h3
ul
1
๊ตฌ์ฒด์ฑ์ด ๋์์ง๋ฉด์ ํํฅ
1 0 2 ์ฐ์ ๋ฒ์น์ด ๋ฌด์๋ฉ๋๋ค.
71. 2์) ์๋ฌด๋ฆฌ ๊ตฌ์ฒด์ฑ์ด ๋๋๋ผ๋
์ธ๋ผ์ธ์คํ์ผ์ด ์ฐ์ ํฉ๋๋ค.
reset.css
head
title๋ค์ด๋ฒ์๋น์ค/title
์ด๊ธฐํ์คํ์ผ...
link href=css/reset.css ...์ค๋ต /
basic.css
link href= css/basic.css ...์ค๋ต /
style type= text/css
p {color:red;}
#service p {color:orange;}
/style
/head
p {color:lime} 0 0 1
001
101
!
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div class=โcastboxโ
h3๋ค์ด๋ฒ ์บ์คํธ/h3
p style=โcolor:blueโq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
div
h3์คํ ์บ์คํธ/h3
72. 1์) !important๋ ์ด๋ค๊ฒ ๋ณด๋ค ์ฐ์ ํฉ๋๋ค.
reset.css
head
title๋ค์ด๋ฒ์๋น์ค/title
์ด๊ธฐํ์คํ์ผ...
link href=css/reset.css ...์ค๋ต /
basic.css
link href= css/basic.css ...์ค๋ต /
style type= text/css
p {color:red !important;}
#service p {color:orange;}
/style
/head
p {color:lime} 0 0 1
101
!
body
div
h2๋ค์ด๋ฒ์๋น์ค/h2
div class=โcastboxโ
h3๋ค์ด๋ฒ ์บ์คํธ/h3
p style=โcolor:blueโq์ฐ๋ฆฌ๊ฐ ์ผ์์ํ์์ ํ๊ฒฝ์ ์ํด
ํ ์ ์๋ ๊ฐ์ฅ..์ค๋ต/p
/div
div
h3์คํ ์บ์คํธ/h3