코딩하는 김딸기
position, width 이해하기 본문
position
position 속성은 웹 페이지 요소의 위치를 제어하는 데 사용됩니다. 이 속성은 요소의 배치 방식을 결정하고, 구체적인 위치 지정이 가능하게 합니다.
position: static
- 초기값: 모든 요소는 기본적으로 position: static 상태입니다. 이 경우, 요소는 문서 흐름에 따라 배치되며, 좌표 속성(top, right, bottom, left)을 사용할 수 없습니다.
position: relative
- 기본 흐름 유지: position: relative는 요소를 자연스러운 문서 흐름내 배치하되, top, right, bottom, left 속성을 사용해 그 위치를 조정(offset)할 수 있게 합니다. 요소가 원래 차지하고 있던 공간은 그대로 유지되며, 다른 요소들은 영향을 받지 않습니다. 요소의 시각적인 부분만 이동 됩니다.
- 특징: 마크업 작성 순서와 관계없이 앞으로 나와 보이지만, 스태킹 컨텍스트를 생성하지는 않습니다.
- 주요 사용처: relative는 하위 absolute된 요소의 새로운 컨테이닝 블록을 만드는 용도로 많이 사용됩니다.
- 새로운 컨테이닝 블록이 될수 있게 지정한 것->새로운 컨테이닝 블럭 설정은 해당 요소의 상위 요소 내에서만 가능
position: absolute
position: fixed
- 뷰포트 기준: position: fixed는 요소를 뷰포트를 기준으로 고정합니다. 스크롤을 하더라도 요소는 화면의 동일한 위치에 고정됩니다.
- 특징: 요소는 문서 흐름에서 제거되며, 다른 요소들과 겹침 관계를 가질 수 있습니다. z-index를 사용해 다른 요소들보다 앞이나 뒤에 배치할 수 있습니다.
- 주의: 상위 요소에게 transform이 적용 되어있다면 해당 요소는 뷰포트 기준이 아니게 됩니다. 즉, 원래의 용도를 다하지 못한 상태가 됩니다.
CSS 좌표 속성 (left, right, top, bottom)
항상 position 속성과 함께 사용됩니다. (static제외)
이 속성들은 해당 요소가 속해있는 컨테이닝 블록 내에서 요소를 특정 위치로 이동시키는 역할을 합니다.
position속성의 값이 어떻게 되어 있는지에 따라 그 의미가 달라지는 부분을 주의 해야 합니다.
inset
inset은 left, right, top, bottom속성의 단축 속성입니다.
.element {
inset: 30px; /* left, right, top, bottom 모두 30px */
}
스태킹 컨텍스트
기본 레이어링 규칙 이해하기
HTML 문서 내에서 요소들이 기본적으로 쌓이는 순서는 다음과 같습니다.
- 마크업 작성의 순서: 요소들은 HTML 문서의 소스 코드에서 등장하는 순서대로 화면에 표시됩니다. 즉, 후속 요소는 이전 요소 위에 쌓입니다.
- position: relative가 적용된 요소는 위치 이동을 전제하고 있기 때문에 마크업 작성의 순서와 관계없이 앞으로 나와 보이게 됩니다.일반적인 문서의 흐름내에서, 텍스트나 이미지 콘텐츠는 때때로 background 관련 속성보다 위에 그려지게 됩니다.
위에서 언급한 기본 레이어링 규칙만으로는 섬세한 쌓임 순서 관리가 어렵습니다.
상황에 따라 특정 요소를 새로운 스태킹 컨텍스트로 만들어 이러한 쌓임 순서를 관리하게 됩니다.
스택킹 컨텍스트가 된다면?
- 해당 요소는 기본 레이어링 규칙과 관계없이 앞으로 나오게 됩니다. (독립적인 쌓임 맥락 형성)
- 해당 요소 내부의 z-index속성의 기준점이 됩니다.
스택킹 컨텍스트를 생성하는 주요 조건
- position: absolute 또는 relative이고 z-index가 auto가 아닌 경우
- position: fixed 또는 sticky
- Flex Items 중 z-index가 auto가 아닌 경우
- opacity가 1보다 작은 경우
- transform 속성이 none이 아닌 경우
selector {
width: value;
}
값의 종류
- 길이 값: px
- 백분율: %
- 키워드: auto, max-content, min-content, fit-content
width의 초기값 auto 이해하기
width: auto는 요소의 유형과 상황에 따라 다르게 계산됩니다.
- 블록 레벨 요소:
- 직계 부모 요소의 콘텐츠 영역의 너비를 가득 채웁니다. 이때 margin, padding, border등의 다른 값을 고려하여 가득 채웁니다.
- button, input등의 몇몇 특수 목적 요소는 display: block을 통해 블록 레벨 요소가 된다고 해도 콘텐츠 크기 만큼으로만 잡힙니다.
- table요소는 블록 레벨 요소이지만, 별도의 레이아웃 시스템으로 동작되는 요소라 일반적인 블록 레벨 요소와는 다르게 계산됩니다.
- 테이블의 내용물 크기에 맞춰 너비가 결정됩니다.
- 인라인 레벨 요소:
- 내용물의 너비만큼만 차지합니다.
- 대체 요소 (img, video, canvas, iframe등):
- 요소의 고유한 너비를 사용합니다.
가장 일반적인 케이스인, 블록 레벨 요소일 때 width: auto를 가장 관심있게 체크 해 보아야 합니다.
width: auto와 width: 100%는 다릅니다.
"블록 요소의 너비는 100%다"라는 말은 종종 오해를 불러일으킬 수 있습니다. 사실 블록 레벨 요소의 기본 너비는 width: auto이며, 이는 width: 100%와는 확연히 다릅니다.
블록 레벨 요소에서 width: auto
- width속성의 초기값입니다. width속성을 명시적으로 설정하지 않으면 기본으로 적용된 상태입니다.
- 직계 부모 요소의 콘텐츠 영역의 너비를 가용 공간으로 제공 받습니다.
- 이 가용 공간을 margin, padding, border를 고려하여 가득 채웁니다.
- 예를 들어, 좌우 margin이 있는 경우, 요소의 실제 너비는 가용 공간에서 좌우 margin값을 뺀 나머지 입니다.
블록 레벨 요소에서 width: 100%
- 요소의 너비를 직계 부모 요소의 콘텐츠 영역의 너비 100%로 명시적 설정을 한 것입니다.
- % 단위는 컨테이닝 블록의 너비를 백분율로서 계산하여 픽셀값으로 변환하여 적용 해줍니다. 해당 픽셀값이 width: 100%로 설정한 요소에게 바로 적용 됩니다.
- margin속성이 추가되면, 해당 요소가 부모를 벗어날 수 있습니다. 추가적인 margin속성 값을 고려하여 자동 조정 되는 width: auto와 다른 동작입니다.
1. width: auto
- 기본 설정: 요소의 너비를 기본 설정에 맡깁니다.
- 어떻게 동작하나: 콘텐츠 크기나 부모 요소의 너비에 따라 자동으로 조정됩니다.
- **블록 요소(block element)**의 경우: 부모 요소의 너비만큼 자동으로 확장합니다.
- **인라인 요소(inline element)**의 경우: 콘텐츠 크기에 따라 너비가 결정됩니다.
2. width: 100%
- 설정 내용: 부모 요소의 너비를 100%로 설정하여, 부모 요소의 전체 너비를 차지합니다.
- 어떻게 동작하나: 부모 요소의 너비에 맞춰 자식 요소의 너비가 정확히 부모 요소와 동일해집니다.
요약
- width: auto: 요소의 너비를 기본 설정에 맡깁니다. 블록 요소의 경우 부모의 너비에 맞추고, 인라인 요소의 경우 콘텐츠 크기에 따라 결정됩니다.
- width: 100%: 요소의 너비를 부모 요소의 너비와 정확히 동일하게 설정합니다.
'
똑똑한 키워드: 콘텐츠 기반 너비 지정
width 속성은 콘텐츠를 기반으로 너비를 지정할 수 있는 몇 가지 똑똑한 키워드 값을 제공합니다.
- max-content: 콘텐츠가 줄바꿈 없이 표시될 수 있게 최대 너비를 가집니다. 긴 텍스트의 경우, 한 줄로 모든 텍스트를 표시할 수 있는 너비가 됩니다. 컨테이너보다 더 커질 수 있습니다.
- min-content: 요소를 가능한 한 작게 만들지만, 내용을 완전히 표시할 수 있는 최소 크기를 유지합니다.
- fit-content: 콘텐츠에 맞추되, 가용 공간을 초과하지 않습니다.
- 기본적으로 max-content처럼 동작하지만, 가용 공간보다 크면 컨테이너에 맞게 줄 바꿈 됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #eee;
}
.container {
width: 300px;
border: 1px solid black;
margin: 100px auto;
}
.box {
background-color: lightblue;
margin: 5px;
}
.box.max-content { width: max-content; }
.box.min-content { width: min-content; }
.box.fit-content { width: fit-content; }
</style>
</head>
<body>
<div class="container">
<div class="box max-content">max-content. This is a long text to demonstrate width</div>
<div class="box min-content">min-content. This is a long text to demonstrate width</div>
<div class="box fit-content">fit-content. This is a long text to demonstrate width</div>
</div>
</body>
</html>
Links to this page