📌 CSS 위치 지정하기 (Positioning)
CSS에서 position 속성은 HTML 요소의 배치 방법을 정의합니다. 이 속성을 통해 요소의 위치를 상하좌우로 설정하거나, 문서 흐름에서 제외시킬 수 있습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>위치 정하기</title>
<style>
div{
width: 100px;
height: 100px;
color:white;
background-color: orange;
}
.rel{
background-color: red;
position: relative;
top: 50px;
left: 50px;
}
/* 앱솔루트 요소는 position 속성을 가진 요소를
기준으로 위치를 이동한다. 단,상위요소중에 position 속성을 가진 요소가 없다면
그냥 화면을 기준으로 이동한다.*/
.abs{
position: absolute;
right: 50px;
top: 50px;
}
.scroll{
position: scroll;
height: 2000px;
}
.fixed{
position: fixed;
right: 50px;
bottom: 50px;
}
</style>
</head>
<body>
<div class="abs">1</div>
<div class="rel">2</div>
<div class="scroll">3</div>
<div class="fixed">4</div>
</body>
</html>/* 앱솔루트 요소는 position 속성을 가진 요소를
기준으로 위치를 이동한다. 단,상위요소중에 position 속성을 가진 요소가 없다면
그냥 화면을 기준으로 이동한다.*/
🔹 position 속성 값
CSS의 position 속성은 요소가 문서에서 어떻게 배치될지 결정합니다. 주요 속성 값은 static, relative, absolute, fixed가 있습니다.
속성 값 설명
| static | 기본값으로, 요소를 일반적인 문서의 흐름에 맞게 배치합니다. |
| relative | 요소의 기본 위치를 기준으로 이동시킬 수 있습니다. |
| absolute | 요소를 상위 위치를 기준으로 자유롭게 이동시킵니다. |
| fixed | 화면을 기준으로 고정된 위치에 요소를 배치합니다. |
📋 position: static
- 기본값으로, 요소는 일반적인 흐름에 맞춰 배치됩니다.
- 페이지의 기본 흐름대로 요소가 표시됩니다.
✅ 예시
div {
position: static;
}
- 요소는 문서 내에서 다른 요소와 함께 순차적으로 표시됩니다.
📋 position: relative
- 기본 위치를 기준으로 요소를 상대적으로 이동시킬 수 있습니다.
- top, right, bottom, left 속성으로 위치를 지정할 수 있습니다.
✅ 예시
div {
position: relative;
top: 10px;
left: 20px;
}
- 상대적 위치 이동으로 요소를 원하는 위치로 조정할 수 있습니다.
📋 position: absolute
- 상위 요소를 기준으로 자유롭게 위치를 설정합니다.
- 문서 흐름에서 제외되며, 상위 요소에 상대적인 위치를 지정합니다.
✅ 예시
div {
position: absolute;
top: 50px;
left: 100px;
}
- 상위 요소에 기준을 두고 이동하므로, 다른 요소들과 겹치지 않게 배치할 수 있습니다.
📋 position: fixed
- 화면을 기준으로 고정된 위치에 요소를 배치합니다.
- 스크롤을 해도 위치가 고정되어 화면에 항상 보이게 할 수 있습니다.
✅ 예시
div {
position: fixed;
bottom: 10px;
right: 10px;
}
- 고정된 위치에 요소가 항상 보이게 하여, 상단 바나 하단 바로 많이 사용됩니다.
🚩 정리
- position: static: 기본값으로, 요소가 문서의 흐름에 맞춰 표시됩니다.
- position: relative: 요소의 기본 위치를 기준으로 상대적으로 이동시킵니다.
- position: absolute: 상위 요소를 기준으로 자유롭게 위치를 설정하고, 문서 흐름에서 제외됩니다.
- position: fixed: 화면을 기준으로 고정된 위치에 배치됩니다.
이렇게 CSS의 position 속성을 사용하면, 웹 페이지에서 요소들의 배치를 정확하게 조정할 수 있습니다!
'HTML & CSS' 카테고리의 다른 글
| Chapter 3-15. 선택자 더 알아보기(CSS) (0) | 2025.03.31 |
|---|---|
| Chapter 3-14. 겹치거나 넘치는 요소다루기<z-index,overflow>(CSS) (0) | 2025.03.31 |
| Chapter 3-12. 문서의 흐름 <float>(CSS) (0) | 2025.03.31 |
| Chapter 3-11. 요소의 유형 <display>(CSS) (0) | 2025.03.31 |
| Mini Project : 프로필 페이지 만들기(CSS:2일차 과제)+@ (0) | 2025.03.31 |