Codeit ํ๋ก ํธ์๋ ๋ถํธ์บ ํ์ ํฉ๋ฅํ๊ฒ ๋์๋ค! 0๊ธฐ ๋ถ๋ค๊ณผ์ ์ฒซ ๋ง๋จ๐ ์์ง์ ์กฐ๊ธ ์ด์ํ์ง๋ง.. ํจ๊ป 6๊ฐ์๊ฐ ๊ณต๋ถํ ์๊ฐ์ ๊ธฐ๋๊ฐ ๋๋ค.
OT๋ฅผ ํตํด ์๋ด์ฌํญ๊ณผ ๊ฐ์๊ฐ ์ง์ผ์ผํ ๊ธฐ๋ณธ ๋งค๋, ๊ทน๋ํ๋ ์ฑ์ฅ์ ์ํ ๊ท์น์ ์์งํ๋ค. ๊ทธ๋ฌ๊ณ ๋์ ์์ด์ค๋ธ๋ ์ดํน! ๋๋ 3์กฐ๋ก ๋น์ ๊ณต 1๋ช , ์ ๊ณต 3๋ช ์ผ๋ก ์ด๋ฃจ์ด์ง ์กฐ์๋ค. ์ฒ์ ๋ฐฐ์ฐ์๋ ๋ถ๋ ์๋ ๋งํผ ์๋ก ๋ง์ด ๋์ฐ๋ฉฐ ๋ฐ์ ํด ๋๊ฐ ์๊ฐ์ด๋ค! ์, ์ด ์กฐ๋ ์ฝ 5์ฃผ๊ฐ ์ ์ง๋๋ ์กฐ๋ผ๊ณ ํ๋ค.
์ฒซ ๊ฐ์๋ โ์น ํผ๋ธ๋ฆฌ์ฑ ์์ํ๊ธฐโ ์๋ค. ๊ธฐ๋ณธ์ ์ธ HTML๊ณผ CSS์ ๋ํด ํ์ตํ๋ค. ์ด๋ฏธ ์๋ ๋ด์ฉ๊ณผ ์ด๋ ต์ง ์์ ๋ด์ฉ์ด๋ผ ๋ณต์ต ์ฐจ์์์ ๋ค์๋ค.
HTML๊ณผ ์น ํ์ค, ์น ์ ๊ทผ์ฑ์ ๋ํด ๊น๊ฒ ์ดํด๋ณด๊ณ ์ถ์ด์ ์ฒ์์ผ๋ก ๊ณต์ ๋ฌธ์๋ฅผ ์ดํด๋ณด์๋ค. ํน, <div>
๋ฅผ ๋จ๋ฐํ๋ ๊ฒ์ด ์๋ ์๋งจํฑํ ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ผํ๋ ์ด์ ๋ฅผ ๊นจ๋ซ๊ฒ ๋์๋ค.
์ด๋ฒ์ฃผ๊ฐ ๋๋๊ณ ์๊ฐ์ด ๋จ๋๋ค๋ฉด ๋ค๋ฃจ์ง ์์ ๊ฒ ๊ฐ์? (๋ค๋ฃฌ๋ค๋ฉด ์๊ธฐ๊ฐ ๋ฌ๋ผ์ง)
5๊ฐ์ง ํญ๋ชฉ์ ๋ํด ์ ๋ฆฌํ๊ณ ๊ณต๋ถํด๋ณผ ์์ ์ด๋ค.
TIL์ ์ด๋ป๊ฒ ํ๋ฉด ๋ ํจ๊ณผ์ ์ผ๋ก ์์ฑํ ์ ์์ ์ง ๊ณ ๋ฏผํ๊ณ ๋๊ฐ์ ๊ฐ์ด๋๋ฅผ ์๊ฐํ๋ค.
<
์ >
์ ๋ ์ฌ์ฉํ๋ค.margin : 200px auto
์ธ๋ก, ๊ฐ๋ก ์์์ด๋ฉฐ auto๋ margin์ ๊ฐ๋ก์์๋ง ์ ์ฉ๋๋ค. (๋ค๋ฅธ ๊ณณ์์ XX)๋ฌธ์์ ๋ํ ๋ฉํ๋ฐ์ดํฐ ์ ๊ณตํ๋๋ฐ ์ฌ์ฉ๋๋ค. ์์ฑ์, ํค์๋, ์ค๋ช ๋ฐ ๋ฌธ์ ์งํฉ๊ณผ ๊ฐ์ html ๋ฌธ์์ ๋ํ ๋ฐ์ดํฐ์ด๋ค.
name
, http-equiv
, content
, charset
๋ฑ์ ์์ฑ์ ์ฌ์ฉ.<http-equiv>
๊ฒฝ์ฐ ์ฝํ
์ธ ์์ฑ์ ์ ๋ณด/๊ฐ์ ๋ํ HTTP ํค๋๋ฅผ ์ง์ ํ๋ค.World Wide Web Consortium์์ ์ ํ W3C ํ์ค์ด ์๋ค. ๊ทธ ์ค HTML๊ณผ CSS๋ ํฌํจ๋๋ค.
์น ์ ๊ทผ์ฑ์ด๋?
HTML์ ๊ฐ์ฅ ์ต์ ๋ฒ์ ์ด๋ค. XHTML์์ ๋ค์ HTML๋ก ํ๊ธฐํ๊ฒ ๋์๋๋ฐ, ๊ทธ ์ด์ ๋ W3C๊ฐ XHTML์ ์๋ชป๋ง๋ค๋ค๊ฐ ์คํจ๋ฅผ ์ธ์ ํ๊ณ , WHATWG์ ํ์ค์ ๋๋ถ๋ถ์ ์์ฉํด ํ์ํ๊ฒ ๋์๋ค. ์ฐธ๊ณ ๋ก ์ด์ ๋ฒ์ ์ธ HTML4.01์ 1999๋ ์ ๋ฐํ๊ฐ ๋๋ค.
HTML5๋ ๋งํฌ์ ๋ญ๊ท์ง(HTML)์ ๋ฌธ๋ฒ์ ๋ฒ์ + ์๋ก์ด DOM API ์คํ์ ํฌํจํ๋ค.
๊ฐ ์์๋ณ๋ก ๋น์ทํ ์ฑ๊ฒฉ์ ๊ฐ์ง๊ณ ์๋ ๊ฒ ๋ผ๋ฆฌ ๊ทธ๋ฃนํํ HTML5 ์ฝํ ์ธ ๋ชจ๋ธ์ด ์๋ค.(Section Root, Metadat Content, Flow Content, Secition Content, Heading Content, Phrasing Content, Embedded Content, Interactive Content ๋ฑ)
๋ณ๊ฒฝ์ฌํญ ๋ฐ ํ๊ทธ ์ ๋ฆฌ
<!DOCTYPE html>
<header>
- <head>
์๋ ๋ค๋ฅธ ๊ฒ. ํ์ด์ง๋ ํด๋น ์ธ์
์ ๊ฐ์ฅ ์๋ถ๋ถ์ ์์นํ๋ค.<nav>
- ๋ด๋น๊ฒ์ด์
. ์๋จ๋ฐ ๋ฑ ์ฌ์ดํธ๋ฅผ ์๋ดํ๋ ์์์ ์ฌ์ฉ๋๋ค. ๋ณดํต <u>
์ ํจ๊ป ์ฐ์ธ๋ค.<main>
- ๋ฌธ์์ ์ฃผ๋ ์ฝํ
์ธ . ๋ ๊ฐ ์ด์ ๋ณด์ฌ์ง๋ฉด ์๋๋ฏ๋ก ํ๋๋ฅผ ์ ์ธํ ๋๋จธ์ง๋ hidden ์์ฑ์ ์จ์ ๊ฐ๋ ค์ผํ๋ค.<article>
- ์นํ์ด์ง์ ๋ด์ฉ์ ์ฌ์ฉํ๋ ํ๊ทธ. ๋ฌธ์๋ ํ์ด์ง, ์ฌ์ดํธ์์ ๋
๋ฆฝ์ ์ผ๋ก ๋ฐฐํฌ ํน์ ์ฌ์ฌ์ฉ์ ํ ์ ์๋ ์น์
์ ์ฌ์ฉํ๋ค.<section>
- ์นํ์ ๋๋๋ ํ๊ทธ. ์นํ์ด์ง๋ฅผ ์๋ฏธ์ ์ผ๋ก ํํธ ๊ตฌ๋ถ์ ์ํด ์ฌ์ฉํ๋ค.<aside>
- ๋ณธ๋ฌธ์ ์ฃผ์ ๋ถ๋ถ์ ํ์ํ๊ณ ๋จ์ ๋ถ๋ถ์ ์ค๋ช
ํ๋ ํ๊ทธ. ์ฌ์ด๋๋ฐ๋ ๊ด๊ณ ์ฐฝ ๋ฑ..<footer>
- ๊ฐ์ฅ ์๋ซ๋ถ๋ถ. ๋ผ์ด์ผ์ค ๋ฑ ํ์.<audio>
- ์์
ํ์ผ. <source>
ํ๊ทธ๋ฅผ ๋ฃ์ด ๋๊ฐ์ง ์ด์ ํ์ฅ์๋ฅผ ๊ฐ์ง ์์
ํ์ผ์ ๋ฃ์ด์ผ ๋ธ๋ผ์ฐ์ ๋ณ ์ง์ ํ์ฅ์๋ฅผ ์ปค๋ฒํ ์ ์๋ค.<video>
- ๋ณ๋ค๋ฅธ ํ๋ฌ๊ทธ์ธ ์์ด๋ ์์ ํ์ผ์ด ์์ฒด ์ฌ์ ๊ฐ๋ฅํ๋ค.. ๋ง์ฐฌ๊ฐ์ง๋ก <source>
ํ๊ทธ ํ์ํ๋ค.<canvas>
- ์คํฌ๋ฆฝํธ๋ฅผ ์ด์ฉํ ๊ทธ๋ํฝ์ ํํํ๋ ํ๊ทธ<output>
๊ฒฐ๊ณผ๊ฐ ์ ์ก<input>
์ ์๋ก์ด type ์์ฑ์ด ์ถ๊ฐ๋์๋ค.<datalist>
- <input>
์ย type="text"
์ ๊ฐ์ ์์ฑ์ ๊ฐ์ง ๊ฒ๋ค์ ๋ค์ด๊ฐ ๊ฐ์ ๋ฏธ๋ฆฌ ์ ์ํ๋ ํ๊ทธ[<select>
๊ณผ์ ์ฐจ์ด](https://hianna.tistory.com/439)<figure**>
** - ๋ค์ด์ด๊ทธ๋จ, ์ฌ์ง ๋ฑ ๋ฌธ์์ ์ฃผ์ ํ๋ฆ๊ณผ ๋
๋ฆฝ์ ์ธ ์ฝํ
์ธ . ์ฆ ์ ๊ฑฐํด๋ ๋ฌธ์์ ํ๋ฆ์ ์ํฅ์ ์ฃผ๋ฉด ์๋๋ค.<figcaption>
- <figure>
์ ๋ํ ์บก์
์ ์ ๊ณต๋ฑํ ์ด๋ ค์์ ์์๋ ํ๋ฃจ์๋ค. ๊ทธ๋ฌ๋ ์๋ ๊ฐ๋ณ๊ฒ๋ง ์๊ณ ์์๋ HTML์ ๋ํด ๋ ๊น๊ฒ ์ดํด๋ณด๊ณ ์ ๋ ธ๋ ฅํ๊ณ ์ฒ์์ผ๋ก ๊ณต์ ๋ฌธ์๋ฅผ ๋ดค๋ค.
ํ๋ก ํธ์๋ ๊ฐ๋ฐ์๋ ์น ํผ๋ธ๋ฆฌ์
์ ์์์ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ถ๊ณ ์์ด์ผํ๋ค๊ณ ์๊ฐํ๋ค. (๋ฌผ๋ก ์ด๋ค ๊ธฐ์
์์๋ ์น ํผ๋ธ๋ฆฌ์
๋ฅผ ๋ฐ๋ก ๋๊ธด ํ๋๋ผ..) ๊ทธ๋์ ์น ํ์ค๊ณผ ์ ๊ทผ์ฑ์ ๋ํด ์ ํ์
ํ๊ณ ์์ด์ผ ํํ โ์ข์ ํ๋ก ํธ์๋โ ๊ฐ๋ฐ์ ๋ผ๊ณ ์๊ฐํ๋ค. ์์ง HTML๊ณผ CSS์ ๋ํ ํ์ต(?๋ณต์ต)์ ํ์ง ์์ ์ํ์์ ์น์ ๊ทผ์ฑ์ ๋์ฑ ๊น๊ฒ ์ฐพ์๋ณด๋ค๊ฐ ํ๊ณ๋ฅผ ๋๊ผ๋ค. ๋ฐ๋ผ์ ์ด๋ฒ์ฃผ HTML/CSS ํํธ๊ฐ ๋๋ ํ์ ๋ ์ฐพ์๋ณด๊ฑฐ๋ ํํํ ์ฐพ์๋ณด๊ณ ์ฃผ๋ง์ ์ฝ์ด๋ณด๋ฉด์ ๋ด๊ฒ์ผ๋ก ๋ง๋ค ์์ ์ด๋ค!