🍈 [TIL] HTTP란? / position 사용법

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

 

답변)

HTTP는 HyperText Transfer Protocol의 약자로, 인터넷에서 데이터를 주고받을 수 있는 규칙이라고도 할 수 있습니다.

HTTP는 웹 브라우저와 웹 서버 간에 통신을 가능하게 하며, HTML 문서, 이미지, 동영상 등의 웹 리소스를 전송하는 데 사용됩니다.

 HTTP는 클라이언트가 요청을 생성하기 위한 연결을 연 다음 응답을 받을 때까지 대기하는 전통적인 클라이언트-서버 모델을 따릅니다.

HTTP는 클라이언트가 브라우저를 통해서 어떠한 서비스를 URI를 통해 서버에 요청하면 서버에서는 해당 요청에 대한 결과를 응답하는 형태로 동작합니다.

 

HTTP 메시지는 서버와 클라이언트 간에 데이터가 교환되는 방식입니다. 이때 메시지 타입은 두 가지가 있습니다. Request는 클라이언트가 서버로 전달하는 메시지이고, Response는 Request에 대한 서버의 답변입니다. HTTP 메시지는 ASCII로 인코딩된 텍스트 정보이며, 이러한 메시지는 설정파일 (프록시, 서버), API (브라우저 경우) 혹은 다른 기타의 인터페이스에 의해 가공되어 제공됩니다.

Request message의 구조는 공백을 제외하고 3가지 부분으로 나누어집니다.

- Start Line

- Headers

- Body

로 나눠집니다.

 

Start Line은 HTTP Request Message의 시작 라인

HTTP request의 start line 3가지 부분으로 구성

• HTTP method
• Request target
• HTTP version

Headers는 해당 request에 대한 추가 정보(addtional information)를 담고 있는 부분입니다.

Body는 HTTP Request가 전송하는 데이터를 담고 있는 부분

전송하는 데이터가 없다면 body 부분은 비어있습니다.

보통 post 요청일 경우, HTML 폼 데이터가 포함되어 있습니다.

 

• HTTP/Version: 사용하는 HTTP 버전
• Status Code: 요청에 대한 상태 코드
• Reason Phrase: 상태 코드에 대한 간단한 설명
• Header: 메시지의 메타데이터를 포함하는 헤더
• Response body: 응답 메시지에 포함되는 데이터

로 이루어져 있고,

요청 메시지 구조는

• METHOD: 요청의 종류를 나타내는 HTTP 메서드(GET, POST, PUT, DELETE 등)
• URI: 요청 대상이 되는 리소스를 식별하는 URI
• HTTP/Version: 사용하는 HTTP 버전
• Header: 메시지의 메타데이터를 포함하는 헤더
• Request body: 요청 메시지에 포함되는 데이터

로 이루어져 있습니다.

 

 

 

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

 

답변)

HTML과 CSS를 사용하는 웹페이지에서 position이란 요소의 위치를 정의하는데 사용됩니다. position 속성의 값으로는 static, relative, absolute, fixed가 있습니다.

여기서 static은 요소가 기본 위치에 배치됩니다. position속성을 따로 지정하지 않아도 static으로 설정됩니다. 

relative 는 요소가 현재 위치에서 상대적인 위치에 배치됩니다. top,bottom,left,right 속성을 사용하여 이동할 위치를 지정할 수 있습니다. 
absolute는 요소가 가장 가까운 상위 요소에 상대적으로 위치하도록 지정됩니다. 가장 가까운 상위 요소가 없으면 문서의 body 요소를 기준으로 위치가 지정됩니다.
fixed는 요소가 브라우저 창에서 고정 위치에 배치됩니다. 스크롤을 내려도 요소가 항상 같은 위치에 남아있습니다.

이외에도 sticky라는 추가된 기능이 있고 평소에는 relative와 같이 동작하다가 특정 지점을 지나면 fixed처럼 동작하지만 아직까지 많은 브라우저에서 지원이 안되는 상횡입니다.