위치 속성 - by. UXKM

Publishing
CSS
CSS 초급
위치 속성

요약 설명
CSS의 위치 속성은 HTML 요소를 문서 상에 배치하는 방법을 제어하는 속성들로 구성됩니다.
요소의 표시 방식(display), 위치 지정(position), 좌표 설정(top, right, bottom, left), 흐름 제어(float, clear), 넘침 처리(overflow), 스크롤 스냅(scroll-snap) 등을 설정하여 레이아웃을 구성할 수 있습니다.

표시 관련 속성

display 속성

display 속성은 웹 페이지의 레이아웃을 결정하는 중요한 CSS 속성입니다.
이 속성은 HTML 요소가 브라우저에 어떻게 표시되는지를 결정합니다.
모든 HTML 요소는 각각의 기본 display 속성값을 가지고 있으며, 이 값을 변경하여 요소의 표시 방식을 바꿀 수 있습니다.
display 속성값을 변경해도 요소의 본질적인 특성은 변하지 않습니다.
예를 들어, display 속성값을 인라인에서 블록으로 변경해도, 원래 블록 요소가 아니었다면 내부에 다른 요소를 포함할 수 없습니다.

대표적인 display 속성의 기본 4가지 값은 다음과 같습니다.

									div {
										display: none | block | inline | inline-block;
									}

none

CSS Level 1

요소를 숨깁니다. 마치 존재하지 않는 것처럼 페이지가 렌더링됩니다.

visibility: hidden으로 설정하면 요소가 보이지 않지만 여전히 공간을 차지합니다.
block

CSS Level 1

display 속성값이 block인 요소는 항상 새로운 줄에서 시작하며, 해당 줄의 전체 너비를 차지합니다.
inline

CSS Level 1

display 속성값이 inline인 요소는 새로운 줄에서 시작하지 않으며, 요소의 내용만큼만 너비를 차지합니다.
inline-block

CSS Level 2

요소 자체는 인라인 요소처럼 동작하지만, 내부에서는 블록 요소처럼 동작합니다.

인라인 요소와 비슷하지만 너비와 높이를 설정할 수 있으며, margin을 이용하여 여백을 지정할 수 있습니다.

위에서 설명한 속성값 외에 CSS Display Module Level 3, CSS Grid Layout, CSS Flexible Box Layout Module에 명시된 다음과 같은 값들도 있습니다.

<display-outside> 값
div { display: block; display: inline; display: run-in; }
<display-inside> 값
div { display: flow; display: flow-root; display: table; display: flex; display: grid; display: ruby; }
<display-outside> + <display-inside> 값
div { display: block flow; display: inline table; display: flex run-in; }
<display-listitem> 값
div { display: list-item; display: list-item block; display: list-item inline; display: list-item flow; display: list-item flow-root; display: list-item block flow; display: list-item block flow-root; display: flow list-item block; }
<display-internal> 값
div { display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; }
<display-box> 값
div { display: contents; display: none; }
<display-legacy> 값
div { display: inline-block; display: inline-table; display: inline-flex; display: inline-grid; }
전역 값
div { display: inherit; display: initial; display: unset; }

위치 및 정렬 관련 속성

문서 상에 요소를 배치하는 방법을 지정합니다.
top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정하며, z-index 속성으로 보이는 순서를 결정합니다.

position 속성

position 속성은 HTML 요소의 위치를 결정하는 방식을 설정합니다.

								div {
									position: static | relative | absolute | fixed | sticky;
								}

CSS에서 요소의 위치를 결정하는 방식에는 다음과 같이 대표적인 4가지 방식이 있습니다.

정적 위치(static position) 지정 방식

									div {
										position: static;
									}

모든 HTML 요소의 position 속성의 기본값은 static입니다.

static이 지정된 요소는 문서의 일반적인 흐름(normal flow)을 따라 배치됩니다.

top, right, bottom, left, z-index 속성들이 static에서는 효과가 없습니다.

즉, position을 초기화할 때 많이 사용됩니다.

상대 위치(relative position) 지정 방식

									div {
										position: relative;
									}

relative가 지정된 요소 역시 문서의 일반적인 흐름(normal flow)을 따라 배치됩니다.

해당 요소가 정적 위치 지정 방식일 때의 위치에 상대적으로 위치합니다.

table-*-group, table-row, table-column, table-cell, table-caption 요소에 relative가 주는 효과는 정의되지 않았습니다.

절대 위치(absolute position) 지정 방식

									div {
										position: absolute;
									}

절대 위치(absolute position) 지정 방식은 고정 위치가 뷰포트를 기준으로 위치를 결정하는 것과 비슷하게 동작합니다.

하지만 뷰포트를 기준으로 하는 것이 아닌 위치가 설정된 조상(ancestor) 요소를 기준으로 위치를 설정하게 됩니다.

