2์ผ์ฐจ : HTML,CSS,JavaScript์ ์ ์ ๋ฐ ์ญํ ๋ฑ ์ดํด๋ฅผ ์ํ ์์
์งํ
์ฃผ์ ํต์ฌ :
- HTML ๋งํฌ์
์ธ์ด๋ฅผ ์ด๋ป๊ฒ ์ฌ์ฉํ๋๊ฐ
- id & class ์ธ์ ์ฌ์ฉ๋๋๊ฐ
- ์๋งจํฑ ์์
- ์ค์ต : ๋ก๊ทธ์ธ ํ์ด์ง, ์๊ธฐ์๊ฐ ํ์ด์ง ๋ง๋ค๊ธฐ
HTML / CSS / JavaScript
HTML
- ์น ํ์ด์ง ๊ตฌ์กฐ (ํ) ๋ด๋น
- ๋งํฌ์
์ธ์ด
CSS
- ๋์์ธ ์์๋ฅผ ์๊ฐํ
- ์คํ์ผ ์ํธ ์ธ์ด
JavaScript
- ์น ํ์ด์ง๋ฅผ ํ๋ก๊ทธ๋จ์ผ๋ก ๋ง๋ค์ด ์ํธ์์ฉํ ์ ์๊ฒ ํจ
- ํ๋ก๊ทธ๋๋ฐ ์ธ์ด
HTML
HTML - HyperText Markup Language ์ฝ์
Tag ์ ์
- HTML์ Tag๋ค์ ์งํฉ
- ๋ถ๋ฑํธ (<>)๋ก ๋ฌถ์ธ ๊ธฐ๋ณธ ๊ตฌ์ฑ ์์
- ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๊ณ ๋ซ๊ธฐ๊ฐ ์ง์ผ์ง ex) <> ์ด๊ธฐ , </> ๋ซ๊ธฐ
id & class
- id : ๊ณ ์ ํ ์ด๋ฆ ๋ถ์ผ๋ ์ฌ์ฉ (์ ์ฒด ํต ํ์ด์ ์ค์ง ํ๋์ผ ๋)
- class : ์ ํ๋ณ๋ก ๋ถ๋ฅํ ๋ (๋ฐ๋ณต์ ์ธ ์ ํ์ ๋ถ๋ฅํ ๋)
โ๏ธ์น,์ฑ ๋ง๋๋ ๊ณผ์ ์์์ ํ์ ๊ณผ์
- ํ๋กํ ํ์ดํ์ ๊ผญ ๊ฑฐ์ณ์ผ ํจ
-๊ฐ๋ฐ ์ด๊ธฐ์ ๋ชจํ์ ๋ง๋ค์ด ๊ธฐ๋ฅ ์๊ตฌ ์ฌํญ์ ํ์
ํ๊ณ , ๋ฐ์ํ๋ ๊ฐ์ ๋ฐฉ์
์์ฃผ ์ฌ์ฉ๋๋ Tag ํต์ฌ ๋ฐ ์ฐจ์ด์
- div : ํ์ค ์ฐจ์ง, span : ์ปจํ
์ธ ํฌ๊ธฐ๋งํผ ์ฐจ์ง
- img : ๋ซ๋ํค๊ฐ ์์ : </>
- a : ๋งํฌ ์ฝ์
ํค , ์์ฑ:href
- ul,li : ๋ฆฌ์คํธ
- li : ul,ol ๋ก ๋ฌด์กฐ๊ฑด ๊ฐ์ธ์ ธ์ผ ํ๋ค.
- input, textarea : ๋ค์ํ ์
๋ ฅ ํผ ex)์ฒดํฌ ๋ฐ์ค ๋ฑ
์๋งจํฑ ์์
- ์ฌ๋๊ณผ ์ปดํจํฐ๊ฐ ์ฝ๊ธฐ ์ฌ์ด, ์๋ฏธ ์๋(semantic) HTML ๋ฌธ์๋ฅผ ์์ฑ ๊ฐ๋ฅ
์ ์ฌ์ฉํ๋๊ฐ? (div์์ ์ฐจ์ด์ )
- ๊ฒ์์์ง์ด ์น ํ์ด์ง๋ฅผ ๋ฐฉ๋ฌธ์, div๋ณด๋ค ์๋งจํฑ ์์๋ฅผ ์ค์ํ ํค์๋๋ก ๊ณ ๋ คํจ
- ๊ฐ๋ฐ์๋ค์ด ํจ๊ป ์์
์, div์์๋ฅผ ํ์ํ๋๊ฑฐ๋ณด๋ค ์๋ฏธ์๋ ์ฝ๋๋ธ๋ก์ ์ฐพ๋ ๊ฒ์ด ๋ ํธ๋ฆฌ, ๋ฐ์ดํฐ ์ ํ ์์ธก์ด ์ฌ์
์์ฃผ ์ฌ์ฉ๋๋ Tag
- article : ๋
๋ฆฝ์ ์ด๊ณ ์์ฒด ํฌํจ๋ ์ฝํ
์ธ ๋ฅผ ์ง์ ํฉ๋๋ค.
- aside : ๋ณธ๋ฌธ์ ์ฃผ์ ๋ถ๋ถ์ ํ์ํ๊ณ ๋จ์ ๋ถ๋ถ์ ์ค๋ช
ํ๋ ์์์
๋๋ค. ํน๋ณํ ์ผ์ด ์๋๋ฉด ์ฌ์ด๋๋ฐ๋ ๊ด๊ณ ์ฐฝ ๋ฑ ์ค์ํ์ง ์์ ๋ถ๋ถ์ ์ฌ์ฉ๋ฉ๋๋ค.
- footer : ์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง๋ ํด๋น ํํธ์ ๊ฐ์ฅ ์๋ซ๋ถ๋ถ์ ์์นํ๋ฉฐ, ์ฌ์ดํธ์ ๋ผ์ด์ ์ค, ์ฃผ์, ์ฐ๋ฝ์ฒ ๋ฑ์ ๋ฃ์ ๋ ์ฌ์ฉํฉ๋๋ค.
- header : ์ผ๋ฐ์ ์ผ๋ก ํ์ด์ง๋ ํด๋น ์น์
์ ๊ฐ์ฅ ์๋ถ๋ถ์ ์์นํ๋ฉฐ, ์ฌ์ดํธ์ ์ ๋ชฉ์ด ๋ณดํต ๋ค์ด๊ฐ๋๋ค. ์ ํ์ ์ผ๋ก ์๋จ๋ฐ๋ ๊ฒ์์ฐฝ ๋ฑ์ด ์์ ๋ค์ด๊ฐ ์ ์์ต๋๋ค.
- nav : ๋ด๋น๊ฒ์ด์
(navigation)์ ์ฝ์๋ก, ์ผ๋ฐ์ ์ผ๋ก ์๋จ๋ฐ ๋ฑ ์ฌ์ดํธ๋ฅผ ์๋ดํ๋ ์์์ ์ฌ์ฉ๋ฉ๋๋ค. ๋ณดํต์ ์์ ul์ ๋ฃ์ด ๋ชฉ๋ก ํํ๋ก ์ฌ์ฉํฉ๋๋ค.
- main : ๋ฌธ์์ ์ฃผ๋ ์ฝํ
์ธ ๋ฅผ ํ์ํฉ๋๋ค.
์ค์ต ๊ฒฐ๊ณผ๋ฌผ
๋ณต์ตํด์ผ ๋๋ค๊ณ ์๊ฐํ๋ ์
- ์์ฃผ ์ฌ์ฉ ๋๋ ํ๊ทธ๊ฐ ์ ์์ฃผ ์ฌ์ฉ ๋๋์ง์ ๋ํ ๋ณต์ต ํ์
- ๊ฒ์์ ํตํ html๋ค์ ๋ค๋ฅธ ์์ ๋ค์ ๋ณด๋ฉฐ ์ํฉ์ ๋ฐ๋ฅธ ํ๊ทธ ์ฌ์ฉ๋ฒ ๋ณต์ต ํ์
- ํฐ ํ์์ ์์ญ ๋๋๋ ๋ฐฉ๋ฒ์ ๋ํด ๋ณต์ต ํ์
- ๋ณต์ต์ ์ฐธ๊ณ ๊ฐ ๋ ์ฌ์ดํธ