1.1 HTML์˜ ์—ญ์‚ฌ

์˜ค๋Š˜๋‚  ๊ฑฐ์˜ ๋ชจ๋“  ์‚ฌ๋žŒ๋“ค์ด ์ธํ„ฐ๋„ท์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ์‚ฌ๋ฅผ ์ฝ๊ณ , ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , ๋งํฌ๋ฅผ ๋”ฐ๋ผ๊ฐ€์„ธ์š”. ๊ทธ๋ฆฌ๊ณ  ๊ทธ๋“ค ์ค‘ ์†Œ์ˆ˜๋งŒ์ด ์ธํ„ฐ๋„ท์ด ์–ธ์ œ, ๋ˆ„๊ตฌ์— ์˜ํ•ด ๋ฐœ๋ช…๋˜์—ˆ๋Š”์ง€ ๊ถ๊ธˆํ•ดํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

๊ทธ๊ฒƒ์€ ์—ฌ์ „ํžˆ โ€‹โ€‹๋‹น์‹ ์ด ์ธํ„ฐ๋„ท์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒƒ์— ๋‹ฌ๋ ค ์žˆ์Šต๋‹ˆ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ๊ฒฝ์šฐ ํ‰์‹ ๋„๋Š” ํ•œ ๊ฐ€์ง€๋ฅผ ์˜๋ฏธํ•˜๊ณ  ๊ธฐ์ˆ ์ž๋Š” ๋‹ค๋ฅธ ๊ฒƒ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์„ธ๊ณ„ ์ตœ๋Œ€์˜ ๋ฐ์ดํ„ฐ ์„ผํ„ฐ๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ์ปดํ“จํ„ฐ ๋„คํŠธ์›Œํฌ๋Š” 70๋…„๋Œ€์— ๋งŒ๋“ค์–ด์กŒ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ํ‰๋ฒ”ํ•œ ์‚ฌ๋žŒ์ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์ธํ„ฐ๋„ท(๋ธŒ๋ผ์šฐ์ €, ๋งํฌ, ๋ชจ๋“  ์ข…๋ฅ˜์˜ ํŽ˜์ด์ง€)์€ 90๋…„๋Œ€ ์ดˆ๋ฐ˜์— ํ•œ ์‚ฌ๋žŒ์— ์˜ํ•ด ๋ฐœ๋ช…๋˜์—ˆ์Šต๋‹ˆ๋‹ค . ๊ทธ๋ฆฌ๊ณ  ์ด๋žฌ๋‹ค...

1990๋…„๋Œ€ ์ดˆ ์˜๊ตญ์ธ Tim Berners-Lee๋Š” ์ธํ„ฐ๋„ท์„ ๋ฐœ๋ช…ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ์—๋„ ๋ถˆ๊ตฌํ•˜๊ณ  ๊ทธ๊ฐ€ ๋ฐœ๋ช…ํ•œ ๊ฒƒ์€ ์›น์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๊ฒƒ์ด ๋” ์ •ํ™•ํ•ฉ๋‹ˆ๋‹ค. World Wide Web๊ทธ๋Š” www์›”๋“œ ์™€์ด๋“œ ์›น์ด๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ, ํ•œ ์‚ฌ๋žŒ์ด ์›”๋“œ ์™€์ด๋“œ ์›น์„ ๋ฐœ๋ช…ํ–ˆ์Šต๋‹ˆ๋‹ค.