위치가 설정된 조상 요소를 가지지 않는다면, HTML 문서의 body 요소를 기준으로 위치를 설정하게 됩니다.

위치가 설정된 요소라는 것은 정적 위치(static) 지정 방식을 제외한 다른 방식(relative, fixed, absolute)으로 위치가 설정된 요소를 의미합니다.

고정 위치(fixed position) 지정 방식

									div {
										position: fixed;
									}

고정 위치(fixed position) 지정 방식은 뷰포트(viewport)를 기준으로 위치를 설정하는 방식입니다.

웹 페이지가 스크롤되어도 고정 위치로 지정된 요소는 항상 같은 곳에 위치하게 됩니다.

top 속성

위치가 설정된 조상 요소의 위에서부터의 좌표값을 설정합니다.

								div {
									position: [relative | absolute | fixed];
									top: length | %;
								}

right 속성

위치가 설정된 조상 요소의 오른쪽으로부터의 좌표값을 설정합니다.

								div {
									position: [relative | absolute | fixed];
									right: length | %;
								}

bottom 속성

위치가 설정된 조상 요소의 아래로부터의 좌표값을 설정합니다.

								div {
									position: [relative | absolute | fixed];
									bottom: length | %;
								}

left 속성

위치가 설정된 조상 요소의 왼쪽으로부터의 좌표값을 설정합니다.

								div {
									position: [relative | absolute | fixed];
									left: length | %;
								}

z-index 속성

HTML 요소의 위치를 설정하면 어떤 요소들은 설정된 위치 및 방식에 따라 서로 겹칠 수 있습니다.
z-index 속성은 이렇게 겹쳐지는 요소들이 쌓이는 스택(stack)의 순서를 설정합니다.
스택의 순서는 양수나 음수 모두 설정할 수 있으며, 크기가 클수록 앞쪽에 위치하고 작을수록 뒤쪽에 위치하게 됩니다.

								div {
									position: [relative | absolute | fixed];
									z-index: length;
								}

position 속성 예제

흐름 관련 속성

float 속성

float 속성은 HTML 요소가 주변의 다른 요소들과 자연스럽게 어울리도록 만들어 줍니다.
float은 본래 위와 같은 목적으로 만들어졌지만, 과거에는 레이아웃을 작성할 때 주로 사용되었습니다.
현재는 Flexbox나 Grid 같은 속성이 레이아웃 작성 용도로 주로 사용됩니다.

								div {
									float: none | left | right;
								}

none : 요소가 부동하지 않아야 함을 나타내는 키워드입니다.
left : 좌측 정렬. 요소가 자신의 포함(containing) 블록의 좌측에 부동(float, 떠움직여)해야 함을 나타내는 키워드입니다.
right : 우측 정렬. 요소가 자신의 포함 블록의 우측에 부동해야 함을 나타내는 키워드입니다.

clear 속성

clear 속성은 float 속성이 적용된 이후 나타나는 요소들의 동작을 조절해 줍니다.
컨테이너 요소에 float 속성이 적용되면 그 이후에 등장하는 모든 요소들은 정확한 위치를 설정하기가 매우 힘들어집니다.
따라서 float 속성을 적용하고자 하는 요소가 모두 등장한 이후에는 clear 속성을 사용하여, 이후에 등장하는 요소들이 더는 float 속성에 영향을 받지 않도록 설정해줘야 합니다.

								div {
									clear: both | left | right | none;
								}

both : 전체 해제. 요소가 지난 both left 및 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
left : 좌측 해제. 요소가 지난 left 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
right : 우측 해제. 요소가 지난 right 부동체를 해제하기 위해 아래로 이동됨을 나타내는 키워드입니다.
none : 요소가 지난 부동 요소를 해제하기 위해 아래로 이동되지 않음을 나타내는 키워드입니다.

float을 해제하는 3가지 방법

float 속성을 해제하는 방법은 여러 가지가 있습니다.
각 방법의 장단점을 이해하고 상황에 맞게 선택하는 것이 중요합니다.

float을 사용한 부모요소 하단에 빈 요소 삽입

빈 요소를 삽입하지만 추후에 유지보수할 때마다 빈 요소를 삽입해야 하는 단점이 있습니다.

 <div class="wrap"> <div class="left">left content</div> <div class="right">right content</div> <div class="clear"></div> </div>  <style> .left {float: left;} .right {float: right;} .clear {clear: both;} </style>
float을 사용한 부모요소에 overflow 속성 사용

빈 요소를 삽입하는 방법보다 유용하지만 overflow: hidden을 사용할 경우 자식요소가 부모요소를 벗어났을 경우 해당요소는 보이지 않게 됩니다.

