웹 개발을 하다 보면 다양한 CSS 속성을 사용해 요소를 배치하게 됩니다.
그 중에서도 position 속성은 레이아웃을 조정하는 데 매우 중요한 역할을 합니다.
이번 글에서는 absolute로 지정된 요소와 그 부모 요소가 relative일 때 어떻게 동작하는지에 대해 알아보겠습니다.
Absolute와 Relative의 차이
먼저 position 속성의 기본적인 개념을 살펴보겠습니다.
- relative: 요소 자신을 기준으로 위치를 조정합니다. 즉, 원래 위치를 기준으로 top, right, bottom, left 값을 이용해 이동할 수 있습니다.
- absolute: 가장 가까운 relative, fixed, sticky 속성이 적용된 조상 요소를 기준으로 위치가 결정됩니다. 만약 그런 조상 요소가 없다면 initial containing block (일반적으로 body 태그)을 기준으로 합니다.
Absolute와 Relative의 조합
absolute로 지정된 요소는 부모 요소가 relative일 때 해당 부모 요소를 기준으로 위치를 잡습니다. 이를 통해 원하는 위치에 요소를 자유롭게 배치할 수 있습니다. 예를 들어, 지도의 사이드바를 특정 위치에 고정하고 싶을 때 유용합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.map {
position: relative;
width: 600px;
height: 400px;
background-color: #ddd;
}
.sidebar {
position: absolute;
top: 10px;
left: 10px;
width: 150px;
height: 300px;
background-color: #333;
color: #fff;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50px;
background-color: #555;
color: #fff;
text-align: center;
line-height: 50px;
}
</style>
<title>Absolute와 Relative 이해하기</title>
</head>
<body>
<div class="map">
<div class="sidebar">사이드바</div>
<div class="header">헤더</div>
</div>
</body>
</html>
위의 코드에서 .map 요소는 relative로 지정되어 있으며, 그 안의 .sidebar와 .header 요소는 absolute로 지정되어 있습니다. 이때 .sidebar와 .header는 .map 요소를 기준으로 위치가 결정됩니다.
왜 헤더에 Absolute를 사용할까?
헤더를 absolute로 사용하는 경우는 많습니다. 그 이유는 다음과 같습니다.
- 고정된 위치: 헤더를 페이지의 상단에 고정시켜 사용자가 스크롤을 하더라도 항상 헤더가 보이도록 할 수 있습니다.
- 레이아웃의 일관성 유지: 헤더의 위치가 절대적이므로 다른 요소들의 위치가 변경되어도 헤더는 항상 같은 위치에 있습니다.
- 쉽고 간결한 코드: 레이아웃을 쉽게 조정하고, 다른 요소들과 겹치지 않도록 할 수 있습니다.
결론
position: absolute와 position: relative를 적절히 사용하면 복잡한 레이아웃도 쉽게 구현할 수 있습니다. 부모 요소에 relative를 지정하고, 자식 요소에 absolute를 지정함으로써 원하는 위치에 자유롭게 배치할 수 있습니다. 이를 통해 웹 페이지의 디자인과 사용성을 크게 향상시킬 수 있습니다.