1986๋…„๋ถ€ํ„ฐ 1991๋…„๊นŒ์ง€ ๊ทธ๋Š” CERN ์—ฐ๊ตฌ ์„ผํ„ฐ(์Šค์œ„์Šค ์ œ๋„ค๋ฐ” ์†Œ์žฌ)์—์„œ ์ƒˆ๋กœ์šด ๊ณผํ•™ ๋ฌธ์„œ ํ‘œ์ค€์— ๋Œ€ํ•ด ์ž‘์—…ํ–ˆ์Šต๋‹ˆ๋‹ค. ์•„์‹œ๋‹ค์‹œํ”ผ ๊ณผํ•™์ž๋“ค์€ ๊ณผํ•™ ๋…ผ๋ฌธ์„ ๊ธฐ์‚ฌ ํ˜•ํƒœ๋กœ ์ถœํŒํ•˜๊ณ  ๊ธฐ์‚ฌ ๋์— ์‚ฌ์šฉ๋œ ๋ฌธํ—Œ ๋ชฉ๋ก์„ ํ‘œ์‹œํ•˜๋Š” ๊ฒƒ์ด ๊ด€๋ก€์ž…๋‹ˆ๋‹ค. ์ฆ‰, ๊ณผํ•™์  ์ง€์‹์€ ์„œ๋กœ ๋งํฌ๊ฐ€ ์žˆ๋Š” ๊ธฐ์‚ฌ์˜ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค.

๊ทธ๊ฑด ๊ทธ๋ ‡๊ณ , ํ˜„๋Œ€ Wikipedia๋Š” ์ œ์ž‘์ž๊ฐ€ World Wide Web์„ ๋ณธ โ€‹โ€‹๋ฐฉ์‹๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค . ์„œ๋กœ ๋งํฌ๊ฐ€์žˆ๋Š” ๊ณผํ•™ ๊ธฐ์‚ฌ, ์‚ฌ์šฉ ๋œ ์ถœ์ฒ˜ ๋ฐ ๋ฌธํ—Œ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  Tim์ด ์šด์ด ์ข‹์•˜๋‹ค๋ฉด ์›น์€ ์—ฌ์ „ํžˆ โ€‹โ€‹์ด์™€ ๊ฐ™์„ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋” ๋ฐ์€ ๋ฏธ๋ž˜๋กœ ๊ฐ€๋Š” ๊ธธ์— ์„ธ์ƒ์€ ์–ด๋”˜๊ฐ€์—์„œ ์ž˜๋ชป๋œ ๊ธธ์„ ๊ฐ€๊ณ  ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค :)

์›น์€ ์„ธ ๊ฐ€์ง€ ๊ธฐ์ˆ ์„ ๊ธฐ๋ฐ˜์œผ๋กœ ํ•ฉ๋‹ˆ๋‹ค.

  • HTML-page, ์—ฌ๊ธฐ์—๋Š” ํ…์ŠคํŠธ, ๊ทธ๋ฆผ ๋ฐ ๋‹ค๋ฅธ ๋งํฌ๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.HTML-pages.
  • HTML-pageโ€ข ๊ฐ€์žฅ ์ธ๊ฐ„ ์นœํ™”์ ์ธ ๋ฐฉ์‹์œผ๋กœ ํ‘œ์‹œ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € .
  • โ€ข ํ”„๋กœํ† ์ฝœ http- ์›น ์„œ๋ฒ„๊ฐ€ ๋ธŒ๋ผ์šฐ์ € ๋ฐ ์„œ๋กœ ํ†ต์‹ ํ•˜๊ธฐ ์œ„ํ•œ ํ‘œ์ค€์ž…๋‹ˆ๋‹ค.

Tim Berners-Lee๋Š” ์ด๋Ÿฌํ•œ ๊ฒƒ๋“ค์„ ํ‘œ์ค€ํ™”ํ•œ ๋งŒํผ ๋ฐœ๋ช…ํ•˜์ง€๋Š” ์•Š์•˜์Šต๋‹ˆ๋‹ค. HTML- ํ‘œ์ค€์„ ๊ธฐ๋ฐ˜์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ์Šต๋‹ˆ๋‹ค SGML. ํƒœ๊ทธ๋„ ๊ฑฐ๊ธฐ์—์„œ ๋นŒ๋ ธ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ Tim์ด๋ผ๋Š” ์„ธ๊ณ„ ์ตœ์ดˆ์˜ ์›น ๋ธŒ๋ผ์šฐ์ €๋Š” WorldWideWeb1990๋…„์— ์ง์ ‘ ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค.

