position 좌표 시스템

핵심 개념

position 속성은 요소의 배치 기준을 결정합니다. static(기본값)은 일반 흐름, relative는 자신의 원래 위치 기준, absolute는 가장 가까운 non-static 부모 기준, fixed는 뷰포트 기준입니다. top/left/right/bottom으로 좌표를 지정합니다. position 값을 지우며 요소들이 어떻게 이동하는지 확인하십시오.

코드 분석

CSS3📋 코드 (3줄)

absolute top-left
  absolute bottom-right
  center

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'position 좌표' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'position 좌표'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'position 좌표' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'position 좌표'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

position 좌표 시스템은 이 3가지만 확실히 잡으세요

1.position을 모르면 모달 팝업을 화면 중앙에 고정하거나 헤더를 상단에 붙이는 기본적인 배치조차 불가능합니다

2.static은 기본 흐름, relative는 자기 기준 이동, absolute는 부모 기준 탈출, fixed는 뷰포트 고정입니다

3.다음 챕터에서 position 없이도 유연한 1차원 배치를 가능하게 하는 Flexbox를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.7 — 질문하거나 답변을 확인하세요

→

진행도 7 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)