포지셔닝 기초

Coddy HTML 여정의 CSS로 스타일링하기 섹션에 포함된 레슨. 76개 중 55번째.

CSS에서 포지셔닝은 웹 페이지에서 요소의 위치를 제어할 수 있도록 하는 속성 모음입니다. 기본적으로 요소는 HTML 문서의 일반적인 흐름에 따라 배치됩니다. 그러나 CSS 포지셔닝을 사용하면 요소를 일반적인 흐름에서 벗어나 해당 요소를 포함하는 요소 또는 뷰포트(브라우저 창의 보이는 영역)를 기준으로 특정 위치에 배치할 수 있습니다.

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).

챌린지

쉬움

상위 division(<div>) 하나와 하나의 하위 division(<div>)을 포함하는 HTML 문서가 주어집니다. position 속성을 사용하여 요소의 Positioning 컨텍스트를 변경하는 것이 과제입니다. 다음 단계를 따르세요:

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

직접 해보기

<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>