1.2 HTML์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค

HTML๊ทธ๊ฒƒ์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋ฉฐ ๊ฒฐ์ฝ” ์—†์—ˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฐ ๋ง ์ ˆ๋Œ€ ํ•˜์ง€๋งˆ. ์ด๋ ฅ์„œ๋ฅผ ์ž‘์„ฑํ•˜๋”๋ผ๋„ HTMLํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์„น์…˜์—๋Š” ์ ˆ๋Œ€ ํ‘œ์‹œํ•˜์ง€ ๋ง๊ณ  ๋„๊ตฌ(๊ธฐ์ˆ ) ์„น์…˜์—๋งŒ ํ‘œ์‹œํ•˜์‹ญ์‹œ์˜ค. ์ด๋ ฅ์„œ์— ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋ฅผ ์•ˆ๋‹ค๊ณ  ์ ๋Š” ๊ฒƒ์€ ํฐ ์‹ค์ˆ˜์ž…๋‹ˆ๋‹ค HTML. ์™œ?

HTML๊ทธ๋ฆฌ๊ณ  ๋ฌธ์„œ์šฉ ๋งˆํฌ์—… ์–ธ์–ด๋ผ๋Š” ์ ์ž…๋‹ˆ๋‹ค . ๋งค์šฐ ๋‹จ์ˆœํ™”ํ•˜๋ฉด HTML-document๊ทธ๋ฆผ, ํ‘œ, ๋งํฌ ๋“ฑ์ด ์‚ฝ์ž…๋œ ํ…์ŠคํŠธ(๋ฌธ์„œ)์ž…๋‹ˆ๋‹ค.

๋‹ค์Œ๊ณผ ๊ฐ™์€ ๊ธฐ์‚ฌ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‹ถ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

  • ๊ธฐ์‚ฌ ์ œ๋ชฉ(์ œ๋ชฉ).
  • ํ•œ ๋‹จ๋ฝ์œผ๋กœ ๊ตฌ์„ฑ๋œ ๊ธฐ์‚ฌ ์ž์ฒด.
  • ๊ทธ๋ฆผ.
  • ๊ตต๊ฒŒ ํ‘œ์‹œํ•˜๊ณ  ์‹ถ์€ ๋ช‡ ๊ฐ€์ง€ ์ค‘์š”ํ•œ ์ง„์ˆ .
  • ๊ธฐ์‚ฌ ์ค‘๊ฐ„์— ๋ช‡ ๊ฐ€์ง€ ์œ ์šฉํ•œ ์ •๋ณด์— ๋Œ€ํ•œ ๋งํฌ๋ฅผ ์ œ๊ณตํ•˜์‹ญ์‹œ์˜ค.

๋‹ค์Œ์€ ์ด ๋ฌธ์„œ๊ฐ€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์–ด๋–ป๊ฒŒ ๋ณด์ด๋Š”์ง€์ž…๋‹ˆ๋‹ค.


๊ตญ๋‚ด ๊ณ ์–‘์ด

๊ณผํ•™์  ๋ถ„๋ฅ˜ํ•™์˜ ๊ด€์ ์—์„œ ์ง‘๊ณ ์–‘์ด๋Š” ์‹์œก๋ชฉ ๊ณ ์–‘์ด๊ณผ ์˜ ํฌ์œ ๋ฅ˜ ์ž…๋‹ˆ๋‹ค. ์ข…์ข… ์ง‘ ๊ณ ์–‘์ด๋Š” ์ˆฒ ๊ณ ์–‘์ด์˜ ์•„์ข…์œผ๋กœ ๊ฐ„์ฃผ๋˜์ง€๋งŒ ํ˜„๋Œ€ ์ƒ๋ฌผํ•™์  ๋ถ„๋ฅ˜ํ•™(2017)์˜ ๊ด€์ ์—์„œ ์ง‘ ๊ณ ์–‘์ด๋Š” ๋ณ„๋„์˜ ์ƒ๋ฌผ ์ข…์ž…๋‹ˆ๋‹ค .


