[Web] 웹앱의 동작 원리

1. HTML, CSS, JS

 

(1) HTML (Hyper Text Markup Language)

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

 

(2) CSS (Cascading Style Sheets)

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

 

(3) JS (JavaScript)

콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리 담당

 

2. 웹앱의 동작 원리

 

출처 : 패스트캠퍼스, 박영웅

 

(1) 최초 요청(Request)

- URL에 맞는 서버로 최초의 요청

 

(2) 최초 응답(Response)

- 서버에서 받은 요청은 사용자의 브라우저로 최초의 응답(HTML)

 

(3) 추가 요청

- HTML 구조에 맞게 포함하는 CSS, JS, 이미지파일 등 새로운 파일들을 요청

 

(4) 추가 응답

- CSS, JS, 이미지 파일 등 HTML 구성을 위한 다양한 정보 응답

 

 

3. 관련 용어

 

(1) Cross Browsing

조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법

 

(2) View Port

하나의 웹 페이지가 출력되는(렌더링) 영역

 

(3) Rendering

브라우저의 뷰 포트에 웹사이트를 출력하는(그림 그려내는) 행위

 

(4) Material Design

고품질 디지털 경험을 구축할 수 있도록 Google에서 만든 디자인 시스템