[데일리 과제] 3월 30일

1. HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요

 

HTTP는 클라이언트와 서버 사이에 이루어지는 요청/응답(request/response) 프로토콜입니다. 예를 들면, 클라이언트인 웹 브라우저가 HTTP를 통하여 서버로부터 웹페이지(HTML)나 그림 정보를 요청하면, 서버는 이 요청에 응답하여 필요한 정보를 해당 사용자에게 전달하게 됩니다.

 

HTTP 메세지에는 Request Message와 Response Message가 있습니다.

Request Message

가장 첫 번째 라인은 Request Line 이라고 하고, 2번째 줄에서 6번째 줄까지는 Request Header라고 합니다. 그리고 이 Line과 Header를 다 합쳐서 Request Message Header 라고 합니다.

​만약 서버 쪽으로 전송해야 할 정보가 있다면 그것을 Body라고 하는데 이 Body와 Header는 중간에 빈 줄을 둬서 구분한다고 약속되어 있습니다.

Request Header를 하나하나씩 살펴보자면 먼저 GET이 있는데 GET은 웹서버로부터 데이터를 가져올 때 사용합니다. 다음 HTTP/번호는 웹브라우저가 현재 사용하고 있는 HTTP의 버전이 그 번호다 라는 의미입니다.

​Host부터는 좀 전에 살펴봤던 Request Header 부분에 해당합니다. Host는 인터넷에 연결되어있는 컴퓨터를 식별하는 녀석으로 현재 접속하고 있는 웹사이트의 주소를 의미합니다.

User-Agent 는 웹브라우저의 다른 표현입니다. 그리고 앞에 Windows가 있다면 현재 본인의 컴퓨터를 나타냅니다.

Accept Encoding는 어떠어떠한 압축 방식(gzip, deflate, br)을 제공한다는 것을 나타냅니다.

마지막으로 If-Modified_since는 마지막으로 언제 파일을 다운로드 받았는지 알려줍니다. 웹서버는 자기가 가지고 있는 파일이랑 비교해서 어떤 게 최신인지 비교를 하고, 최신이면 전송을 하지 않습니다.

 

Response Message

첫 번째 행은 Status를 나타냅니다. 즉 웹서버가 응답했을 때 잘 됐는지 안됐는지를 나타냅니다. 먼저 version은 HTTP의 version을 의미합니다.

그리고 status code는 응답 결과를 의미합니다 예를 들어 404는 웹 페이지를 찾을 수 없다는 에러 코드인데 이 에러코드를 띄워준다는 의미힙니다.

Phrase는 응답 결과를 사람이 이해하기 쉽도록 말을 풀어쓴 것입니다.

실제로 코드로 살펴보면 HTTP 1.1 포맷을 사용하고 있다는 것을 의미하고, 200은 status code를 의미합니다.

​여기서 200의 의미는 Success를 의미합니다.

웹 서버가 응답할 때 text, html이라는 언어이다 라는 것을 나타냅니다. 그럼 웹브라우저는 html 형식으로 화면을 나타내줍니다.

Content-Encoding는 예를 들어 gzip이라고 되어있으면 이 컨텐츠는 gzip이라는 방식으로 압축했으니 gzip이라는 방식으로 압축을 풀라는 의미입니다.

 

2. position 을 어떻게 사용하는지 알려주세요

 

CSS의 position 속성은 HTML에서 element를 배치하는 방법을 지정하는 속성으로  position 속성에 쓸 수 있는 값은 static, relative, absolute, fixed, sticky 이렇게 5개가 있습니다.

 

   1. static(기본 값)

element에 position을 지정하지 않았을 때 기본으로 적용되는 값입니다.

static의 경우 top, right, bottom, left, z-index 속성들이 아무런 효과를 주지 못합니다.

 

   2. relative

element가 자신의 static 위치에서 상하좌우(top, right, bottom, left)와 같은 속성에 의한 상대적인 위치에 배치하고 싶을 때 사용합니다.

relative를 사용시 글자가 겹쳐지게 보일 수 있으므로 주의가 필요합니다.

 

   3. absolute

가장 가까운 위치에 있는 부모 element(static 이 아닌)에 상대적 위치로 배치하고 싶을 때 사용합니다. 

부모 element가 없으면 문서 본문(body)을 기준으로 삼고 페이지 스크롤에 따라 움직입니다.

 

   4. fixed

스크린의 뷰포트(viewport)를 기준으로 한 위치에 배치되어 스크롤되어도 움직이지 않는 고정된 자리를 갖게 하고 싶을 때 사용합니다.

 

   5. sticky

상하좌우(top, right, bottom, left) 속성들의 값을 기준으로 flow root 및 해당 element를 포함하는 containing block에 대한 상대적(relative) 위치에 배치하고 싶을 때 사용합니다.

그래서 sticky로 position을 지정했는데 상하좌우(top, right, bottom, left) 속성이 주어지지 않으면 static으로 배치되는 위치와 같습니다.

sticky는 relative와 마찬가지로 다른 요소들에 영향을 주지 않는 특징을 가집니다.