๐ HTML ์ด๋ ๋ฌด์์ธ๊ฐ?
HTML(Hypertext Markup Language)๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์๋๋ผ ๋งํฌ์ ์ ๋ณด๋ฅผ ํํํ๋ ์น ํ์ด์ง ์ธ์ด์ ๋๋ค ์น ํ์ด์ง๋ HTML ๋ฌธ์๋ผ๊ณ ๋ถ๋ฅด๊ณ , HTML์ ํ๊ทธ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค ๊ฐ๊ฐ์ ํ๊ทธ๊ฐ ์น ํ์ด์ง ๋์์ธ์ด๋ ๊ธฐ๋ฅ์ ๊ฒฐ์ ํ๋ ๋ฐ ์ฌ์ฉํฉ๋๋ค
HTML ํ๊ทธ๋ ํ๊ทธ ์ด๋ฆ ์์ ๊บพ์ ๊ดํธ(<>)๋ก ๊ฐ์ธ์ ํํํฉ๋๋ค
์ด ํ๊ทธ๋ ์์ ํ๊ทธ์ ์ข ๋ฃ ํ๊ทธ๋ก ๊ตฌ์ฑ๋๋๋ฐ ์์ ํ๊ทธ๋ ๊บพ์ ๊ดํธ (<์ด๋ฆ>) ์์ ํ๊ทธ ์ด๋ฆ์ ๋ถ์ด์ง๋ง ์ข ๋ฃ ํ๊ทธ๋
ํ๊ทธ ์ด๋ฆ ์์ ์ฌ๋์(</์ด๋ฆ>)์ผ๋ก ํํํฉ๋๋ค
HTML ๋ฌธ์๋ ๊ธฐ๋ณธ์ ์ผ๋ก head ๋ถ๋ถ๊ณผ body ์์ญ์ผ๋ก ๊ตฌ์ฑ๋ฉ๋๋ค
โ HTML ๋ฒ์
์ ์ฌ์ง์์ <!DOCTYPE html>์ด๋ผ๋ ๋ฌธ์ ํ์ ์ด ์ค์ ๋์ด ์๋๋ฐ ์ด ๋ฌธ์ ํ์ ์ HTML ๋ฌธ์๋ฅผ ์์ฑํ ๋ ๊ฐ์ฅ ๋จผ์ ์์ฑํด์ผ ํฉ๋๋ค ์ด๋ฌํ ๋ฌธ์ ์ค์ ์ ๋ฌธ์ ์ ํ์ ๋ฐ๋ผ ๋งํฌ์ ๋ฌธ์์ ์์์ ์์ฑ ๋ฑ์ ์ฒ๋ฆฌํ๊ฒ ๋ฉ๋๋ค
| ๋ฒ์ | ๋ ๋ | DOCTYPE ๋ฐ ์ค๋ช |
| HTML 1.0 | 1991 | ํ ๋ฒ๋์ค๋ฆฌ๊ฐ ๋ฐํํ ์ต์ด์ HTML |
| HTML 2.0 | 1995 | ๊ตญ์ ํ์ค์ผ๋ก ์ ์ ๋ ์ต์ด์ HTML |
| HTML 3.0 | 1997 | W3C์ ์ํด ์ ์ ๋ ์ต์ด์ HTML |
| HTML 4.01 | 1999 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| HTML 1.0 | 2000 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| HTML 5 | 2014 | <!DOCTYPE html> |
W3C(World Wide Web Consortium) : ์๋ ์์ด๋ ์น(www)์ ์ํ ํ์ค์ ์ ์ ํ๊ณ ๊ด๋ฆฌํ๋ ์ค๋ฆฝ์ ์ธ ๊ธฐ๊ด์ ๋๋ค
๐ง HTTP, HTTPS ํ๋กํ ์ฝ ์ฐจ์ด์
์ฐ๋ฆฌ๊ฐ URL์ ํตํด ์น ํ์ด์ง์ ๋ฐฉ๋ฌธํ ๋ URL ์์ HTTP์ HTTPS๋ฅผ ๋ถ์ด๋ ๊ฑธ ์ ์ ์์ต๋๋ค ์ฌ๊ธฐ์ HTTP๋ Hyper Text Transfer Protocol ์ฝ์๋ก ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ ํต์ ์ ์ํ ํ๋กํ ์ฝ์ ๋๋ค
์ฌ์ฉ์๊ฐ ์น ์ฌ์ดํธ์ ์ ์ํ ๋ ์ ์ํ ์น ์๋ฒ์ HTTP ์์ฒญ์ ์ ์กํ๊ณ ์น ์๋ฒ๋ HTTP๋ก ์๋ตํฉ๋๋ค ๊ฐ๋จํ ์ค๋ช ํ์๋ฉด HTTP ํ๋กํ ์ฝ์ ๋คํธ์ํฌ ํต์ ์ ์๋ํ๊ฒ ํ๋ ๋ฐฉ๋ฒ์ ๋๋ค ํ์ง๋ง HTTPS(HyperText Transfer Protocol Secure)๋ HTTP ๋ณด๋ค ๋ณด์์ ์ธ ๋ฉด์์ ํ์ฅ๋ ๋ฒ์ ์ ๋๋ค ์ด๋ฌํ HTTPS๋ ํด๋ผ์ด์ธํธ๊ฐ ์น ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ์ ์ ์ํธํ๋ ์ฐ๊ฒฐ์ ์ฌ์ฉํ๊ฒ ๋ฉ๋๋ค
HTTP๋ ์ํธํ๋์ง ์์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๊ธฐ ๋๋ฌธ์ ์น ์ฌ์ดํธ์์ ์ ์ก๋ ์ ๋ณด๋ฅผ ๋ค๋ฅธ ์ฌ์ฉ์๊ฐ ๋ชฐ๋ ๊ฐ๋ก์ฑ ์ ์์ต๋๋ค ์ด๋ HTTPS๋ฅผ ์ฌ์ฉํ๋ฉด ์น ์๋ฒ์ ๋ชจ๋ ๋ฐ์ดํฐ๋ฅผ ์ํธํ๋ ํํ๋ก ์ ์กํ๊ธฐ ๋๋ฌธ์ ์ค๊ฐ์ ์ ๋ณด๋ฅผ ๊ฐ๋ก์ฑ๋ ํ์๋ฅผ ๋ฐฉ์งํ ์ ์์ต๋๋ค
| HTTP | HTTPS | |
| ์๋ฏธ | Hyper Text Transfer Protocol | Hyper Text Transfer Protocol Secure |
| ๊ธฐ๋ณธ ํ๋กํ ์ฝ | HTTP/1๊ณผ HTTP/2๋ TCP/IP๋ฅผ ์ฌ์ฉํฉ๋๋ค. HTTP/3์ QUIC ํ๋กํ ์ฝ์ ์ฌ์ฉํฉ๋๋ค. | HTTP ์์ฒญ ๋ฐ ์๋ต์ ์ถ๊ฐ๋ก ์ํธํํ๊ธฐ ์ํด SSL/TLS์ ํจ๊ป HTTP/2 ์ฌ์ฉ |
| ํฌํธ | 80 | 443 |
| ์ฉ๋ | ์ด์ ํ ์คํธ ๊ธฐ๋ฐ ์น ์ฌ์ดํธ | ๋ชจ๋ ์ต์ ์น ์ฌ์ดํธ |
| ๋ณด์ | ์ถ๊ฐ ๋ณด์ ๊ธฐ๋ฅ ์์ | ํผ๋ธ๋ฆญ ํค ์ํธํ์ SSL ์ธ์ฆ์ ์ฌ์ฉ |
| ์ด์ | ์ธํฐ๋ท์ ํตํ ํต์ ์ง์ | ์น ์ฌ์ดํธ์ ๋ํ ๊ถ์, ์ ๋ขฐ์ฑ ๋ฐ ๊ฒ์ ์์ง ์์ ๊ฐ์ |
๐ป ํด๋ผ์ด์ธํธ ์ฌ์ด๋์ ์๋ฒ ์ฌ์ด๋
ํด๋ผ์ด์ธํธ ์ฌ์ด๋(Client-side)๋ ์ฌ์ฉ์ ์ปดํจํฐ์์ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค
- ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ ๋ณด๋ฅผ HTML๋ก ๋ณํํ์ฌ ๋ค์ด๋ฒ๋ ๋ค๋ฅธ ์น์ฌ์ดํธ ์๋ฒ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋๋ฐ ์ด ์ ์ก๋ ๋ฐ์ดํฐ๋ฅผ ํด์ํด์ ์ ๋ณด๋ฅผ ๋ํ๋ด์ค๋๋ค
- ๋ํ์ ์ผ๋ก ์๋ฐ์คํฌ๋ฆฝํธ(Javascript)๋ฅผ ์ฌ์ฉํ์ฌ ๋ง๋ค์ด์ง ์น ํ์ด์ง๊ฐ ์์ต๋๋ค
์๋ฒ ์ฌ์ด๋(Server side)๋ ์๋ฒ ์ธก์์ ์ฒ๋ฆฌํ๋ ๊ฒ์ ์๋ฏธํฉ๋๋ค
- ํด๋ผ์ด์ธํธ์๊ฒ ๋ฐ์ ์ ๋ณด๋ฅผ ์ฒ๋ฆฌํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์น ๋ธ๋ผ์ฐ์ ์ ์ก์ ๊ณผ ์๋ตํ๋ ์ญํ ์ ํฉ๋๋ค
- ํด๋ผ์ด์ธํธ๋ก๋ถํฐ ์์ฒญ๋ฐ์ ์ ๋ณด๋ฅผ PHP, Ruby, Java, Node.js ๋ฑ์ ์๋ฒ ์ฌ์ด๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ์ฌ์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ์๊ฒ ์ก์ ํฉ๋๋ค
์ฆ ํด๋ผ์ด์ธํธ ์ฌ์ด๋๋ ์ฌ์ฉ์์ ๋ธ๋ผ์ฐ์ ๋ ํด๋ผ์ด์ธํธ ๊ธฐ๊ธฐ์์ ์๋๋๊ณ ์๋ฒ ์ฌ์ด๋๋ ์น ์๋ฒ๋ ์๋ฒ ์ปดํจํฐ์์ ์๋๋จ
ํด๋ผ์ด์ธํธ ์ฌ์ด๋ : HTML, CSS ๋ฐ JavaScript๋ก ์์ฑ๋ ์น ํ์ด์ง์์ ๋ฐ๊ฒฌ๋จ ( ํ๋ก ํธ ์๋ )
์๋ฒ ์ฌ์ด๋ : ๋ฐฑ์๋ ๊ฐ๋ฐ ์ธ์ด๋ก ์์ฑ๋ ์น ์ ํ๋ฆฌ์ผ์ด์ ์๋ฒ์์ ๋ฐ๊ฒฌ๋จ
๐จ ํด๋ผ์ด์ธํธ์ ์๋ฒ ์ฌ์ด๋์ ๋ฐ์ดํฐ ์ฒ๋ฆฌ ๋ถ๋ถ ๐จ
ํด๋ผ์ด์ธํธ ์ฌ์ด๋(Client side)์ ์ฒ๋ฆฌ
- ์ฅ์ : ์๋ฒ ๊ด๋ฆฌ์ ์ ์ฅ์์ ์๋ฒ์ ์ฒ๋ฆฌ ๋ถ๋ด์ ์ค์ฌ ์๋ฒ ๋น์ฉ์ ์ค์ผ ์ ์๋ค
- ๋จ์ : ๊ฐ๋ฐ์ ๋ชจ๋(F12)๋ฅผ ์ด์ฉํ์ฌ ํด๋ผ์ด์ธํธ ์ ์ฅ์์ ๋ฐ์ดํฐ๋ฅผ ์์กฐํ๊ธฐ ์ฝ๋ค
์๋ฒ ์ฌ์ด๋(Server side)์ ์ฒ๋ฆฌ
- ์ฅ์ : ํด๋ผ์ด์ธํธ ์ ์ฅ์์ ๋ฐ์ดํฐ ์์กฐ๋ฅผ ์ค์ผ ์ ์๋ค
- ๋จ์ : ์๋ฒ ๊ด๋ฆฌ์ ์ ์ฅ์์ ์๋ฒ์ ๋ํ ์ฒ๋ฆฌ ๋ถ๋ด์ด ์ปค์ ์๋ฒ ๋น์ฉ์ด ๋์ด๋ ์ ์๋ค
์น ์๋ฒ ๊ตฌ์กฐ
์์์ ๊ฐ๋จํ๊ฒ HTML ๊ตฌ์กฐ์ ๋ํด ์ค๋ช ํ๋๋ฐ ์ด๋ฒ์๋ HTML์ผ๋ก ๊ตฌํ๋ ์น ์๋ฒ์ ๋์ ๊ตฌ์กฐ๋ฅผ ์ดํด๋ณด๊ฒ ์ต๋๋ค ์น ์๋ฒ์ ๋์ ๊ตฌ์กฐ๋ ๊ฐ๋จํ๊ฒ ํด๋ผ์ด์ธํธ๊ฐ ์น ํ์ด์ง์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ฉด ์ ์ก๋ ๋ฐ์ดํฐ์ ๋ง๋ ์ ๋ณด๋ฅผ ์น ์๋ฒ๊ฐ ํด๋ผ์ด์ธํธ์๊ฒ ์๋ตํด ์ฃผ๋ ๊ตฌ์กฐ์ ๋๋ค ์ด ๊ตฌ์กฐ๋ ์ผํ ๋ณด๋ฉด ๊ฐ๋จํด ๋ณด์ด์ง๋ง ๋ด๋ถ์์๋ ์ธ๋ฐํ ๊ณผ์ ์ด ํ์ํฉ๋๋ค
๋จผ์ ์ฐ๋ฆฌ๊ฐ ๋ค์ด๋ฒ ํํ์ด์ง์ ์ ์ํ๋ค๊ณ ๊ฐ์ ํด ๋ณผ ๋ (์ฐ๋ฆฌ = ์ฌ์ฉ์, ๋ค์ด๋ฒ ํํ์ด์ง = ์น ํด๋ผ์ด์ธํธ๋ฅผ ๋ปํจ)
์ฌ๊ธฐ์ ์น ํด๋ผ์ด์ธํธ๋ ์ฌ์ฉ์๊ฐ ์น์ ์ ๊ทผํ๋ ํ๋ก๊ทธ๋จ์ ๋งํฉ๋๋ค ์ฐ๋ฆฌ๊ฐ ๋ณด๋ ์น์ ๋๋ถ๋ถ ๋ธ๋ผ์ฐ์ ์์ ์คํ๋๊ธฐ ๋๋ฌธ์ ๋ณดํต Chrome์ด๋ Internet Explorer ๋ฑ์ ์น ๋ธ๋ผ์ฐ์ ๋ฅผ ์น ํด๋ผ์ด์ธํธ๋ผ๊ณ ํฉ๋๋ค
์ฆ ์ฌ์ฉ์ ๋ธ๋ผ์ฐ์ ์ฃผ์์ฐฝ์์ https://www.naver.com ์ฃผ์๋ฅผ ์ ๋ ฅํ๊ณ ์ํฐํค๋ฅผ ๋๋ฅด๋ฉด ํด๋ผ์ด์ธํธ๋ ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ฃผ์์ ์ ๋ณด๋ฅผ ์ฐพ์ HTTP ๋ฉ์์ง ํํ๋ก ์๋ฒ์ ์์ฒญํ๊ฒ ๋ฉ๋๋ค
์์ฒญ๋ฐ์ ์น ์๋ฒ๋ HTTP ๋ฉ์์ง๋ฅผ ํ์ธํ์ฌ ํด๋น ์ฃผ์์ ๋ํ ์ ๋ณด๋ฅผ ํด๋ผ์ด์ธํธ์๊ฒ ์ ์กํฉ๋๋ค
์ด๋ ์น ์๋ฒ๋ WAS(Web Application Server)๋ผ๋ ์์์ ํจ๊ป ์ผ์ ํ๋๋ฐ WAS๋ ์๋ฅผ ๋ค์ด ์ฐ๋ฆฌ๋ฟ๋ง ์๋๋ผ ์ฌ๋ฌ ๋ช ์ ๋ค๋ฅธ ์ฌ๋๋ค์ด ๋ค์ด๋ฒ ํํ์ด์ง์ ์ ์ํ๋ค๊ณ ๊ฐ์ ํด ๋ณด๋ฉด ์์ฒญํ๋ ์ฌ๋์ด ์ฌ๋ฌ ๋ช ์ธ๋ฐ ๊ทธ๊ฑธ ์ฒ๋ฆฌํ๋ ์น ์๋ฒ๋ ํผ์์ ๋ฐ์ดํฐ๋ฅผ ํด์ํ๊ณ ์๋ตํด์ผ ํฉ๋๋ค ์ด ๊ณผ์ ์์ ๊ณผ๋ถํ๊ฐ ์ผ์ด๋ฌ์ ๋ WAS๋ ์น ์๋ฒ๊ฐ ํ๋ ์ผ์ ๋ถ๋ดํด์ ๋์์ฃผ๋ ์ญํ ์ ํฉ๋๋ค
์น ์๋ฒ๋ ํด๋ผ์ด์ธํธ์๊ฒ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ WAS์๊ฒ ํด๋น ๋ฐ์ดํฐ์ ๋ก์ง์ด๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค์ ์ฐ๋์ ๋งก๊ธฐ๊ฒ ๋ฉ๋๋ค ๊ทธ๋ฌ๋ฉด WAS๋ ์ด ์์ฒญ์ ๋ฐ๊ณ ๋ก์ง๊ณผ DB์์ ๋ฐ์ดํฐ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ฒ ๋ฉ๋๋ค ์ด์ฒ๋ผ WAS๋ ์น์๋ฒ๋ฅผ ๋์์ฃผ๋ ์ญํ ๊ณผ ๋๋ถ์ด DB์์ ๋ฐ์ดํฐ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฏธ๋ค์จ์ด ๋ผ๊ณ ํฉ๋๋ค
๋ง์ง๋ง์ผ๋ก DB๋ ๋ฐ์ดํฐ์ ์ ๋ณด๋ฅผ ๋ณด๊ดํ๋ ์ ์ฅ์์ ๋๋ค WAS์์ ๋ฐ์ดํฐ๋ฅผ ์์ฒญ๋ฐ์ผ๋ฉด ํด๋น ๋ฐ์ดํฐ์ ์ ๋ณด๋ฅผ ๋ณด๋ด์ค๋๋ค ์ฌ์ฉ์๊ฐ ๋ค์ด๋ฒ ๋ก๊ทธ์ธ ์ ๋ณด๋ฅผ ์์ฒญํ ๋ ์น ์๋ฒ๋ WAS์๊ฒ ๋ถํํด์ ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ๋ฐ์ดํฐ๋ฅผ DB์๊ฒ ์์ฒญํ๊ฒ ๋ฉ๋๋ค ๊ทธ๋ฌ๋ฉด DB๋ ์ฌ์ฉ์ ์ ๋ณด๋ฅผ WAS์๊ฒ ๋๊ฒจ์ฃผ๊ฒ ๋ฉ๋๋ค
(DB๋ ์ฌ์ฉ์์ ๋ก๊ทธ์ธ ์ ๋ณด์ ๊ฐ์ด ๋ฐ์ดํฐ๋ฅผ ๋ณด๊ดํ๋ ์ ์ฅ์์ ๋๋ค)
๊ฐ๋จํ ์ ๋ฆฌ : ์ฌ์ฉ์๊ฐ ์น ํด๋ผ์ด์ธํธ๋ฅผ ํตํด ๋ก๊ทธ์ธ ์ ๋ณด ์์ฒญ > ์น ์๋ฒ๊ฐ WAS์๊ฒ ์ฌ์ฉ์ ๋ก๊ทธ์ธ ์ ๋ณด ๋ถํ > WAS > DB(์ฌ์ฉ์ ๋ก๊ทธ์ธ ์ ๋ณด๋ฅผ ์ฐพ๋๋ค) > ์ด ๊ณผ์ ์ญ์
๐ ์ฉ์ด ์ ๋ฆฌ
- HTTP(HyperText Transfer Protocol): ํด๋ผ์ด์ธํธ์ ์๋ฒ ๊ฐ ํต์ ์ ์ํ ํ๋กํ ์ฝ ์ ๋๋ค
- ํ๋กํ ์ฝ(Protocol) : ์ปดํจํฐ ์ฌ์ด์์ ๋ฐ์ดํฐ์ ๊ตํ ๋ฐฉ์์ ์ ์ํ๋ ๊ท์น ์ฒด๊ณ
[ ์ฐธ๊ณ ์๋ฃ ]
[ ์ฐธ๊ณ ์ฌ์ดํธ ]
์ฝ๋ฉ๊ต์ก ํฐ์จํผ์ค์ฟจ
4์ฐจ์ฐ์ ํ๋ช , ์ฝ๋ฉ๊ต์ก, ์ํํธ์จ์ด๊ต์ก, ์ฝ๋ฉ๊ธฐ์ด, SW์ฝ๋ฉ, ๊ธฐ์ด์ฝ๋ฉ๋ถํฐ ์๋ฐ ํ์ด์ฌ ๋ฑ
tcpschool.com
HTTP์ HTTPS ๋น๊ต - ์ ์ก ํ๋กํ ์ฝ ๊ฐ์ ์ฐจ์ด์ - AWS
1996~1997๋ ์ ์ถ์๋ ์ต์ด์ HTTP ๋ฒ์ ์ด HTTP/1.1์ ๋๋ค. HTTP/2์ HTTP/3์ ํ๋กํ ์ฝ ์์ฒด๋ฅผ ์ ๊ทธ๋ ์ด๋ํ ๋ฒ์ ์ ๋๋ค. ๋ฐ์ดํฐ ์ ์ก ์์คํ ์ ์์ ํ๋ฉด์ ํจ์จ์ฑ์ ๊ฐ์ ํ์ต๋๋ค. ์๋ฅผ ๋ค์ด, HTTP/2๋ ํ
aws.amazon.com
์๋ฒ ์ฌ์ด๋์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋
โ๏ธ ์๋ฒ ์ฌ์ด๋(Server-Side)์ ํด๋ผ์ด์ธํธ ์ฌ์ด๋(Client-Side) ์๋ฒ ์ฌ์ด๋(Server-Side)๋ ๋คํธ์ํฌ์ ํ ๋ฐฉ์์ธ ํด๋ผ์ด์ธํธ-์๋ฒ ๊ตฌ์กฐ์์ ์๋ฒ์์์ ์ฒ๋ฆฌ๋ฅผ ๋งํ๋ค ์น์์์ ์๋ฒ ์ฌ์ด๋๋ฅผ ๊ฐ๋จํ
dev-ku.tistory.com
[Web] ๊ทธ๋ฆผ์ผ๋ก ์์๋ณด๋ ์น - 1ํธ ์น์ ๋์ ์๋ฆฌ
๋ณด๊ณ , ๋ฃ๊ณ , ๊ฐ๋ฐํ ๋ด์ฉ์ ๊ธฐ๋กํ ๊ณต๊ฐ์ ๋๋ค.
swimjiy.github.io
