[직일구의 IT공부] 웹개발 도전 3일차 - 웹사이트가 동작하는 법 이해하기

이번 글에서는 웹사이트가 실제로 어떻게 작동하는지 정확히 배우고 웹사이트의 역할을 이해하도록 해보겠습니다. 

 

클라이언트가 서버에게 정보를 요청하면 서버는 보통 3가지 유형의 파일을 제공합니다. 

바로 HTML, CSS, JavaScript 입니다.

1. HTML 코드 파일은 웹 사이트의 콘텐츠를 담당합니다.
따라서 웹사이트가 집이라면 HTML은 집의 실제 벽돌이 될 것입니다.

HTML 파일에는 텍스트 콘텐츠나 이미지와 같은 웹사이트 콘텐츠가 포함되어 있습니다.

 

2. 두 번째 유형의 파일은 CSS 파일이며 웹사이트의 스타일을 다음과 같이 지정합니다.

CSS 파일은 웹사이트의 모양을 결정합니다.
CSS를 사용하여 버튼을 빨간색으로 만들고 모서리를 둥글게 만들고 버튼 텍스트에 특정 내용을 지정할 수 있습니다.

 

3. 이제 마지막 구성 요소는 JavaScript 코드입니다. 이 코드는 귀하의 웹사이트가 실제로 일을 하거나 기능을 갖습니다.

예쁜 이미지나 텍스트만 있는 정적 웹사이트를 사용자가 실제로 사용할 수 있는 웹사이트로 바꿔줍니다.
상호 작용합니다.
예를 들어 Gmail로 이메일을 보내거나 Instagram에 포스팅할 수 있게 만들지요. 
이를 통해 웹 사이트는 단지 보기에 예쁜 것이 아니라 실제로 작업을 수행하고 기능적으로 될 수 있습니다.

맥북을 사용하는 사람이라면 크롬에서 커맨트+옵션+I 를 누르면 아래와 같은 화면을 볼 수 있습니다. 

윈도우 사용자인 경우, 크롬에서 F12 를 누르면 됩니다. 

 

위 화면의 오른쪽에서 볼 수 있듯이, html 안에, 

<script type="module" src="new_tab_page.js"></script> 라는 부분에서 자바스크립트도 보이고, 

<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> 라는 부분에서 css 파일도 보이네요. 

 

이렇게 통상적으로 html, css, js 가 서버로부터 제공됩니다. 

 

반대로 말하자면, 웹 개발자가 되면, html, css, js 를 통해 내가 원하는 웹사이트를 만들어, 찾는 사람들에게 알맞은 화면과 정보를 제공해 줄 수 있다는 말입니다. 

 

이제부터 html,css, js를 순차적으로 공부해야할 것 같군요.