Chapter 3-13. 위치 지정하기 <position>(CSS)

HTML & CSS

Chapter 3-13. 위치 지정하기 <position>(CSS)

Chansman 2025. 3. 31. 15:08

📌 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 속성을 사용하면, 웹 페이지에서 요소들의 배치를 정확하게 조정할 수 있습니다!