- HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요
- position 을 어떻게 사용하는지 알려주세요
HTTP(HyperText Transfer Protocol)는 웹상에서 데이터를 주고받기 위한 프로토콜로, 클라이언트와 서버 간에 요청과 응답을 주고 받는 통신규약입니다.
(여기서 프로토콜은 컴퓨터 네트워크에서 통신을 위한 규칙을 말하는데, 이 규칙은 데이터를 주고받는 과정에서 어떤 식으로 데이터를 전달할지 오류를 검출하고 수정할지 어떤 데이터 형식을 사용할지 정의합니다.)
HTTP는 클라이언트가 서버에 요청(Request)을 보내면 서버는 그 요청에 대한 응답(Response)을 보내는 방식으로 동작합니다. 이러한 요청과 응답은 HTTP메세지를 이용하여 이루어지며 다음과 같은 구조를 가지고 있습니다.
HTTP 메시지
Start line : HTTP의 첫번째 줄로, 요청 / 응답의 종류를 담당하고 있습니다.
요청 - 메소드(GET, POST, PUT, DELETE)와 요청 대상 URL이 포함됩니다.
응답 - 상태코드(200 OK, 404 Not Found 등)와 그에 대한 설명이 포함됩니다.Header : HTTP 메세지의 두번째 줄 부터 빈 줄 전까지의 부분으로 메세지에 대한 정보를 포함합니다.
요청 - 클라이언트의 정보, 요청에 대한 부가적인 정보가 포함됩니다.
응답 - 서버의 정보, 응답에 대한 부가적인 정보가 포함됩니다.Blank line : 헤더와 바디를 구분하기 위한 빈줄입니다.
Body : HTTP 메세지의 실제 내용으로
요청 - 서버에 전달할 데이터를 포함하며,
응답 - 서버가 클라이언트에게 전달하는 데이터를 포함합니다.
HTTP 요청 메서드
여기서 요청하는 데이터에 특정 동작을 수행하고 싶으면 어떻게 해야 할까요? 바로 HTTP 요청 메서드(Http Request Methods)를 이용합니다.
일반적으로 HTTP 요청 메서드는 HTTP Verbs라고도 불리우며 아래와 같이 주요 메서드를 갖고 있습니다.
- GET : 존재하는 자원에 대한 요청
- POST : 새로운 자원을 생성
- PUT : 존재하는 자원에 대한 변경
- DELETE : 존재하는 자원에 대한 삭제
이와 같이 데이터에 대한 조회, 생성, 변경, 삭제 동작을 HTTP 요청 메서드로 정의할 수 있습니다. 참고로 때에 따라서는 POST 메서드로 PUT, DELETE의 동작도 수행할 수 있습니다.
기타 요청 메서드는 다음과 같습니다.
HEAD : 서버 헤더 정보를 획득. GET과 비슷하나 Response Body를 반환하지 않음
OPTIONS : 서버 옵션들을 확인하기 위한 요청. CORS에서 사용
정리
HTTP 메시지는 이러한 구조를 이용하여 클라이언트와 서버 간에 데이터를 주고받습니다. 요청 메시지를 보낸 클라이언트는 서버로부터 응답 메시지를 받고, 이를 이용하여 웹 페이지의 표시나 파일의 업로드 등을 처리합니다.
Position은 HTML 요소의 위치를 지정하는데 사용됩니다.
특히 Position 속성 값에 따라서 요소의 위치가 결정이 되는데, 다음과 같은 값을 가질 수 있습니다.
- Static
기본값으로 문서 흐름에 따라 배치가되며 top, bottom, left, right, z-index 속성이 적용되지 않습니다. - Relatvie
요소가 자신이 있던 위치를 기준으로 배치되며, top, bottom, left, right 속성을 이용하여 요소의 위치를 조정할 수 있습니다.
top, bottom, left, right 속성을 이용하여 위치를 조정할 수 있습니다.
상대 위치를 지정하는 경우 다른 요소와 겹치지 않으며 자신이 위치한 곳에 자리를 비워둡니다. - Absolute
가장 가까운 상위 요소를 기준으로 배치되며, 상위 요소 중 position 속성 값이 static이 아닌 요소를 기준으로 위치가 결정 됩니다.
top, bottom, left, right 속성을 이용하여 위치를 조정할 수 있습니다. - Fixed
뷰포트 기준으로 요소를 배치하며, 스크롤에 관계없이 고정된 위치에 요소를 배치 할 수 있습니다.
top, bottom, left, right 속성을 이용하여 위치를 조정할 수 있습니다. - Sticky
요소가 스크롤에 따라 자신의 위치를 조정합니다.
일정 위치에 도달하면 고정이 되고 top, bottom, left, right 속성을 이용하여 위치를 조정할 수 있습니다.
