웹 리소스란? 웹에 갖춰진 정보 자산을 의미한다.
웹 브라우저의 주소창에 http://dreamhack.io/index.html 주소를 입력하면 dreamhack.io에 존재하는 /index.html 경로의 리소를 가져오라는 의미이다.
모든 웹 리소스는 고유의 Uniform Resource Indicator(URI)를 가지며, 이를 이용하여 식별된다. 웹의 프론트엔드를 구성하는 대표적인 웹 리소스들이다.
- Hyper Text Markup Language (HTML)
- 웹 문서의 뼈와 살을 담당한다. 태그와 속성을 통하 구조화된 문서 작성을 자원한다.
- Cascading Style Sheets (CSS)
- 웹 문서의 생김새를 지정한다. 웹 리소스들의 시각화 방법을 기재한 스타일 시트이다. 글자의 색깔이나 모양, 배경, 색상, 이미지의 크기나 위치 등을 CSS로 지정할 수 있다. 브라우저는 이를 참고하여 웹 문서를 시각화한다.
- JavaScript (JS)
- 웹 문서의 동작을 정의한다. 이용자가 버튼을 클릭했을 때, 어떻게 반응할지, 이용자가 데이터를 입력하면 어디로 전송할지 등을 JS로 구현할 수 있다. JS는 이용자의 브라우저에서 실행되는데, 클라이언트가 실행하는 코드라고 하여 Client-Side Script 라고도 부른다.
hello.html
<!DOCTYPE html>
<html>
<head><link href="hello.css", rel="stylesheet", type="text/css"></head>
<body>
<b>Hello World</b>
</body>
</html>
hello.css
b {
color: cornflowerblue;
}
웹 클라이언트와 서버의 통신
- (클라이언트) 이용자가 브라우저를 이용하여 웹 서버에 접속한다.
- (클라이언트) 브라우저는 이용자의 요청을 해석하여 HTTP 형식으로 웹 서버에 리소스를 요청한다.
- (서버) HTTP로 전달된 이용자의 요청을 해석한다.
- (서버) 해석한 이용자의 요청에 따라 적절한 동작을 한다. 리소스를 요청하는 것이라면, 이를 탐색한다. 계좌 송금, 입금과 같은 복잡한 동작을 요구할 경우 내부적으로 필요한 연산을 처리한다.
- (서버) 이용자에게 전달할 리소스를 HTTP 형식으로 이용자에게 전달한다.
- (클라이언트) 브라우저는 서버에게 응답받은 HTML, CSS, JS 등의 웹 리소스를 시각화하여 이용자에게 보여준다.
'Web' 카테고리의 다른 글
| Exercise: XSS (0) | 2021.12.07 |
|---|---|
| ClientSide: XSS (0) | 2021.12.07 |
| Mitigation: Same Origin Policy (0) | 2021.12.07 |
| HTTP/HTTPS (0) | 2021.12.07 |
| Exercise: Cookie (0) | 2021.12.07 |
댓글