overflow: auto 방식을 사용할 경우 자식요소가 부모요소를 벗어났을 경우 해당요소는 보이게 되지만 잘못하면 스크롤이 발생합니다.

해당 디자인에 맞추어 적절하게 사용해야 합니다.

 <div class="wrap"> <div class="left">left content</div> <div class="right">right content</div> </div>  <style> .wrap {overflow: hidden;} .left {float: left;} .right {float: right;} </style>
float을 사용한 부모요소에 가상요소(::after)를 사용

가장 많이 사용하면서 빈 요소를 삽입하는 방식과 동일하지만 불필요하게 마크업을 수정할 필요없이 CSS로만 수정 가능합니다.

 <div class="wrap"> <div class="left">left content</div> <div class="right">right content</div> </div>  <style> .wrap {zoom: 1;} .wrap:after {display: block; clear: both; content: "";} .left {float: left;} .right {float: right;} </style>

float, clear 속성 예제

스크롤 스냅(Scroll Snap)

스크롤 스냅은 스크롤 컨테이너가 스크롤할 때 자식 요소들이 특정 지점에 자동으로 정렬되도록 하는 기능입니다.
캐러셀, 이미지 갤러리, 가로 스크롤 UI 등을 구현할 때 JavaScript 없이도 부드럽고 정확한 스크롤 동작을 만들 수 있습니다.

스크롤 스냅은 CSS Scroll Snap Module Level 1에 정의되어 있으며, 최신 브라우저에서 지원됩니다.

scroll-snap-type

scroll-snap-type은 스크롤 컨테이너에 스냅 동작을 활성화하고 스냅 축을 지정합니다.

								.container {
									scroll-snap-type: none | x | y | block | inline | both;
									scroll-snap-type: x mandatory;
									scroll-snap-type: y proximity;
								}

scroll-snap-type 속성 값:

none: 스크롤 스냅 없음 (기본값)
x / inline: 가로(인라인) 방향 스냅
y / block: 세로(블록) 방향 스냅
both: 가로와 세로 모두 스냅
mandatory: 항상 스냅 포인트에 정렬 (기본값)
proximity: 스냅 포인트 근처에서만 정렬

scroll-snap-align

scroll-snap-align은 스크롤 컨테이너 내의 자식 요소에 적용하여 스냅 정렬 위치를 지정합니다.

								.item {
									scroll-snap-align: none | start | end | center;
								}

								/* 가로 스크롤 예제 */
								.container {
									scroll-snap-type: x mandatory;
									overflow-x: auto;
								}

								.item {
									scroll-snap-align: start;
								}

scroll-snap-align 속성 값:

none: 스냅 정렬 없음
start: 요소의 시작 지점에 정렬
end: 요소의 끝 지점에 정렬
center: 요소의 중앙에 정렬

scroll-snap-stop

scroll-snap-stop은 스크롤할 때 모든 스냅 포인트를 거쳐야 하는지, 일부를 건너뛸 수 있는지 지정합니다.

								.item {
									scroll-snap-stop: normal | always;
								}

								/* 모든 스냅 포인트를 거쳐야 함 */
								.item {
									scroll-snap-align: start;
									scroll-snap-stop: always;
								}

normal: 스크롤 시 일부 스냅 포인트를 건너뛸 수 있음 (기본값)
always: 모든 스냅 포인트를 반드시 거쳐야 함

scroll-padding

scroll-padding은 스크롤 스냅 영역의 패딩을 설정합니다. 컨테이너의 가장자리에서 스냅 포인트까지의 거리를 조절할 수 있습니다.

								.container {
									scroll-snap-type: y mandatory;
									scroll-padding: 20px;  /* 모든 방향 */
									scroll-padding-top: 50px;  /* 상단만 */
									scroll-padding-inline: 1rem;  /* 인라인 방향 */
								}

scroll-margin

scroll-margin은 각 스냅 항목의 마진을 설정합니다. 스냅 정렬 시 요소 주변의 여백을 조절할 수 있습니다.

								.item {
									scroll-snap-align: start;
									scroll-margin: 20px;  /* 모든 방향 */
									scroll-margin-top: 50px;  /* 상단만 */
									scroll-margin-inline-start: 1rem;  /* 인라인 시작 */
								}

스크롤 캐러셀 예제

가로 스크롤 캐러셀 예제

가로로 스크롤하면 각 카드가 시작 지점에 자동으로 정렬됩니다.
scroll-snap-type: x mandatory와 scroll-snap-align: start를 사용했습니다.

세로 스크롤 갤러리 예제

세로로 스크롤하면 각 항목이 시작 지점에 자동으로 정렬됩니다.
scroll-snap-type: y mandatory와 scroll-snap-align: start를 사용했습니다.