โก3๊ฐ์ง ์ธ์ด
HTML : ๊ตฌ์กฐ๋ฅผ ๋ง๋๋ ๋งํฌ์ ์ธ์ด. (๊ตฌ์กฐ)
CSS : ์คํ์ผ์ ๋ง๋๋ ๋์์ธ ์ธ์ด. (์คํ์ผ)
JavaScript : ๊ตฌ์กฐ์ ์คํ์ผ์ ์์ฑ๋ ๊ฐ๊ฐ์ ์์์ ์๋ช ์ ๋ถ์ฌํ๋ ์ญํ . (์ํธ์์ฉ)
tag | ๋ป |
---|---|
< div > | Division |
< span > | Span |
< img > | Image |
< a > | Link |
< ul > & < li > | Unordered List & List Item |
< input > | Input (Text, Radio, Check box, Password...) |
< textarea > | Multi - line Text Input |
< button > | Button |
- < div > ์ < span > ์ฐจ์ด ( CSS ์ ์ฉ X )
- < div > : ํ ์ค์ฉ ์ฐจ์ง
- < span > : ๊ณต๊ฐ์ผ๋ก ์ฐจ์ง
โก์๋ฉํฑ ์์๋? (Semantic element)
'์๋ฏธ๊ฐ ์๋ ์๋ฏธ๋ก ์ ์' ์ด๋ผ๊ณ ํด์.
๋ฐ๋ผ์, ์๋ฏธ๋ฅผ ๊ฐ์ง ์์๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ์์ ์ถ๊ตฌํ๊ธฐ ์์.
HTML์ ์ต์ ๋ฒ์ HTML5์์๋ ์๋ฉํฑ ์น์ด ์ค์๋๋ฉด์, ์ฌ๋ฌ ์๋ฉํฑ ์์๊ฐ ์๋กญ๊ฒ ๋ง๋ค์ด์ก๋ค.
์๋ฅผ ๋ค์ด์ ์ต์์ ์ ๋ชฉ์ ์ฌ์ฉํ ๋ ์ด์ฉ๋๋ < h1 > ํ๊ทธ์ ๊ฒฝ์ฐ,
CSS๋ฅผ ์ ์ฉํ์ง ์์๋ ํฐ ํฐํธ์ ์์๋ ๊ฐ๊ฒฉ๋ฑ์ ์ฃผ์ด ์ ๋ชฉ์ฒ๋ผ ๋ณด์ด๋๋ก ํ๋ค.
โก์๋ฉํฑ ์์๋ฅผ ์ถ๊ตฌํ๋ ์ด์ ๋?
CSS ์์ฑ๊ฐ๋ง ์ค๋ค๋ฉด < div > ์์ ๋๋ < span > ์์๋ ๊ฐ๋ฅํ๋ค.
ํ์ง๋ง, ์นํ์ด์ง ํ๋์ < div > ์์๊ฐ ์์ญ๊ฐ๊ฐ ์ค์ฒฉ๋๋ค๋ฉด?
< div > ์ง์ฅ์ด ๋๋ ๊ฒฝ์ฐ๊ฐ ๋ง๋ค.
- ๊ฒ์ ์์ง์ด ์๋ฉํฑ ์์๋ฅผ ๋ ์ข์ํ๊ธฐ ๋๋ฌธ
- ๋ค์ด๋ฒ, ๊ตฌ๊ธ ๋ฑ ๋ชจ๋ ๊ณ ์ ํ ๊ฒ์ ์์ง์ ๋ณด์ .
- ๊ฒ์์์ง์ ์น ํ์ด์ง๋ฅผ ๋ฐฉ๋ฌธํ ๋ ์๋ฉํฑ ์์๋ฅผ ์ค์ํ ํค์๋๋ก ๊ณ ๋ ค.
- ์๋ฉํฑ ์์์ ๋ด๊ธด ์๋ฏธ์ ๋ฐ๋ผ ๊ฒ์๊ฒฐ๊ณผ ์์ ๋ ธ์ถ์ด ๊ฒฐ์ .
- ์ฌ๋ฌ ๊ฐ๋ฐ์๊ฐ ํจ๊ป ์์ ํ ๊ฒฝ์ฐ ํธ๋ฆฌํ๋ค.
- < div > ์์๋ฅผ ํ์ํ๋ ๊ฒ๋ณด๋ค ์๋ฏธ ์๋ ์ฝ๋๋ธ๋ก์ ์ฐพ๋ ๊ฒ์ด ํจ์ฌ ํธ๋ฆฌ.
- ๋ํ, ์์ ์์ ์ฑ์์ง ๋ฐ์ดํฐ ์ ํ๋ ์์ธกํ๊ธฐ ์ฝ๋ค.
์๋ฉํฑ ์์ | |
---|---|
< header > | ์ฃผ๋ก ํ์ด์ง ์ต์๋จ์ ์์น (์ฌ์ดํธ์ ์ ๋ชฉ. ์ ํ์ ์ผ๋ก๋ ์๋จ๋ฐ๋ ๊ฒ์์ฐฝ์ผ๋ก๋ ์ด์ฉ.) |
< main > | ๋ฌธ์์ ์ฃผ๋ ์ฝํ ์ธ ๋ฅผ ํ์. |
< nav > | ๋ด๋น๊ฒ์ด์ ์ ์ฝ์. ์๋จ๋ฐ๋ฑ ์๋ดํ๋ ์์. (ul์ ๋ฃ์ด ๋ชฉ๋ก ํํ๋ก ์ด์ฉ.) |
< article > | ๋ ๋ฆฝ์ ์ด๊ณ ์์ฒด ํฌํจ๋ ์ฝํ ์ธ ์ง์ . |
< aside > | ๋ณธ๋ฌธ์ ์ฃผ์ ๋ถ๋ถ์ ํ์ํ๊ณ ๋จ์ ๋ถ๋ถ์ ์ค๋ช ํ๋ ์์๋ก ์ด์ฉ. (ํน๋ณํ์ง ์์ ์ฌ์ด๋๋ฐ๋ ๊ด๊ณ ์ฐฝ ๋ฑ์ ์ฌ์ฉ) |
< footer > | ์ฃผ๋ก ํ์ด์ง ์ตํ๋จ์ ์์น (์ฌ์ดํธ์ ๋ผ์ด์ ์ค, ์ฃผ์, ์ฐ๋ฝ์ฒ.) |
๐ง class์ id
- id : ๊ณ ์ (unique)ํ ์ด๋ฆ์ ๋ถ์ผ ๋.
- ์ฝ๊ธฐ ์์ญ์์ฒด์๋ ๊ณ ์ ํ๋ฏ๋ก id๋ก ์ด๋ฆ์ ๋ถ์ธ๋ค.
- ๋จ ํ ๊ณณ์์๋ง ์ฌ์ฉ๋ ๊ฒฝ์ฐ.
- ์ค๋ณต๋์ง ์๋ ๊ฒฝ์ฐ.
- class : ๋ฐ๋ณต๋๋ ์์ญ์ ์ ํ๋ณ๋ก ๋ถ๋ฅํ ๋.
- ๊ฐ์ class ๊ฐ์ ์ง์ ํด ์ค์ผ๋ก์ ๋์ผํ ์ ํ์์ ์ ์ ์๋ค.
HTML ํ๊ทธ | Selector |
---|---|
< div id = "writing-section" > | div # writing-section |
< li class = "comment" > | li . comment |
์ค๋ HTML์ ๋ฐฐ์ฐ๋ฉฐ ๊ณผ์ ๋ก ๋ง๋ ๐ฅ์๊ธฐ์๊ฐ ํ์ด์ง ๋ง๋ค๊ธฐ๐ฅ