CSS의 `position` 속성은 웹 페이지에서 요소의 위치를 지정하는 데 매우 중요한 역할을 합니다. 이 속성은 다양한 값들과 함께 사용되어 요소를 화면에 배치하는 방법을 제어합니다. 오늘은 이 속성의 다양한 값들과 그 특징에 대해 알아보고, 실행 가능한 예제를 통해 실습해 보겠습니다.
Position 속성의 기본 원칙
`position` 속성은 요소의 위치를 결정하며, 다음과 같은 네 가지 주요 값을 가집니다:
1. static: 모든 요소의 기본값으로, 문서의 기본 배치 방식에 따라 배치됩니다.
2. relative: 요소를 원래 자리에서 상대적으로 이동시킵니다.
3. absolute: 요소를 문서 흐름에서 제거하고, 가장 가까운 부모 요소를 기준으로 배치합니다.
4. fixed: 요소를 뷰포트를 기준으로 고정하여 스크롤해도 항상 같은 위치에 유지됩니다.
5. sticky: 요소가 스크롤 위치에 따라 상대적(`relative`) 또는 고정적(`fixed`)으로 변합니다.
이제 각 속성의 예제를 통해 더 자세히 살펴보겠습니다.
1. Static Positioning
`position: static`은 모든 요소의 기본값입니다. 요소는 문서의 기본 배치 방식에 따라 배치되며, `top`, `right`, `bottom`, `left`와 같은 다른 위치 속성은 사용할 수 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Static Position</title>
<style>
.static-box {
width: 100px;
height: 100px;
background-color: lightcoral;
position: static;
}
</style>
</head>
<body>
<div class="static-box">Static Box</div>
</body>
</html>
2. Relative Positioning
`position: relative`는 요소를 원래 자리에서 이동시킬 수 있게 합니다. 요소는 원래 자리에서 `top`, `right`, `bottom`, `left` 속성으로 지정한 만큼 이동되지만, 이동 전의 공간은 그대로 유지됩니다. 이로 인해 요소가 이동되더라도 다른 요소들의 배치는 변경되지 않습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Relative Position</title>
<style>
.relative-box {
width: 100px;
height: 100px;
background-color: lightblue;
position: relative;
top: 20px;
left: 30px;
}
</style>
</head>
<body>
<div class="relative-box">Relative Box</div>
</body>
</html>
3. Absolute Positioning
`position: absolute`는 요소를 일반적인 흐름에서 제거하고, 가장 가까운 조상 요소 중 `position`이 `relative`, `absolute`, `fixed`, `sticky`인 요소를 기준으로 배치합니다. 만약 그런 조상 요소가 없다면, `body`를 기준으로 배치됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Absolute Position</title>
<style>
.container {
position: relative;
width: 300px;
height: 300px;
background-color: lightgrey;
}
.absolute-box {
width: 100px;
height: 100px;
background-color: lightgreen;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="container">
<div class="absolute-box">Absolute Box</div>
</div>
</body>
</html>
4. Fixed Positioning
`position: fixed`는 요소를 뷰포트를 기준으로 배치합니다. 스크롤을 해도 요소는 항상 같은 위치에 고정되어 있습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Position</title>
<style>
.fixed-box {
width: 100px;
height: 100px;
background-color: lightpink;
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="fixed-box">Fixed Box</div>
<div style="height: 2000px;"></div> <!-- 스크롤을 테스트하기 위한 요소 -->
</body>
</html>
5. Sticky Positioning
`position: sticky`는 스크롤 위치에 따라 상대적(`relative`) 또는 고정적(`fixed`)으로 변하는 요소를 만듭니다. 요소는 지정된 오프셋에 도달할 때까지는 일반적인 문서 흐름에 따라 배치되다가, 그 이후에는 뷰포트에 고정됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sticky Position</title>
<style>
.sticky-box {
width: 100%;
height: 50px;
background-color: lightgoldenrodyellow;
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
.content {
height: 2000px;
background: linear-gradient(lightblue, lightcoral);
}
</style>
</head>
<body>
<div class="sticky-box">Sticky Box</div>
<div class="content"></div> <!-- 스크롤을 테스트하기 위한 요소 -->
</body>
</html>
이 예제들을 통해 `position` 속성의 각 값을 직접 실험해보고, 요소의 배치 방식이 어떻게 달라지는지 확인해보세요. `position` 속성을 이해하면 레이아웃을 더 유연하고 창의적으로 디자인할 수 있습니다.
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] CSS transition 속성 transition-timing-function (2) | 2024.10.22 |
|---|---|
| [HTML/CSS]CSS Flexbox에 대한 가이드 (0) | 2024.07.10 |
| [HTML/CSS] 버튼 클릭으로 하단 메시지 띄우기 (0) | 2024.05.25 |
| [HTML/CSS] html css 상단바 만드는법 (0) | 2024.05.19 |
| [HTML/CSS] Tailwind로 검색이 가능한 드롭다운 구현하기 (0) | 2024.05.13 |
