가이드라인

위치 지정(Positioning)

position 속성은 웹 페이지 내 HTML 요소의 위치 배치 방식을 결정합니다.


Static 위치 지정

static은 모든 요소의 기본 배치 방식입니다. 별도로 위치를 지정하지 않으면 요소는 원래 순서대로 자동으로 배치됩니다.

CSS
.box { position: static; }

Relative 위치 지정

relative는 요소의 원래 위치 기준 상대적으로 이동합니다. 예를 들어 아래 CSS box 클래스는 클래스가 적용된 요소를 20px만큼 좌측으로, 10px만큼 위로 이동시킵니다.

CSS
.box { position: relative; left: 20px; top: 10px; }

Absolute 위치 지정

absolute는 가장 가까운 position: static이 아닌 부모 요소를 기준으로 위치가 결정돼요. 해당되는 부모 요소가 없다면 웹 페이지의 body를 기준으로 위치를 결정합니다.

CSS
.box { position: absolute; top: 50px; right: 30px; }

Fixed 위치 지정

fixed는 브라우저 창에 대해 고정된 위치를 가져요. 페이지를 스크롤 해도 HTML 요소의 위치가 변하지 않아, 스크롤을 따라다니는 버튼(Floating Button)이나 header의 내비게이션 바(Navigation Bar)를 만들 때 자주 사용합니다.

CSS
.box { position: fixed; bottom: 10px; left: 10px; }

Sticky 위치 지정

sticky는 상대적으로 움직이다가, 특정 지점에 도달하면 HTML 요소를 일정 위치에 고정해요. 테이블의 header 행, sidebar 컨텐츠 등을 고정시킬 때 자주 사용합니다.

CSS
.box { position: sticky; top: 0; }

코드의 별표로 강조된 부분을 따라 입력해 보세요.

가이드라인

AI 튜터

배포

디자인

업로드

수업 노트

즐겨찾기

도움말