4.1 absolute positioning
CSS의 absolute positioning은 웹 페이지에서 요소의 위치를 정확하게 제어할 수 있게 해줘.
절대적 포지셔닝을 사용하면 요소는 문서의 일반적인 흐름에서 제거되고 가장 가까운 포지셔닝된 조상 요소에 상대적으로 배치돼.
만약 그런 조상이 없으면, 요소는 초기 컨테이너(<html>이나 <body> 같은)에 상대적으로 위치하게 돼.
절대적 포지셔닝의 주요 특징:
- 문서 흐름에서의 제거: 절대적으로 포지셔닝된 요소는 다른 요소에 영향을 주지 않으며, 부모 요소의 크기를 계산할 때 고려되지 않아.
- 상대적 포지셔닝: 요소는 position: relative, position: absolute, position: fixed, 또는 position: sticky 포지셔닝이 있는 가장 가까운 조상에 상대적으로 배치돼.
- 좌표 사용: top, right, bottom, 그리고 left 속성은 요소의 정확한 위치를 설정하기 위해 사용돼.
기본적인 절대적 포지셔닝 예시
절대적 포지셔닝 요소의 간단한 예를 살펴보자:
CSS
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background-color: deepskyblue;
}
HTML
<div class="container">
<div class="box">Absolute Box</div>
</div>
이 예제에서 .box 요소는 position: relative;가 있는 부모 컨테이너 .container에 상대적으로 위치해.
4.2 오버레이 만들기
절대적 포지셔닝은 모달 창, 툴팁, 라이트박스 같은 오버레이를 만드는 데 자주 사용돼.
절대적 포지셔닝 예시:
CSS
.wrapper {
min-height: 300px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
HTML
<div class="wrapper">
<div class="overlay">
<div class="modal">
<p>Modal Content</p>
</div>
</div>
</div>
4.3 정확한 레이아웃과 UI 구성 요소 만들기
절대적 포지셔닝은 미디어 플레이어의 컨트롤, 사용자 지정 컨트롤, 도구 모음 같은 정확한 레이아웃을 만들 때 유용해.
절대적 포지셔닝 예시:
CSS
.player {
position: relative;
width: 400px;
height: 50px;
background-color: #333;
color: white;
}
.play-button {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
}
.volume-control {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
}
HTML
<div class="player">
<div class="play-button">Play</div>
<div class="volume-control">Volume</div>
</div>
4.4 복잡한 레이아웃 만들기
절대적 포지셔닝은 대시보드와 같은 복잡한 레이아웃, 그리고 인터랙티브한 요소를 만드는 데 유리해.
절대적 포지셔닝 예시:
CSS
.dashboard {
position: relative;
width: 800px;
height: 600px;
background-color: #f0f0f0;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: #333;
color: white;
}
.main-content {
position: absolute;
top: 0;
left: 200px;
width: calc(100% - 200px);
height: 100%;
background-color: #fff;
}
HTML
<div class="dashboard">
<div class="sidebar">Sidebar</div>
<div class="main-content">Main Content</div>
</div>
GO TO FULL VERSION