[기술 면접 스터디-4일차] HTTP란, HTTP 메시지 구조, position 사용방법

1. HTTP란 ?

💡 하이퍼텍스트 전송 프로토콜을 의미. 웹 상에서 클라이언트와-서버 간에 데이터 통신을 하기 위한 통신규약 입니다.

HTTP란 무엇인가?

+ HTTP와 HTTPS의 차이는?

1. HTTPS(Hypertext Transfer Protocol Secure)는 HTTP의 확장 버전 또는 더 안전한 버전이다. HTTPS에서는 브라우저와 서버가 데이터를 전송하기 전에 안전하고 암호화된 연결을 설정한다.

2. HTTPS는 HTTP에 비해 SEO에서 유리하다.

HTTP HTTPS 차이: 당신의 웹 사이트는 안전한가요? - 어센트 코리아

 

+ HTTP Status code

응답상태코드 200, 400, 500

1. 200은 성공했을때

2. 400은 클라이언트 문제로 실패했을때 404

3. 500은 서버 문제로 실패했을때 502

 

+ HTTP 버전에 따른 차이점 +TCP에 대해 공부하기

 

2. position을 사용하는 방법

💡position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다.
- static : 기본 속성
- relative : 기본 속성에서 + 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용합니다.
- absolute: 요소를 일반적인 문서 흐름에서 제거하고, 가장 가까운 위치 지정 조상 요소에 대해 상대적으로 배치합니다.
- fixed: 요소를 일반적인 문서 흐름에서 제거하고, 뷰포트를 기준으로 삼아 항상 고정된 위치에 배치합니다.
- sticky: static + fixed 특징을 동시에 가지며, 브라우저 화면을 스크롤링할 때 효과가 나타납니다.

저는 일반적으로 position 속성을 페이지 레이아웃 등에서는 지양하고, 가상 태그나 요소가 특별히 겹쳐져야 할 필요가 있는 경우, 헤더나 뷰포트 상에 고정되어야할 요소 등 꼭 필요할 때에만 사용하고자 합니다. 또 사용할 때는 부모에 relative 속성을 부여하고, 자식요소에 absolute 속성을 주어 최대한 다른 요소에 영향을 주지 않고 예상 가능한 범위 안에서 사용하고자 합니다.

+ position 속성을 사용할 때 주의해야 할 점

개인적으로 position 속성을 페이지 레이아웃 등에서는 지양하도록 합니다. position absolute와 fixed를 사용할 때 Floating이 발생하기 때문입니다. Floating이 일어나게 되면 요소가 주변 레이아웃에 영향을 줄 수 있고, 추후 유지 보수에도 어려움이 있을 수 있습니다. 또 반응형에서도 부모요소에 고정된 높이값을 변경해 주어야 하는 등의 번거로움이 있을 수 있기 때문에 페이지 레이아웃 시에는 position 외에도 충분히 더 안정적이고 예측 가능한 Flex나 grid 등을 사용해 레이아웃 하도록 합니다.

+ position 속성들이 Reflow와 Repaint에 영향이 있는지

Reflow - absolute는 부모 요소가 윈도우창이 변경될 때마다 변경되면 자식 요소도 따라서 위치가 변경되어야 함. fixed, sticky 화면을 스크롤 할 때 마다 화면의 위치가 변경됨으로 값을 다시 계산해야 하므로 Reflow가 일어남

Repaint - static, relative의 경우 주로 부모의 속성들에서 Repaint 일어남