-
면접대비 7. HTTP메세지구조 8. CSS position속성항해99 2023. 3. 30. 12:19728x90
- HTTP에 대해 설명하고, 알고있다면 HTTP 메세지 구조에 대해 더 자세히 설명해주세요
- position 을 어떻게 사용하는지 알려주세요
HTTP란,
HTTP는 HTML과 같은 문서를 전송하기 위한 Application Layer Protocol입니다. HTTP는 웹브라우저와 웹서버의 소통을 위해 디자인되었습니다. 클라이언트가 HTTP 메세지 양식에 요청을 보내면, 서버도 HTTP 메세지 양식에 맞춰 응답합니다. HTTP메세지는 요청과 응답의 유형이있으며, 헤드부분(start line, HTTP headers)과 바디부분 (payload)로 구성됩니다.
HTTP 메세지는
Request message
Start line에는 세가지 요소가 있다. 1. HTTP method : (GET, PUT, POST 등)이나 방식(HEAD or OPTIONS)을 설명. 2. 요청대상(URL, URI): 프로토콜, 포트, 도메인의 절대 경로는 **요청 컨텍스트에 작성**된다. 3. HTTP버전(메시지의 다른 구조 결정)
Headers
요청의 headers는 기본구조를 따릅니다.
대소문자 구분없는 문자열과 콜론, 값을 입력합니다.Body
HTTP메세지 구조의 마지막에 위치.
모든 요청에 body가 필요하진 않다.
GET, HEAD, DELETE, OPTIONS처럼 서버에 리소스를 요청하는 경우엔 본문이 필요하지 않다.
POST, PUT과 같은 요청은 데이터를 업데이트하기 위해 사용한다.Response message
Status line 1. .현재 프로토콜의 버전 (HTTP/1.1) 2. 상태코드: 요청의 결과를 나타냄 (200, 201, 404, 500등) 3. 상태 텍스트: 상태코드에대한 설명. -> Status line은 `HTTP/1.1 404 Not Found`이렇게 생김.
Body
- 응답의 본문은 HTTP messages 구조의 마지막에 위치한다.
- 모든 응답에 body가 필요한 것은 아니다.
- 201, 204와 같은 상태 코드를 가지는 응답에는 본문이 필요하지 않다.
Single-resource Bodies (단일-리소스 본문) - 길이가 알려진 단일-리소스 본문은 두 개의 헤더(Content-Type, Content-Length)로 정의한다. - 길이를 모르는 단일 파일로 구성된 단일-리소스 본문은 Transfer-Encoding이 `chunked` 로 설정되어 있으며, 파일은 chunk로 나뉘어 인코딩되어 있다. - Multiple-resource Bodies(다중-리소스 본문) -서로 다른 정보를 담고 있는 body이다
CSS position 속성
Css에서 position속성은 HTML문서상에서 요소가 배치되는 방식을 결정합니다. 많은 경우 요소의 정확한 위치지정을 위해 `top`, `left`, `bottom`, `right` 속성과 함께 사용됩니다. position속성을 별도로 지정하지 않으면 기본값이 static이 적용됩니다. static이 적용되면 작성된 순서 그대로 브라우저화면에 표시가 된다는 것을 뜻하며, top, left, bottom, right속성값은 무시됩니다.
- relative : 요소를 원래 위치에서 벗어나게 배치. 요소를 원래위치를 기준으로 상대적으로 배치. 요소가 원래 위치에 있을 때 상하좌우로부터 얼마나 떨어지게할지
top
,bottom
,left
,right
를 함께 이용해 지정할 수 있다. - absolute : 배치 기준을 자신이 아닌 상위 요소에서 찾습니다. DOM 트리를 따라 올라가다가
position
속성이static
이 아닌 첫 번째 상위 요소가 해당 요소의 배치 기준으로 설정됩니다. 만약에 해당 요소 상위에position
속성이static
이 아닌 요소가 없다면, DOM 트리에 최상위에 있는<body>
요소가 배치 기준이 됩니다. 어떤 요소의display
속성을absolute
로 설정하면, 부모 요소의display
속성을relative
로 지정해주는 것이 관례입니다.position: absolute
인 요소는 HTML 문서 상에서 독립되어 앞뒤에 나온 요소와 더 이상 상호작용을 하지 않게 된다는 것 - fixed : 항상 고정된(fixed) 위치에 배치할 수 있습니다. 배치 기준이 자신이나 부모 요소가 아닌 뷰포트(viewport), 즉 브라우저 전체화면
- sticky : 브라우저 화면을 스크롤링할 때 따라오다 지정한 위치에서 화면에 붙어있는듯한 효과가 나타납니다.
728x90'항해99' 카테고리의 다른 글
11. import&require차이점, 12. const선언시 배열과객체의 요소나 속성을 추가할 수 있는 이유 (0) 2023.04.03 9. this의 동작원리, 용법 10.브라우저 저장소간의 차이점 (0) 2023.04.02 면접대비 5. 프레임워크 & 라이브러리 차이점 6. 캐시의 장단점과 프론트엔드에서 캐시를 사용할 수 있는 영역 (0) 2023.03.29 면접대비-3. Hoisting & TDZ 4.Parameter, argument차이 (0) 2023.03.28 면접대비-1. 웹페이지가 브라우저에 렌더링되는 과정, 2. Restful API (0) 2023.03.27