포지셔닝 기초

Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 55번째.

CSS에서 positioning은 웹 페이지에서 요소의 위치를 제어할 수 있게 해주는 속성 집합입니다. 기본적으로 요소는 HTML 문서의 일반적인 흐름(normal flow)에 따라 배치됩니다. 하지만 CSS positioning을 사용하면 요소를 일반적인 흐름에서 벗어나게 하여, 해당 요소를 포함하는 요소나 viewport(브라우저 창의 가시 영역)를 기준으로 특정 위치에 배치할 수 있습니다.

position 속성에는 여러 가지 값이 있으며, 각 값은 고유한 동작을 가집니다:

static: 이것은 기본값입니다. 요소는 문서의 일반적인 흐름에 따라 배치됩니다. top, right, bottom, 그리고 left 속성은 아무런 효과가 없습니다.

relative: 요소가 일반적인 위치를 기준으로 배치됩니다. top, right, bottom, left 속성을 설정하면 요소가 일반적인 위치에서 벗어나 이동하지만, 여전히 일반적인 흐름 내에서 공간을 차지합니다.

absolute: 요소가 일반적인 흐름에서 제거되고, 가장 가까운 위치 지정 조상(static이 아닌 position 속성을 가진 조상)을 기준으로 배치됩니다. 위치 지정 조상이 발견되지 않으면 초기 컨테이닝 블록(보통 뷰포트)을 기준으로 배치됩니다.

fixed: 요소가 일반적인 흐름에서 제거되고 뷰포트를 기준으로 배치됩니다. 페이지를 스크롤하더라도 해당 위치에 고정되어 있습니다.

position 속성을 사용하기 위한 기본 구문은 다음과 같습니다:

selector {
    position: value;
}

value: 원하는 위치 지정 동작 (예: static, relative, absolute, fixed, sticky).

챌린지

쉬움

부모 디비전(<div>)과 그 안에 포함된 하나의 자식 디비전(<div>)이 있는 HTML 문서가 주어집니다. 여러분의 작업은 position 속성을 사용하여 요소의 배치 컨텍스트를 변경하는 것입니다. 다음 단계를 따르세요:

container 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 position 속성을 relative로 설정하세요. 이렇게 하면 자식 요소들을 위한 배치 기준이 되는 조상 요소가 됩니다.
box 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요. 해당 요소의 position 속성을 absolute로 설정하세요. 이렇게 하면 해당 요소가 일반적인 흐름에서 벗어나 가장 가까운 배치 기준 조상 요소(container)를 기준으로 배치될 수 있습니다.
.box 요소의 top 속성을 50px로, left 속성을 100px로 설정하세요. 이렇게 하면 박스가 배치 기준 조상 요소(container)의 상단에서 50픽셀, 왼쪽에서 100픽셀 떨어진 곳에 위치하게 됩니다.

치트 시트

position 속성은 웹 페이지에서 요소가 배치되는 방식을 제어합니다:

selector {
    position: value;
}

위치 값:

static: 일반적인 문서 흐름에 따른 기본 배치
relative: 일반적인 위치를 기준으로 상대적으로 배치되며, 여전히 흐름 내에서 공간을 차지함
absolute: 일반적인 흐름에서 제거되며, 가장 가까운 위치 지정 조상 요소를 기준으로 배치됨
fixed: 일반적인 흐름에서 제거되며, 뷰포트를 기준으로 배치되어 스크롤 시에도 고정된 상태로 유지됨

top, right, bottom, left 속성을 사용하여 위치를 조정합니다 (static 제외).

직접 해보기

<html>
<head>
    <title>Positioning Basics</title>
    <style>
        .container {
            width: 400px;
            height: 300px;
            border: 1px solid black;
        }
        .box {
            width: 100px;
            height: 100px;
            background-color: lightblue;
        }
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="container">
        <div class="box"></div>
    </div>
</body>
</html>