CSS에서 position을 어떻게 사용하는지 설명해주세요.
면접용
CSS에서 position 속성은 요소의 배치 방식을 결정하는 데 사용됩니다. position을 사용하면 원하는 위치에 배치 할 수 있습니다. 주요 값으로는 static, relative, absolute, fixed, sticky가 있습니다.
static은 position의 기본값이며 일반적인 흐름에 따라 배치됩니다.
relative는 다른 요소와의 간격을 조정할 때나 내부 absolute 요소의 기준점이 필요할 때 사용할 수 있습니다.
absolute는 가장 가까운 부모 요소 기준 배치할 수 있고 이때 일반적인 문서 흐름에서 제거되어 원하는 위치에 고정시킬 수 있습니다.
fixed는 absolute와 마찬가지로 고정이 가능한데, 이때 화면 기준으로 고정되어, 스크롤해도 이동하지 않습니다. 북마크나 챗봇같이 계속 화면에 떠있어야 하는 요소를 배치할 때 사용할 수 있습니다.
sticky도 고정이 가능한데, 처음에는 요소가 일반적인 흐름에 있다가, 스크롤 시 특정 위치에서 고정됩니다.
개념 설명
1. static (기본값)
position의 기본값으로, 요소는 일반적인 문서 흐름에 따라 배치됩니다.
top, left, right, bottom 속성을 사용할 수 없습니다.
사용 예: 일반적인 문서 배치 방식에서 변경할 필요가 없을 때.
2. relative (자기 자신을 기준으로 이동)
요소가 원래 위치를 기준으로 top, left, right, bottom을 이용해 이동할 수 있습니다.
원래 위치가 유지되므로, 다른 요소의 배치에는 영향을 주지 않습니다.
.box {
position: relative;
top: 20px; /* 원래 위치에서 20px 아래로 이동 */
left: 30px; /* 원래 위치에서 30px 오른쪽으로 이동 */
}
사용 예: 다른 요소와의 간격을 조정할 때, 내부 요소(
absolute
요소)의 기준점이 필요할 때
3. absolute (부모 요소를 기준으로 배치)
가장 가까운 relative, absolute, fixed 부모를 기준으로 위치가 결정됩니다.
부모 위치를 기준으로 top, left, right, bottom을 이용해 이동할 수 있습니다.
만약 부모 요소가 static이면, absolute 요소는 **문서(body)**를 기준으로 배치됩니다.
문서 흐름에서 제거되므로, 다른 요소와 겹치더라도 원하는 위치에 고정시킬 수 있습니다.
.parent {
position: relative;
}
.box {
position: absolute;
top: 20px; /* 부모의 상단에서 20px 떨어짐 */
left: 30px; /* 부모의 왼쪽에서 30px 떨어짐 */
}
사용 예: 모달, 툴팁, 드롭다운 메뉴 등을 배치할 때
4. fixed (뷰포트에 고정)
요소가 화면(뷰포트)을 기준으로 고정됩니다.
스크롤을 해도 위치가 변하지 않습니다.
화면을 기준으로 top, left, right, bottom을 이용해 이동할 수 있습니다.
뷰포트에 고정되므로 문서 흐름에서 제거됩니다.
.box {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: black;
color: white;
}
사용 예: 사이드바, 고정된 버튼 (예: 북마크 버튼, 챗봇 버튼), 배경 이미지 고정 (background-attachment: fixed)
뷰포트(viewport): 화면에서 실제 내용이 표시되는 영역으로, 데스크톱은 사용자가 설정한 해상도가 뷰포트 영역이 되고, 스마트 기기는 기본으로 설정되어 있는 값이 뷰포트 영역이 됩니다.
5. sticky (스크롤 시 특정 위치에서 고정)
요소가 일반적인 흐름에 있다가, 특정 위치에서 고정(fixed처럼 동작)됩니다.
top, left, right, bottom을 이용해 위치를 지정할 수 있습니다.
부모 요소의 스크롤이 끝나면 다시 원래 흐름으로 돌아갑니다.
처음에는 문서 흐름에 있지만 스크롤을 통해 지정된 위치에 도달 시 문서 흐름에서 제거됩니다.
.box {
position: sticky;
top: 10px; /* 스크롤 시, 10px 이상 내려가면 고정됨 */
}
사용 예: 테이블 헤더 (
<thead>
), 스크롤 시 따라오는 메뉴바 또는 광고 배너, 구간별 제목이 화면 상단에 고정되는 효과
Last updated