CSS 레이아웃 속성 기초1 - 포지션(Position) 속성을 이해하자.
CSS "포지션", 또는 "위치 속성"은 요소의 표시 위치를 결정하는 HTML 레이아웃의 중요한 기초 속성입니다.
다양한 속성 값을 가지고 있고, 속성 값에 따라 요소가 표시되는 위치도 전혀 다릅니다.
단어 그대로 사용하면 한글로 "위치 속성"이라고 사용해야 하지만, 위치 속성에 해당하는 CSS 속성이 여러 가지이기 때문에 혼동을 할 가능성이 있고, 그래서 "position" 속성은 "포지션"으로 영어 단어를 그대로 사용합니다.
포지션 속성의 속성 이름은 "position" 이며, inherit, static, initial, relative, absolute, fixed, sticky와 같은 속성 값을 사용할 수 있습니다.
그밖에 revert, unset 과 같은 속성 값도 있지만, 거의 사용되지 않기 때문에 따로 다루지는 않습니다.
포지션 속성 값들 중 static, inherit, initial 속성 값은 HTML 문서의 흐름을 따라 배치되는 기본 속성을 유지하거나 원래의 속성을 유지하기 위한 속성 값입니다.
나머지, relative, absolute, fixed, sticky 속성 값은 요소를 임의의 원하는 위치에 배치하기 위해 사용하는 포지션 속성 값입니다. 이 속성 값들을 이용해 위치를 정한 요소를 "위치를 정한 요소"(Positioned Element)라고 따로 구분하기도 합니다.
그리고 문서의 흐름을 따라 흐르는 static 속성을 가진 요소는 "위치를 정하지 않은 요소"(unPositioned Element) 라고 합니다.
포지션 초기화와 상속 속성
- inherit
부모 요소의 위치 속성을 상속 받습니다.
요소의 기본 위치 속성이 부모 요소와 다르면 부모 요소의 위치 속성을 상속받아 변경 변경됩니다. 부모 요소의 위치 속성이 absolute 면 위치 속성을 그대로 상속받아 자신도 absolute 속성을 가지게 됩니다.
반대로 생각하면 위치 속성인 position 은 기본적으로 상속되지 않는 속성이라는 뜻입니다.
- initial
기본값, 또는 초기화의 의미를 가지고 있습니다. CSS에서 요소에 위치 속성을 부여했다가, 원래 요소가 가지는 기본 위치 속성으로 다시 복구할 때 사용합니다.
기본 위치 속성이 static 인 요소에 absolute 속성을 부여했다가, 다시 원래의 위치 속성으로 돌리려면 static 속성을 재 지정해도 되지만 initial 속성을 부여하면 원래 요소의 속성인 static으로 복구됩니다.
태그 종류에 따라 기본 위치 속성을 알고 있지 않아도 원래 위치 속성으로 되돌릴 수 있기 때문에 위치 속성을 초기화할 때는 initial 속성을 사용하는 것이 좋습니다.
문서 흐름에 맞춰 배치되는 포지션 속성
static 속성은 요소의 기본 위치 속성이며 여기서부터 모든 포지션 속성이 시작되므로 꼭 알고 넘어가야 합니다. 쉽게 static 속성과 위치를 정한 나머지 포지션 속성들(relative, absolute, fixed, sticky)로 구분한다고 생각하면 됩니다.
- static
HTML 문서의 흐름을 따라 표시되는 별도의 포지션 속성이 없는 태그들은 기본 속성이 모두 static입니다.
inherit과 initial은 위치 속성이 아니라 원래의 위치 속성으로 돌아가거나 상속받는 대체자의 기능이기 때문에 문서의 흐름에 맞춰 배치되는 포지션 속성은 static 1개라고 이해하면 됩니다.
static 속성을 가진 요소는 요소의 위치를 정하는 속성인 top, right, bottom, left 속성을 사용할 수 없습니다. 정확하게는 사용해도 속성 값이 요소에 적용되지 않습니다.
인라인 텍스트 요소인 <span> 태그에 마진(margin) 속성을 사용해도 적용되지 않는 것과 같습니다.
문서의 흐름에 따라 순서대로 배치되기 때문에 요소의 표시 요소의 표시 우선순위를 정하는 레이어(z-index) 속성 또한 사용할 수 없으며, 레이어 속성을 사용해도 static 요소에는 적용되지 않습니다.
static 포지션 속성인 요소는 top, right, bottom, left, z-index 속성을 사용할 수 없다는 것은 꼭 기억해야 합니다. 중요합니다!
위치를 정한 포지션 속성
요소가 표시되는 위치를 임의로 정할 수 있는 속성 값은 relative, absolute, fixed, sticky 4가지가 있습니다.
"위치를 정한 포지션 속성"을 가진 요소는 표시 위치를 정하는 거리 속성(top, right, bottom, left)과 순서 속성(z-index)을 이용하면 문서의 흐름에 따른 배치 순서를 무시하고 원하는 위치에 표시할 수 있습니다.
요소를 위치시키는 기준점에 따라 위치를 정한 포지션 속성을 구분하면 요소의 원래 위치를 기준으로 상대적인 거리를 정하는 상대 위치, 문서, 또는 부모 요소의 테두리를 기준으로 거리를 정하는 절대 위치, 그리고 뷰포트에 요소가 표시되는지 여부에 따라 relative와 fixed 속성 중 한 가지 속성으로 동작하는 매달린 위치(또는 스티키 위치) 3가지 종류가 있습니다.
절대 위치를 제외하면 속성이 하나씩만 있기 때문에 종류로 세분화해서 나누는 것은 의미가 없으므로 속성 값을 기준으로 4가지로 나누어 알아보겠습니다.
위치 속성에 대한 설명은 다음 예를 기준으로 설명합니다.
글 끝에 완성된 전체 예제 소스를 다운로드할 수 있는 링크가 있으므로 여기서는 코드를 살펴보기만 하고 다음으로 넘어가면 됩니다.
<body>
<article>
<div>
<div class="wrap">
<div>Relative 첫번째</div>
<div>Relative 두번째</div>
<div>Relative 세번째</div>
</div>
</div>
</article>
</body>html, body{
width: 100%;
margin: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
box-sizing: border-box;
}
article{
box-sizing: border-box;
margin: 20px;
background-color: #f8f8f8;
}
.wrap{
width: 450px;
height: 300px;
padding: 20px;
background-color: #e8e8e8;
}
.wrap div{
width: 120px;
height: 100px;
display: inline-block;
}
.wrap div:nth-child(1){
background-color: #a88;
}
.wrap div:nth-child(2){
background-color: #8a8;
}
.wrap div:nth-child(3){
background-color: #88a;
}.wrap 클래스를 가진 부모 요소 1개가 인라인 블록으로 가로로 나열된 블록 3개를 담고 있는 단순한 구조로 웹브라우저에는 다음과 같이 표시됩니다.
웹브라우저 화면 외쪽 위 모서리에 붙어서 영역이 표시되며, 위치 속성에서 HTML 문서, 또는 기준이 되는 요소의 왼쪽 위 모서리는 별도의 속성이 없을 때 하위 요소들이 기본 표시되는 위치의 기준점이 됩니다. 중요합니다!
- static과 relative
초보자들은 static과 relative 속성 값을 혼동하거나 구분을 하지 못하는 경우가 더러 있기 때문에 따로 설명을 합니다.
둘은 유사하지만 분명히 다른 위치 속성이며, 둘은 꼭 구분해서 사용할 줄 알아야 합니다.
relative 속성은 표시 위치를 정하는 속성인 top, right, bottom, left, z-index 속성이 추가로 없으면 static과 같게 동작합니다. 단, 자식 요소의 포지션 속성에 미치는 영향이 다를 수 있으므로 relative 속성이 필요한 경우를 꼭 구분해서 사용해야 합니다. 자세한 예는 뒤에서 다시 다룹니다. 중요합니다!
반대로 HTML 문서의 기본 흐름을 따라 요소가 배치되도록 하려면 relative 속성보다는 static 속성을 사용해야 합니다. 굳이 문서의 흐름에 따라 표시되는 요소에 relative 속성을 추가로 표시할 필요가 없습니다. 이런 요소들은 포지션 속성을 따로 지정하지 않는 것이 올바른 사용 방법입니다.
- 상대 위치 : relative
HTML 문서의 흐름에 따라 요소가 배치됩니다. 여기까지는 static 속성과 같습니다.
relative 속성은 여기에 더해서 거리 속성(top, right, bottom, left)을 사용할 수 있으며, 요소의 기본 배치 테두리에서 상대적으로 얼마나 떨어져 있는지를 표시하게 됩니다.
그리고, relative 속성은 거리 속성(top, right, bottom, left) 값으로 요소의 위치를 옮겨서 표시해도 문서의 흐름과 다른 요소의 배치에 영향을 주지 않습니다. 문서의 흐름에 영향을 주지 않기 때문에 이동시키기 전 요소가 위치했던 영역은 static 속성처럼 그대로 자리를 차지하고 있게 됩니다.
- 절대 위치 : absolute
HTML 문서의 흐름에 따라 배치되지 않으며, top, right, bottom, left 값에 의해 정해진 고정 위치에 표시됩니다.
문서의 다른 요소 배치에 영향을 주지 않습니다. 그리고 별도의 순서(z-index) 표시 없이도 문서의 흐름에 따라 배치되는 요소 들의 위에 표시됩니다.
표시할 위치를 정하는 거리 속성(top, right, bottom, left)은 상위 요소의 테두리로부터 떨어진 거리는 표시하는 속성이기 때문에, 기준이 되는 요소의 테두리가 있어야 합니다.
기준이 되는 요소는 가장 가까운 relative 속성을 가진 상위 요소가 됩니다.
바로 위 부모 요소의 위치 속성이 relative 면 그 부모 요소의 테두리가 거리 속성(top, right, bottom, left) 값의 기준이 됩니다.
바로 위 부모 요소의 위치 속성이 relative 가 아니면 상위로 계속 올라가면서 relative 속성을 가진 요소를 찾게 됩니다.
relative 속성인 상위 요소가 없으면 현재 페이지의 문서 루트가 기준 테두리가 됩니다.
.wrap div:nth-child(2){
position: absolute;
top: 50px;
left: 50px;
}바로 위 부모 요소인 .wrap 클래스에 relative 포지션 속성을 지정하면 두 번재 요소는 .wrap 클래스를 가진 요소의 테두리를 기준으로 "두번째" 요소의 위치가 정해집니다.
.wrap {
position: relative;
}
.wrap 클래스를 가진 요소의 포지션 속성을 제거하고, 대신 그 위의 요소인 article 태그에 relative 포지션 속성을 부여하면 article 태그의 테두리를 기준으로 "두번째" 요소의 위치가 정해집니다.
article {
position: relative;
}
- 절대 위치 : fixed
웹 브라우저 뷰포트 화면의 특정 위치에 요소를 고정시킵니다.
웹 브라우저를 스크롤해도 항상 고정된 위치에 표시되는 특징이 있습니다.
도큐먼트 안에 배치된 다른 요소들 위에 떠 있는 상태로 고정되기 때문에 문서의 다른 요소 배치에 영향을 주지 않습니다.
고정된 표시 위치는 웹 브라우저 뷰포트의 상하좌우(top, bottom, left, right) 테두리에서 얼마나 떨어져 있는지를 수치로 표시합니다.
.wrap div:nth-child(2){
position: fixed;
top: 50px;
left: 50px;
}
- 스티키 위치 : sticky
"스티키 위치(Sticky Position)", 또는 "끈끈한 위치" 정도가 번역 의미가 되는데, 한글로 의미를 가져오자면 요소가 거리 속성으로 정한 위치 이상으로 벗어나지 않는 "고무줄에 매달린 위치 속성"이라고 이해하는 게 조금 더 빠릅니다. 실무에서는 그냥 "스티키 속성"이라고 사용합니다.
relative와 fixed 속성을 모두 가지고 있는 위치 속성입니다. 굳이 표현하자면 조건형 relative + fixed 정도가 됩니다.
relative 속성과 fixed 속성 2가지를 모두 가지고 있는 속성으로, 경우에 따라 relative 속성이 되기도, fixed 속성이 되기도 합니다.
용도에 딱 맞는 경우에 사용하면 굉장히 편리한 위치 속성입니다.
요소를 배치할 때 여러 속성을 조합하거나, 자바스크립트의 도움을 받지 않고도 동적인 요소 배치를 구현할 수 있습니다.
HTML 문서 안에서 흐름을 따라 배치된 요소가 웹 브라우저 뷰포트 영역 안에 있으면 원래 요소가 있는 상대 위치(relative)에 그대로 표시되고, 요소의 위치가 거리 속성으로 정한 위치 밖으로 벗어나면 고정된 위치에 표시(fixed)됩니다.
즉, 요소가 최대한 벗어날 수 있는 한계가 뷰포트 테두리에서 거리 속성으로 정한 거리만큼 이동한 위치가 됩니다.
하나의 요소가 2가지 위치 속성을 가지는 특성을 활용해 항상 웹 브라우저 뷰포트 안에 표시할 필요가 있는 단축메뉴, 모바일 메뉴, 상단 고정 헤더 영역과 같은 기능을 표시하는 데 사용합니다.
레이어(z-index) 속성으로 sticky, 또는 fixed 속성으로 표시하는 다른 요소들과의 표시 우선순위를 정할 수 있습니다.
스크롤하는 웹 브라우저의 방향에 따라 상하, 좌우 방향 모두에 거리 속성을 부여해 양 방향으로 부착되는 요소를 만들 수도 있습니다. 다음과 같이 요소에 스티키 속성과 거리 속성을 부여하면 양방향으로 요소가 부착되는 효과를 만들 수 있습니다.
.sticky {/* 스티키 요소 */
position: sticky;
top: 0;
bottom: 0;
height: 30px;
background: yellow;
text-align: center;
}
top, right, bottom, left 거리 속성의 이해
top, right, bottom, left 속성은 위치를 정한 포지션 속성을 가진 요소의 표시 위치를 정하기 위해서 사용하는 수치 속성입니다.
이 속성을 "거리 속성"이라고 따로 구분하는 것은 상위 요소, 또는 기준이 되는 요소의 테두리로부터 요소의 가운데 방향을 향해 떨어진 거리만큼을 수치로 표시하는 속성이기 때문입니다.
각 방향의 테두리로부터 떨어진 거리를 표시한다는 점과, 각 방향 테두리에서 떨어지는 방향은 부모 요소의 가운데 방향이라는 점에 주의해야 합니다. 즉, 부모 요소의 테두리에서부터 중심 방향으로 이동한 거리를 표시하는 속성이 top, left, bottom, left 속성입니다.
top, left, bottom, left 속성은 음수를 사용할 수 있습니다. 음수를 사용하면, 부모 요소의 중심 반대 방향, 그러니까 부모 요소의 테두리로부터 외곽 방향으로 떨어진 거리가 됩니다.
다음 그림을 보면 이해가 조금 더 쉽습니다.
바로 위 "부모요소"가 relative 속성을 가지고 있고, absolute 속성을 가진 카키색 요소인 자신의 위치를 top 거리 속성으로 위치를 정한다고 생각해보겠습니다.
top: 20px; 속성 값은 기준이 되는 relative 속성을 가진 "부모요소"의 위쪽 테두리에서 20px 밑으로 떨어진 거리에 요소가 위치한다는 의미가 됩니다.
앞의 예제에서 두 번째 블록이 relative 속성으로 문서 흐름에 따라 배치되어 있을 때, top: 20px; left: 20px; 거리 속성으로 "두번째" 요소를 이동시키면 원래 위치에서 다음처럼 오른쪽 아래로 20px씩 이동합니다. 위쪽과 왼쪽 테두리를 기준으로 오른쪽과 아래쪽 방향으로 거리를 20px 만큼씩 거리를 띄운다고 이해하면 됩니다.
이때 중요한 점이 있습니다.
relative 속성이 "두번째" 블록이 원래 위치했던 영역은 빈 영역으로 그대로 유지됩니다.
위치를 가진 속성 중 relative, sticky 속성이 가지는 특징으로 문서의 흐름에 따른 레이아웃이 그대로 유지되기 때문에 SEO 측면에서나 고정된 레이아웃을 필요로 하는 웹 페이지에서는 특히 relative 속성이 중요하게 사용될 수 있습니다.
거리 속성 값은 음수를 사용할 수도 있습니다. top: -20px;는 기준이 되는 상위 요소의 위쪽 테두리 위쪽으로 20px 이동한 위치에 표시됩니다. 앞에서와는 반대로 top: -20px; left: -20px; 로 음수 값으로 이동하면 다음처럼 이동하게 됩니다.
주의해야 할 점이 있습니다. relative 속성은 자기 자신의 원래 위치가 기준이 되기 때문에 문서 흐름에 따른 원래 위치일 때 자신의 테두리가 거리 속성의 기준이 됩니다.
"위치를 정한 속성"을 가진 요소를 거리 속성으로 이동시켰을 때 문서 흐름에 따라 배치된 다른 요소들과 겹치는 경우, 별도로 순위(z-index)를 정하지 않아도 위치를 정한 요소는 문서 흐름에 따라 배치되는 요소들의 위에 표시됩니다.
예제로 사용한 HTML과 CSS는 다음 링크를 클릭해서 다운로드할 수 있습니다.