Fixed 포지셔닝

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

CSS에서 고정 위치 지정(fixed positioning)은 스크롤을 얼마나 하든 상관없이 요소를 화면의 동일한 위치에 유지합니다. position: fixed;를 설정하면 요소가 일반적인 레이아웃에서 제거되므로 다른 요소들이 이를 무시하게 됩니다. 이 요소는 브라우저 창에 고정되어 있으므로, 항상 화면에 보여야 하는 헤더, 푸터 또는 메뉴를 만드는 데 유용합니다.

고정 위치 지정(fixed positioning)을 위한 기본 구문은 다음과 같습니다:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

position: fixed;: 이 선언은 요소의 배치 방식을 고정(fixed)으로 설정합니다.

top, right, bottom, left: 이 속성들은 뷰포트를 기준으로 요소의 위치를 지정합니다. 픽셀(px), em(em), 백분율(%) 또는 기타 유효한 CSS 단위로 지정된 양수 또는 음수 값을 사용할 수 있습니다.

예를 들어:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

이 예제에서 header 클래스를 가진 요소는 position: fixed;, top: 0;, left: 0;을 사용하여 뷰포트 상단에 고정됩니다.

챌린지

쉬움

헤더(<div>)와 단락(<p>)이 포함된 HTML 문서가 주어집니다. 여러분의 과제는 고정 위치 지정(fixed positioning)을 사용하여 페이지를 스크롤하더라도 헤더가 뷰포트 상단에 머물도록 만드는 것입니다. 다음 단계를 따르세요:

header 클래스를 가진 <div> 요소를 대상으로 하는 CSS 규칙을 작성하세요.
.header 요소의 position 속성을 fixed로 설정하세요.
.header 요소의 top 속성을 0으로, left 속성을 0으로 설정하세요. 이렇게 하면 헤더가 뷰포트의 왼쪽 상단 모서리에 위치하게 됩니다.
.header 요소의 width 속성을 100%로 설정하여 전체 뷰포트에 걸쳐 늘어나도록 만드세요.
.header 요소의 background-color 속성을 #fcc726 (골든 옐로우)으로 설정하여 페이지 콘텐츠와 구별되어 보이게 하세요.
보기 좋게 text-align 속성을 center로 설정하세요.

치트 시트

고정 위치 지정(Fixed positioning)은 스크롤에 관계없이 요소를 화면의 동일한 위치에 유지합니다. 해당 요소는 일반적인 레이아웃 흐름에서 제거됩니다.

기본 구문:

selector {
    position: fixed;
    top: value;
    right: value;
    bottom: value;
    left: value;
}

예제 - 요소를 뷰포트의 왼쪽 상단에 고정하기:

.header {
    position: fixed;
    top: 0;
    left: 0;
}

위치 속성(top, right, bottom, left)은 뷰포트를 기준으로 요소의 위치를 지정하며 픽셀(pixels), ems, 백분율(percentages) 또는 기타 CSS 단위를 값으로 허용합니다.

직접 해보기

<html>
<head>
    <title>Fixed Positioning</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="header">This is the header</div>
    <p>This is some content below the header. Scroll down to see the fixed positioning in action.</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
    <p>More content here...</p>
</body>
</html>