HTML, CSS, JS

우리가 하나의 캐릭터를 완성해야 한다고 하자. 아래 그림처럼 HTML로는 캐릭터의 기본적이 요소인 눈과 입 등의 구조적인 부분을 작성할 수 있다. CSS는 이 구조에 색상이나 위치나 크기 등 화면에 보여지는 스타일을 입히는 역할을 한다. JS는 캐릭터가 동적으로 움직일 수 있게 만들어 준다.

결국 하나의 웹 사이트를 온전하게 만들기 위해서는 HTML, CSS, JS 가 모두 필요하다.

image

HTML (Hyper Text Markup Language)

페이지의 제목, 문단, 표, 이미지, 동영상 등 웹의 구조를 담당.

CSS (Cascading Style Sheets)

실제 화면에 표시되는 방법(색상, 크기, 폰트, 레이아웃 등)을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적 처리)을 담당.

JS (JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당. JS는 하나의 프로그래밍 언어이다.

웹앱(웹사이트)의 동작 원리

사용자들이 웹사이트를 자신의 컴퓨터에서 출력하여 확인할 떄 어떤 원리를 통해 그것이 보여지는지 확인해보자.

사용자들은 어떤 디바이스를 이용하여 다양한 프로그램(크롬 브라우저나 네이버 앱 등)을 통해 웹사이트를 본다. 이 떄 사용자가 웹사이트를 보고 싶다고 한다면 컴퓨터에서 그 웹사이트에 해당하는 서버로 요청을 보낸다. 서버는 그 요청이 유효한지를 판단해서 유효하다면 응답의 방식으로 내용을 보여준다. 그러면 사용자의 컴퓨터에서 응답받은 데이터를 크롬 브라우저나 네이버 앱을 통해 볼 수 있게 출력을 해주는 구조이다.

image

이제 단순하게 웹 사이트만 확인한다고 해보자. 사용자가 크롬 웹 브라우저 주소창에 google.com 을 입력하면 해당 웹 브라우저가 google.com으로 사이트를 보고싶다라는 요청을 보낸다. 이 google.com 이라는 도메인 주소는 특정 웹 서버와 연결이 되어있고, 요청을 받은 웹 서버는 그 요청이 유효한지를 판단해서 사용자에게 웹 사이트를 볼 수 있도록 HTML파일, CSS파일들을 넘겨준다. 이제 웹 브라우저는 이렇게 응답받은 HTML과 CSS 파일들을 자신의 브라우저 화면에 그림을 그린다. 그림을 그린다는 것을 서버에서 응답 받은 데이터를 웹 브라우저의 뷰포트에 렌더링한다고 표현한다. 결과적으로 이렇게 렌더링된 화면을 사용자가 보게 되는 것이다.

HTML과 CSS를 웹 브라우저에서 동작시킬 수 있도록 잘 작성을 해줘야 웹 서버가 이 파일들을 잘 응답시켜 줄수 있고, 응답받은 데이터를 사용자가 웹 브라우저에서 정상적으로 확인할 수 있는 것이다.

image

앞으로 원격 환경을 배제하고 로컬 환경에서 HTML과 CSS 파일을 작성해서 웹 브라우저에 띄워보고 그 내용이 화면에 잘 그려지는지 확인할 예정이다.

image

웹 표준과 클로즈 브라우징

  • 웹 표준(Web Standard)

    웹 표준은 ‘웹에서 사용되는 표준 기술이나 규칙’을 의미한다. W3C의 표준화 제정 단계의 ‘권고안(REC)’에 해당하는 기술이다. 다시말해 웹 표준은 우리가 사용하는 다양한 브라우저에서 표준 기술(HTML, CSS, JS)들로 동작하는 내용들이다.

  • 크로스 브라우징(Cross Browsing)

    크로스 브라우징은 조금은 다르게 구동되는 여러 브라우저(크롬, 엣지, 파이어폭스, 웨일, 사파리 등등)에서 전세계에 있는 사용자들에게 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법이다. 정리하면 우리가 쓸 수 있는 브라우저는 여러 종류가 있고 브라우저마다 기술적으로 다른 부분들이 있기 때문에 그 기술적인 차이점들을 보완해서 웹 사이트를 만들어야 한다.

웹의 구성

image

뷰 포트는 웹 사이트가 온전하게 출력되는 영역이다.