CSS Position

Position 은 레이아웃 구성 요소 자유롭게 배치하기 위해 사용

- 웹 사이트의 레이아웃은 사용자가 콘텐츠를 인식하고 탐색할지를 결정하는 중요한 요소이다.

(모바일,테블릿,PC) 에서 접근하기 때문에 다양한 장치에 맞는 레이아웃을 설계하는 것이 필수적이며

요소를 원하는 위치에 자유롭게 배치 해야 웹사이트의 품질을 높일 수 있다.

 

1. UX 향상 : 요소를 적절히 배치하여 사용자가 정보를 쉽게 탐색 하도록 한다. 

    ex) 메뉴바,버튼,이미지

 

2. 반응형 디자인 : 화면 기기와 해상도에 맞춰 레이아웃이 자동으로 조정될 수 있도록 설계한다.

 

3. 콘텐츠 강조 및 디자인 일관성 유지 : 중요도에 따라 요소 배치와 크기를 조정하여 시각적 위계를 부여가능하다.

일관성 있는 배치를 통해 통일성과 전문성을 높일 수 있다.

 

CSS postion 속성 값 설명

• static(기본값)
  
  • 정의 : HTML 요소의 기본값으로 문서의 흐름에 따라 배치
  • 특징 : 상단,좌측 등 위치 관련 속성(top,left,right,bottom) 적용되지 않는다
• static 은 기본값이기 때문에 postion : static 를 설정하지 않아도 자동으로 적용 문서 기본 흐름에 배치

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

 

relative (상대적 위치)

• 정의: 요소를 문서의 기본 흐름에 맞게 배치한 후, top, left 등으로 상대적으로 이동
• 특징: 요소가 원래의 자리에서 이동하지만, 다른 요소는 그 자리의 공간을 유지
• 실생활에서의 유용성: 레이아웃을 살짝 조정할 때

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

absolute (절대적 위치)

• 정의: 가장 가까운 position: relative 또는 position: absolute 부모 요소를 기준으로 위치가 지정됨
• 특징: 문서의 흐름에서 빠져나와 원하는 위치에 자유롭게 배치
• 사용 시 주의사항: 적절한 부모 요소를 지정하지 않으면 전체 문서를 기준으로 배치될 수 있음

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

fixed (고정된 위치)

• 정의: 브라우저의 뷰포트를 기준으로 고정
• 특징: 스크롤을 하더라도 항상 같은 위치에 머무름
• 사용 사례: 고정된 네비게이션 바, 고정된 알림 창 등

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

relative와 absolute의 차이

relative (상대적 위치)

• relative는 요소의 원래 위치를 기준으로 배치되며, 해당 요소가 배치된 공간은 그대로 유지된다
• 원래 위치에서 상대적으로 이동한 것이기 때문에, 문서의 흐름에서 차지하는 공간은 바뀌지 않는다.
• 주로 작은 위치 조정이나 레이아웃을 미세하게 조정할 때 사용된다.

absolute (절대적 위치)

• absolute는 가장 가까운 relative나 absolute 부모 요소를 기준으로 위치가 배치됩니다. 만약 부모 요소가 없다면, 브라우저의 뷰포트를 기준으로 합니다.
• 요소는 문서의 흐름에서 제거되며, 다른 요소는 해당 요소가 차지하는 공간을 인식하지 않습니다.
• 주로 요소를 정확한 위치에 배치할 때 사용됩니다.

* absolute-box 에 부모 영역이 없을때 해당 영역이 뷰포트 기준으로 위치가 바뀌는 예시

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.

* absolute-box 에 부모 영역이 있을때 부모 영역으로 배치됨

See the Pen Untitled by 성은총 (@xxlblqtl-the-selector) on CodePen.