๊ฝค ์ข‹์•„, ๊ทธ๋ ‡์ง€? ๊ทธ๋ฆฌ๊ณ  ํ‘œ์ค€์„ HTMLํ†ตํ•ด ์ด ๋ฌธ์„œ๋ฅผ ์‚ฌ๋žŒ๊ณผ ์ปดํ“จํ„ฐ ๋ชจ๋‘๊ฐ€ ์ฝ์„ ์ˆ˜ ์žˆ๋„๋ก ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค HTML-standard.

<h1> ๊ตญ๋‚ด ๊ณ ์–‘์ด </h1>

๊ณผํ•™์  ๋ถ„๋ฅ˜ํ•™์˜ ๊ด€์ ์—์„œ ์ง‘๊ณ ์–‘์ด๋Š” ์‹์œก๋ชฉ ๊ณ ์–‘์ด๊ณผ์˜ <a href=โ€/โ€> ํฌ์œ ๋ฅ˜ </a> ์ž…๋‹ˆ๋‹ค. ์ข…์ข… ์ง‘ ๊ณ ์–‘์ด๋Š” ์ˆฒ ๊ณ ์–‘์ด์˜ ์•„์ข…์œผ๋กœ ๊ฐ„์ฃผ๋˜์ง€๋งŒ ํ˜„๋Œ€ ์ƒ๋ฌผํ•™์  ๋ถ„๋ฅ˜ํ•™(2017)์˜ ๊ด€์ ์—์„œ ์ง‘ ๊ณ ์–‘์ด๋Š” <b> ๋ณ„๋„์˜ ์ƒ๋ฌผํ•™์  ์ข…์ž…๋‹ˆ๋‹ค </b> .

<img src=โ€๊ณ ์–‘์ด.jpgโ€>

์‚ฌ๋žŒ๊ณผ ์ปดํ“จํ„ฐ(๋ธŒ๋ผ์šฐ์ €) ๋ชจ๋‘๊ฐ€ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ์‚ฌ ํ…์ŠคํŠธ ( ๋นจ๊ฐ„์ƒ‰์œผ๋กœ ๊ฐ•์กฐ ํ‘œ์‹œ๋จ)์— ํŠน์ˆ˜ ํƒœ๊ทธ๊ฐ€ ์ถ”๊ฐ€๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๋Š” ๋…์ž๋ฅผ ์œ„ํ•ด ๊ธฐ์‚ฌ๋ฅผ ์•„๋ฆ„๋‹ต๊ฒŒ ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ๊ธฐ์‚ฌ ์ž‘์„ฑ์ž๋Š” ์‰ฝ๊ฒŒ ํŽธ์ง‘ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

1.3 HTTP ํ”„๋กœํ† ์ฝœ์˜ ๋“ฑ์žฅ

์•ฝ์–ด๋Š” Hypertext Document Markup Language HTML์˜ ์•ฝ์ž์ž…๋‹ˆ๋‹ค . Hyper Text Markup Languageํ•˜์ดํผํ…์ŠคํŠธ๋Š” ์„œ๋กœ ์—ฐ๊ฒฐ๋œ ํŽ˜์ด์ง€๋กœ ๊ตฌ์„ฑ๋œ ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค. ์ด๊ฒŒ ๋ญ์•ผ http?

HTTPHypertext Transfer Protocol(ํ‘œ์ค€)์„ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค Hyper Text Transfer Protocol. http๋˜๋Š” https์—ด๋ ค ์žˆ๋Š” ํŽ˜์ด์ง€์— ๋Œ€ํ•œ ๋งํฌ๋ฅผ ๋ณต์‚ฌํ•˜๋ ค๊ณ  ํ•˜๋ฉด ๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์†Œ ํ‘œ์‹œ์ค„์—์„œ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์ผ๋ฐ˜์ ์ธ ํŽ˜์ด์ง€ ๋งํฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

http://google.com/logo.jpg

