8.1 일반 흐름
CSS에서의 요소 위치 지정은 웹 페이지에서 요소들의 위치 및 상호작용을 관리하는 데 중요한 역할을 해. 이건 다른 요소들 및 자신의 컨테이너와의 관계 내에서 요소들이 어떻게 배치될지를 결정해. 다양한 위치 지정 방식이 요소의 흐름에 어떻게 영향을 주는지 살펴보자.
문서 흐름과 위치 지정
일반 문서 흐름에서는 HTML 마크업 순서에 따라 요소들이 하나씩 배치돼. 블록 요소들(예: <div>, <p>, <h1>)은 수직으로 배치돼서 부모 컨테이너의 전체 너비를 차지하고, 인라인 요소들(예: <span>, <a>, <em>)은 수평으로 배치돼서 필요한 공간만 차지해.
예시:
CSS
.block {
background-color: lightblue;
margin: 10px;
padding: 10px;
}
.inline {
background-color: lightcoral;
margin: 5px;
padding: 5px;
}
HTML
<div class="block">블록 요소</div>
<span class="inline">인라인 요소</span>
<span class="inline">인라인 요소</span>
8.2 위치 지정이 문서 흐름에 미치는 영향
다양한 위치 지정 타입은 표준 문서 흐름을 변경할 수 있어. 그게 어떻게 일어나는지 알아보자:
static 위치 지정
static 위치 지정은 기본값이야 그리고 일반 문서 흐름을 변경하지 않아. position: static을 가진 요소들은 HTML 마크업에 의해 정의된 순서로 배치돼.
흐름에 미치는 영향:
- 요소들은 일반 흐름 내에 유지돼
- HTML 내의 순서에 따라 요소들이 하나씩 배치돼
relative 위치 지정
position: relative을 가진 요소들은 일반 흐름에 남아 있지만, top, right, bottom, left 속성을 사용하여 자신의 정상 위치로부터 이동할 수 있어. 이 이동은 다른 요소들의 위치에 영향을 미치지 않아.
흐름에 미치는 영향:
- 요소들은 일반 흐름 내에 유지돼
- 요소의 이동은 인접 요소의 위치를 변경하지 않아
absolute 위치 지정
position: absolute을 가진 요소들은 문서의 일반 흐름에서 제거되고 가장 가까운 위치 지정된 선조를 기준으로 배치돼. 만약 그런 선조가 없다면, 보통 <html>이나 <body>를 기준으로 배치돼.
흐름에 미치는 영향:
- 요소들은 일반 흐름에서 제거돼
- 가장 가까운 위치 지정된 선조를 기준으로 배치돼
- 다른 요소들은 이 요소들이 없는 것처럼 행동해
fixed 위치 지정
position: fixed을 가진 요소들은 일반 흐름에서 제거되고 브라우저 창을 기준으로 배치돼. 페이지 스크롤 시에도 이들은 제자리에 남아.
흐름에 미치는 영향:
- 요소들은 일반 흐름에서 제거돼
- 브라우저 창을 기준으로 배치돼
- 페이지 스크롤 시에도 제자리에 남아
- 다른 요소들은 이 요소들이 없는 것처럼 행동해
sticky 위치 지정
position: sticky을 가진 요소들은 정해진 스크롤 임계값에 도달할 때까지는 상대적으로 위치 지정된 것처럼 행동하다가, 임계값에 도달하면 고정돼.
흐름에 미치는 영향:
- 요소들은 스크롤 임계값에 도달하기 전까지 일반 흐름에 남아
- 임계값 도달 후, 요소는 고정되며 더 이상 정상 흐름에 영향을 미치지 않아
8.3 흐름에 미치는 시각적 예시
1. 고정 위치 지정 예시:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.fixed {
position: fixed;
top: 10px;
right: 10px;
background-color: lightcoral;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="fixed">고정 요소</div>
<div class="content">스크롤 가능한 콘텐츠
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
2. 스티키 위치 지정 예시:
CSS
.wrapper {
height: 200px;
overflow: auto;
}
.sticky {
position: sticky;
top: 0;
background-color: lightgreen;
padding: 10px;
}
.content {
background: linear-gradient(white, lightgray);
}
HTML
<div class="wrapper">
<div class="sticky">스티키 요소</div>
<div class="content">
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
Suspendisse tellus sem, sollicitudin ac sapien vitae, consectetur molestie nunc. Suspendisse gravida efficitur est, quis sagittis lectus tincidunt ut. Vestibulum ut tortor vel ligula laoreet fermentum ut quis orci. Nulla facilisi. Cras a vehicula ante. Nullam auctor magna sed justo fringilla condimentum. Aenean lacinia mauris ac neque rhoncus iaculis. Sed iaculis mattis ipsum sed facilisis. Ut non elit mi. Vestibulum tempus lectus eget turpis bibendum, id venenatis urna eleifend.
Fusce at augue at tellus vehicula condimentum quis vitae massa. Vivamus faucibus lectus ut diam pharetra sollicitudin. Sed eu pretium lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed vitae venenatis purus. Nullam sed porttitor elit. Praesent condimentum sem sit amet odio tempus, at finibus ante feugiat.
Morbi fringilla magna vitae tellus ultrices convallis. Donec pharetra mollis velit et elementum. Ut aliquam odio quis pellentesque eleifend. Nullam vel auctor magna. Sed mollis vitae odio non bibendum. Suspendisse ornare, tellus vitae vehicula mattis, justo lorem ullamcorper orci, elementum pretium augue justo ut ante. Nulla volutpat finibus porta.
</div>
</div>
GO TO FULL VERSION