์น์ ์ดํด
์ธํฐ๋ท๊ณผ ์น
- ์ธํฐ๋ท (Internet): ์ ์ธ๊ณ ์ปดํจํฐ๋ฅผ ํ๋์ ํต์ ๋ง์ผ๋ก ์ฐ๊ฒฐํ ๊ฒ. '์ฐ๋ฆฌ๋ ๋ชจ๋ ์ฐ๊ฒฐ๋์ด ์๋ค'๋ ๊ฐ๋ ์ ์์ง.
- ์น (Web): ์ธํฐ๋ท์ ์ฐ๊ฒฐ๋ ์ปดํจํฐ๋ฅผ ํตํด ์ ๋ณด๋ฅผ ๊ณต์ ํ๋ ๊ณต๊ฐ. ์๋ ์์ด๋ ์น (World Wide Web, WWW)์ด๋ผ๊ณ ๋ ๋ถ๋ฆผ.
์น์ ์์๊ณผ ํน์ง
- 1980๋ ๋ ์ค์์ค ์ ๋ฝ ์ ์ ๋ฌผ๋ฆฌ ์ฐ๊ตฌ์์์ ํ ๋ฒ๋์ค๋ฆฌ๊ฐ ์ฐ๊ตฌ์๋ค ๊ฐ ๋น ๋ฅธ ์ ๋ณด ๊ตํ์ ์ํด ๊ณ ์.
- ํน์ง: ์ ๋ณด๋ฅผ ํ์ดํผํ ์คํธ ํ์์ผ๋ก ํํํ๊ณ , ๋งํฌ๋ฅผ ํตํด ๋ค์ํ ์ ๋ณด์ ๋ฌธ์๋ฅผ ์ฐ๊ฒฐํด ์ ๊ณต.
์น ํ์ด์ง์ ์น ์ฌ์ดํธ
- ์น ํ์ด์ง ๊ฐ ๋งํฌ๋ฅผ ํตํด ์ด๋ํ๋ ๊ฒ: ์น ์ํ (Web Surfing) ๋๋ ์น ๋ธ๋ผ์ฐ์ง (Web Browsing).
์น ๋ธ๋ผ์ฐ์
- ์น ํ์ด์ง๋ ์น ์์ ๋ฐ์ดํฐ๋ฅผ ์ฐพ๊ณ ์ฝ์ ๋ ์ฌ์ฉํ๋ ๋๊ตฌ.
์น์ ๊ตฌ์กฐ
- ํด๋ผ์ด์ธํธ (Client): ์๋น์ค๋ฅผ ์์ฒญํ๋ ์ปดํจํฐ.
- ์๋ฒ (Server): ์๋น์ค๋ฅผ ์ ๊ณตํ๋ ์ปดํจํฐ.
- ํ๋กํ ์ฝ (Protocol): ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ์ ํต์ ๊ท์น.
HTTP
- HTTP (HyperText Transfer Protocol): ์น์์ ํด๋ผ์ด์ธํธ์ ์๋ฒ๊ฐ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ๋ ์น ํ๋กํ ์ฝ.
์น์ ๊ตฌ์ฑ ์์
- HTML (HyperText Markup Language): ๊ตฌ์กฐ
- CSS (Cascading Style Sheets): ์คํ์ผ
- JavaScript: ๋์
IDE
- IDE (Integrated Development Environment): ์ฝ๋ฉ, ๋๋ฒ๊น , ํ ์คํธ ๋ฑ์ ํ ๊ณณ์์ ํ ์ ์๋ ์ํํธ์จ์ด.
HTML (Hyper Text Markup Language)
ํ์ดํผํ ์คํธ, ์ฆ ์น ํ์ด์ง๋ฅผ ์ฐ๊ฒฐํ๋ ๊ธฐ๋ฅ์ ๊ฐ์ง ํ ์คํธ์ด์ ์น ํ์ด์ง ๊ตฌ์กฐ๋ฅผ ๋ช ์ํ๋ ์ธ์ด
ํ๊ทธ, <>
์น ํ์ด์ง์ ๊ตฌ์ฑ ์์ ํ๋ํ๋๋ก ์ญํ ์ ํ๊ฒ ๋๋ค.
์์ฃผ ์ฐ๋ HTML ํ๊ทธ
- <!DOCTYPE html>: ๋ธ๋ผ์ฐ์ ์๊ฒ ์ด ๋ฌธ์๊ฐ HTML5 ํ์ค์ ๋ฐ๋ฅด๊ณ ์์์ ์๋ ค์ค๋ค.
- <html> : ๋ฌธ์์ ๋ฃจํธ ์์๋ก, ๋ชจ๋ HTML ์ฝํ ์ธ ๋ฅผ ๊ฐ์ผ๋ค. <html> ํ๊ทธ ์์ <head>์ <body> ํ๊ทธ๊ฐ ํฌํจ๋๋ค.
- <head>: ๋ฌธ์์ ๋ํ ๋ฉํ๋ฐ์ดํฐ(๋ฌธ์ ์ ๋ณด)๋ฅผ ํฌํจํ๋ค. ์ฌ๊ธฐ์ <title>, <meta>, <link>, <style>, <script> ๋ฑ์ด ๋ค์ด๊ฐ๋ค. ๋ฌธ์์ ์ ๋ชฉ, ์คํ์ผ, ์คํฌ๋ฆฝํธ ๋ฑ์ด ์ฌ๊ธฐ ์ ์๋๋ค.
- <meta>: ๋ฌธ์์ ๋ฉํ๋ฐ์ดํฐ๋ฅผ ์ ์ํ๋ค. ๋ฌธ์ ์ธ์ฝ๋ฉ, ํ์ด์ง ์ค๋ช , ํค์๋, ์์ฑ์ ์ ๋ณด ๋ฑ.
- <title>: ํ์ด์ง์ ์ ๋ชฉ์ ์ ์ํ๋ค. ๋ธ๋ผ์ฐ์ ํญ์ ํ์๋๊ณ , ๋ถ๋งํฌ์๋ ์ฌ์ฉ๋๋ฉฐ ๊ฒ์ ์์ง ์ต์ ํ(SEO)์๋ ์ค์ํ ์ญํ ์ ํ๋ค.
- <body>: ์น ํ์ด์ง์ ๊ฐ์์ ์ธ ์ฝํ ์ธ ๊ฐ ํฌํจ๋๋ค.
- <h2>: HTML ๋ฌธ์์ ์ ๋ชฉ์ด๋ค. <h1>๋ถํฐ <h6>๊น์ง ์ด 6๋จ๊ผ๋ค.
- <a>: ํ์ดํผ๋งํฌ๋ฅผ ์ ์ํ๋ ํ๊ทธ์ด๋ค. href ์์ฑ์ ์ฌ์ฉํ์ฌ ๋งํฌํ URL์ ์ง์ ํ๋ค.
- <br>: ์ค๋ฐ๊ฟ(๋ผ์ธ ๋ธ๋ ์ดํฌ)๋ฅผ ์ฝ์ ํ๋ ํ๊ทธ์ด๋ค. ๋ธ๋ก ์์๋ฅผ ๋๋์ง ์๊ณ , ๋จ์ํ ํ ์คํธ๋ด์์ ์ค์ ๋ฐ๊พธ๊ณ ์ถ์ ๋.
- <form>: ์ฌ์ฉ์ ์ ๋ ฅ์ ๋ฐ๊ธฐ ์ํ ํผ์ ์ ์ํ๋ค. ์ด ์์ <input>, <textarea>, <button>, <select> ๋ฑ์ ์์๊ฐ ํฌํจ๋์ด๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅํ ์ ์๋๋ก ํ๋ค. ํผ ๋ฐ์ดํฐ๋ action ์์ฑ์ ํตํด URL๋ก ์ ์ก๋๋ค.
- <input>: ๋ค์ํ ์ ํ์ ์ฌ์ฉ์ ์ ๋ ฅ ํ๋๋ฅผ ์ ์ํ๋ ํ๊ทธ์ด๋ค. type ์์ฑ์ผ๋ก ํ ์คํธ ํ๋, ๋ผ๋์ค ๋ฒํผ, ์ฒดํฌ๋ฐ์ค, ๋น๋ฐ๋ฒํธ ์ ๋ ฅ ํ๋ ๋ฑ ์ฌ๋ฌ ์ ํ์ ์ง์ ํ ์ ์๋ค.
์์ํ vscode HTML ์ธํ ํ
vscode์์ HTML ์ด๊ธฐ์ธํ ๋น ๋ฅด๊ฒ ํ๊ธฐ (Emmet)
html ํ์ผ ์์์ !๋ฅผ ์ ๋ ฅํ๊ฑฐ๋, html:5๋ฅผ ์ ๋ ฅํ๋ฉด, ๋ฒ๊ฑฐ๋ก์ด ์ด๊ธฐ ์ธํ ์ ๋น ๋ฅด๊ฒ ํ ์ ์๋ค.
Emmet(์๋ฐ): ์ฝ๋ ์์ฑ ์๋๋ฅผ ํฌ๊ฒ ๋์ฌ์ฃผ๋ ๋๊ตฌ. HTML, CSS์ ๊ฐ์ ๋งํฌ์ ์ธ์ด๋ฅผ ์ ์ํ๊ฒ ์์ฑํ ์ ์๋๋ก ๋๋ ๊ธฐ๋ฅ์ด๋ค. VSCode๋ฅผ ๋น๋กฏํ ์ฌ๋ฌ ์ฝ๋ ํธ์ง๊ธฐ์์ Emmet์ด ๊ธฐ๋ณธ์ ์ผ๋ก ์ง์๋๋ค.
ํ๋ํ๋ ์ ๋ ฅํด์ค ํ์ ์์ด, !๋ html:5๋ฅผ ํด๋ฆญํ๊ฑฐ๋ tab์ ๋๋ฅด๋ฉด ์๋์ผ๋ก ์๋์ ๊ฐ์ด ์ด๊ธฐ ์ธํ ๋๋ค.
์ฌ๊ธฐ์ ๋ ์์ ํด์ฃผ๋ฉด ๋๋ค.
vscode์์ html ํ์ผ ๋ฐ๋ก ๋ธ๋ผ์ฐ์ ๋ก ์ด๊ธฐ
open in browser ์ต์คํ ์ ์ ์ค์นํ๊ณ ๋ค์ด๋ก๋ ๋ฐ์ผ๋ฉด,
๋ฒ๊ฑฐ๋กญ๊ฒ ํ์ผ ํ์๊ธฐ์์ html ํ์ผ์ ์ด์ง ์์๋ ๋๋ค.
html ํ์ผ์ ์ฐ์ธก ๋ง์ฐ์ค ํด๋ฆญ์ ํด๋ณด๋ฉด, Open in Browser ์ต์ ์ด ์๊ธด ๊ฑธ ํ์ธํ ์ ์๋ค.
๋จ์ถ๊ธฐ๋ฅผ ํ์ฉํ์ฌ option(alt) + B ์ ํด๋ ๋ฐ๋ก ์ด๋ฆฐ๋ค.
HTML ๋ฉด์ ์ง๋ฌธ ๋ฝ๊ฐ๊ธฐ
์๋์ ๊ธ์ HTML ๋ฉด์ ์ง๋ฌธ๋ค์ ๊ณต๋ถํ๋ฉฐ, ์ฌํ์ ์ธ ๋ด์ฉ์ ๋ ์ฐพ์๋ณด๊ณ ์ ๋ฆฌํ์๋ค!
HTML ์ฌํ | ๋ฉด์ ์ง๋ฌธ ๋ชจ์
DOCTYPEDocument Type์ ์ฝ์.HTML์ด ์ด๋ค ๋ฒ์ ์ผ๋ก ์์ฑ๋์๋์ง ๋ฏธ๋ฆฌ ์ ์ธํ์ฌ ์น๋ธ๋ผ์ฐ์ ๊ฐ ๋ด์ฉ์ ์ฌ๋ฐ๋ก ํ์ํ ์ ์๋๋ก ํด์ค๋ค.์ด๋ฅผ ์ ์ธํด์ฃผ์ง ์์ผ๋ฉด, ํธํ ๋ชจ๋(quirks mode)๋ก ๋์ํ๋ฉฐ, ์ด ๊ฒฝ
yesolz.tistory.com
์ค๋ ๋๋ ์
์ฉ HTML์ ๋ค๋ฃจ๋ ๊ฒ์ ์ค๋๋ง์ด์๋ค. ์ด๋ฒ ๊ธฐํ์ HTML ๊ด๋ จ ๋ฉด์ ์ง๋ฌธ์ ์ถ๊ฐ์ ์ผ๋ก ๊ณต๋ถํ๋ฉฐ ๊ธฐ์ด๋ฅผ ๋ค์ ํํํ ๋ค์ ธ์ผ๊ฒ ๋ค๊ณ ๋๊ผ๋ค.
๋ํ, VSCode์์ HTML ์ด๊ธฐ ์ธํ ์ ๋น ๋ฅด๊ฒ ํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์์๋ ๊ฒ ๊ฐ์ ๊ฒ์ํ๋ ์ค, Emmet์ด ๊ทธ ์ญํ ์ ํ๋ฉฐ, ๋ณ๋์ ์ค์น ์์ด ์ฝ๋ ํธ์ง๊ธฐ์ ๋ด์ฅ๋ ๊ธฐ๋ฅ์ด๋ผ๋ ๊ฒ์ ์๊ฒ ๋์๋ค.
Emmet ๊ณต์ ์ฌ์ดํธ์ ๋ค์ด๊ฐ ๋ณด๋, HTML ์ด๊ธฐ ์ธํ ์ธ์๋ ๋งค์ฐ ๋ค์ํ ๊ธฐ๋ฅ์ ์ ๊ณตํ๋ค๋ ์ ์ด ํฅ๋ฏธ๋ก์ ๋ค. ํ๋ก ํธ์๋๊ฐ ์ฃผ๋ก ํผ๋ธ๋ฆฌ์ฑ์ ์ง์ค๋์๋ ์์ , ๋น ๋ฅธ ์์ ์ด ๋ฌด์๋ณด๋ค ์ค์ํ์๋ค. ๊ทธ ์์ ์๋ Emmet์ ์ ํ์ฉํ๋ ๊ฒ์ด ํ๋์ ๊ฒฝ์๋ ฅ์ด์์ ๊ฒ์ด๋ผ๋ ์๊ฐ์ด ๋ค์๋ค.