๋งํฌ ๋งจ ์•ž์—๋Š” ํ”„๋กœํ† ์ฝœ ์ด๋ฆ„์ด ์žˆ๊ณ  ๊ทธ ๋’ค์— ์ฝœ๋ก ๊ณผ ๋‘ ๊ฐœ์˜ ์Šฌ๋ž˜์‹œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. Tim Bernes-Lee๋Š” ํ•œ ์ธํ„ฐ๋ทฐ์—์„œ ํ”„๋กœํ† ์ฝœ์ด http๊ทธ๋ ‡๊ฒŒ ์ธ๊ธฐ๊ฐ€ ์žˆ์„ ์ค„ ์•Œ์•˜๋‹ค๋ฉด ๋” ์งง์€ ๊ฒƒ์„ ์ƒ๊ฐํ•ด๋ƒˆ์„ ๊ฒƒ์ด๋ผ๊ณ  ๋งํ•œ ์ ์ด ์žˆ์Šต๋‹ˆ๋‹ค. (๊ฒฐ๊ตญ ์„ธ์ƒ์˜ ๊ฑฐ์˜ ๋ชจ๋“  ๋งํฌ๋Š” ๋‹จ์–ด http://๋˜๋Š” ๋กœ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค https://)

๋ธŒ๋ผ์šฐ์ €๋กœ ๋Œ์•„๊ฐ€ ๋ด…์‹œ๋‹ค. ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์š”์ฒญํ•˜๋ฉด html-page์„œ๋ฒ„์— ํ…์ŠคํŠธ ํŒŒ์ผ(์š”์ฒญ)์„ ๋ณด๋‚ด๊ณ  ๋‹ค๋ฅธ ํ…์ŠคํŠธ ํŒŒ์ผ(์‘๋‹ต)์„ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์ด ์ž‘๋™ ๋ชจ๋“œ๋ฅผ ํด๋ผ์ด์–ธํŠธ-์„œ๋ฒ„๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค.

๋จผ์ € ํ•ต์‹ฌ ์ •๋ณด๊ฐ€ ์žˆ๋Š” ์ค„์ด ์žˆ๊ณ  ์„œ๋น„์Šค ์ •๋ณด๊ฐ€ ์žˆ๋Š” ์ค„์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ…์ŠคํŠธ ์ฟผ๋ฆฌ์˜ ์ฒซ ๋ฒˆ์งธ ์ค„์€ ํ…œํ”Œ๋ฆฟ์— ์˜ํ•ด ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

MethodURI  HTTP/Version

CodeGym ์‚ฌ์šฉ์ž์˜ ๊ฐœ์ธ ํŽ˜์ด์ง€๋Š” ๋งํฌ๋กœ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค.

https://codegym.cc/me

http-request๋ธŒ๋ผ์šฐ์ €๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

GET /me  HTTP/1.0
Host: codegym.cc

์‘๋‹ต์œผ๋กœ ์„œ๋ฒ„๋Š” ๋Œ€๋ถ€๋ถ„ ๋ณด๋‚ผ ๊ฒƒ์ž…๋‹ˆ๋‹ค.

HTTP/1.0 200 OK
<html>page text...

์‘๋‹ต ํ…์ŠคํŠธ์˜ ์ฒซ ๋ฒˆ์งธ ์ค„์€ http ํ”„๋กœํ† ์ฝœ ๋ฒ„์ „๊ณผ ์‘๋‹ต ์ƒํƒœ(200, OK) ์ž…๋‹ˆ๋‹ค . ๊ทธ๋Ÿฐ ๋‹ค์Œ ๋นˆ ์ค„์ด ๋‚˜์˜ค๊ณ html-page ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์š”์ฒญํ•œ ํ…์ŠคํŠธ ํ˜•์‹์˜ ์ค„์ด ๋‚˜์˜ต๋‹ˆ๋‹ค . ๋ชจ๋“  ๊ฒƒ์ด ๋งค์šฐ ๊ฐ„๋‹จํ•ฉ๋‹ˆ๋‹ค :)