꺾이지 않는 마음

웹의 작동원리와 HTML/CSS/JS에 대한 이해 본문

웹 프로그래밍/HTML&CSS

웹의 작동원리와 HTML/CSS/JS에 대한 이해

중요한 것은 2022. 8. 1. 01:45

#1 '웹개발'이란?


말 그대로 웹페이지를 만드는 것이다.

 

 

#2 작동원리


우리는 보통 웹 사이트를 방문하기 위해서는 컴퓨터나 노트북으로 브라우저를 이용한다.

브라우저 주소창에 특정 주소를 입력하거나, 포털사이트 검색 결과로 나온 링크를 클릭하면 브라우저가 그 기업의 컴퓨터에 방문하겠다는 요청을 보낸다.

이 요청을 보낼 때 쓰는 표준화된 방식이 'HTTP' 혹은 'HTTPS'(Hypertext Transfer Protocol Secure)이며, 컴퓨터는 사용자에게 보여줄 웹페이지 화면을 나타내는 웹사이트 코드를 브라우저에게 보냄으로써 이에 응답한다.

 

즉, 웹 개발자란 어떤 코드로,' 어떤 프로그래밍 언어로 응답을 보낼 코드를 작성해야 할까'를 고민하는 것이라고 사람이라고 할 수 있다. 물론, 이건 매우 축소된 의미이다.

 

웹 개발자가 알아야할 3가지 언어가 있는데,

HTML:(Hypertext markup language)

CSS(cascading style sheets)

JS(Java Script)

이다.

 

HTML은 웹 사이트의 실제 내용과 구조를 만드는 데 사용하는 언어인데,

HTML만 사용하면 웹사이트의 내용은 잘 나타나지만 디자인이 안예뻐서 보기에 좋지가 않다.

이 때, 사용하는 언어가 CSS(cascading style sheets)이다.

CSS는 웹사이트의 스타일을 정의할 수 있는 언어로, 웹사이트의 디자인적 요소를 담당한다.

그리고 마지막 JS(Java Script)는 웹페이지가 사용자와 상호작용을 할 수 있게 해주는 언어이다.

 

다시 작동 원리로 돌아와서,

인터넷의 모든 장치들은 식별하기 위해 IP(Internet Protocol) Address를 가지고 있다.

흔히 우리가 게임하다가 싸움이 나면 "너 아이피 추적해서 찾아간다"라고 할 때 그 아이피가 바로 이 단어이다.

그러므로 방문하려는 특정 기업의 컴퓨터 인터넷의 IP 주소를 알면 그 웹사이트를 방문할 수 있다.

 

하지만 길고 복잡한 IP주소를 일일이 기억하긴 어렵기 때문에 사용자는 '도메인'으로 웹사이트에 접속한다.

우리가 주소창에서 흔히 보는 'amazon.com', 'apple.com' 이 바로 도메인이다.

 

모든 IP주소를 저장하고 있는 DNS 서버라는 곳이 있는데,

브라우저는 사용자가 입력한 도메인을 IP주소로 변환하기 위해 DNS 서버에 대화를 시도하고,

DNS 서버가 요청받은 도메인에 상응하는 IP주소를 브라우저에게 주어 웹사이트에 방문할 수 있게 되는 것이다.

 

웹사이트 하나 접속하는데 뭐 이렇게 오래 걸리나 싶지만,

이는 현실에서 단 몇 초 만에 이루어지는 과정이다.

Comments