💻 Programming/CSS

[CSS] 포지션(position) 속성 강좌

CSS position 속성 정복하기

안녕하세요, 오늘은 자꾸 헷갈리게 만드는 포지션 속성에 대해서 포스팅을 하려합니다.

프론트 개발자가 아니다보니 종종 css 를 사용하게 될때마다 제일 헷갈리는게 바로 이 포지션 속성입니다.

포지션 속성은 화면상에서 어떤 엘리먼트(요소)의 위치를 어디다가 줄지를 결정할 수 있도록 해주는 속성입니다.

즉, 포지셔닝을 할 방법을 지정해주는 속성입니다.

화면을 꾸밀 때 html파일에 태그를 써주는데 이때 적힌 순서대로 위에서 아래로 그냥 보여줄 지, 아니면 상위 엘리먼트와 겹쳐서 보여줄 지, 또는 아예 동떨어져서 저~~~~~아래쪽에 위치시킬지도 결정을 할 수 있도록 해줍니다.

직접적으로 위치값을 지정해주는 속성은 아니지만 이 속성값에 따라 위치값이 적용이 될지 안될지가 결정되기 때문에 아주 중요한 속성이라고 할 수 있습니다.

자, 그럼 이 포지션 속성의 속성값에 어떤 것들이 있는지 먼저 살펴볼까요?

포지션 속성의 속성값은 다음 네 가지가 있습니다.

static
relative
fixed
absolute

이런 속성을 갖는 엘리먼트들은 부수적으로 top, bottom, left, 그리고 right 속성을 갖게 됩니다.

물론 부수적인 값들을 주지 않을 수도 있습니다.

어쨌든 이런 부수적인 위치값들은 position 속성이 없으면 아무런 영향도 미치지 않습니다.

또한 포지션 값에 따라 다르게 동작하기도 합니다.

그럼 제일 첫번째 속성부터 한번 살펴보도록 하겠습니다.

1. static

static 속성은 궂이 우리가 입력해주지 않아도 기본적으로 적용이 되어있는 속성입니다.

예를 들어, 아래 처럼 div 태그에 position 속성을 주지 않았다고 해보죠.

<div>이건 static 포지션 속성이 적용된겁니다.</div>

아무런 값도 주지 않았지만 저 div 태그에는 position:static 이라는 속성이 기본적으로 주어집니다. 즉,

<div style="position:static;">이건 static 포지션 속성이 적용된겁니다.</div>

와 동일한 태그가 되는 것이죠.

static 속성은 엘리먼트를 위에서부터 아래쪽으로 순서대로 배열시켜주는 속성입니다.

네 가지 속성 중에서 유일하게 top, right, bottom, left 속성의 값을 무시하는 속성입니다.

2. relative

position: relative; 속성을 갖는 엘리먼트들은 원래 기본적인 포지션에서 상대적인 포지션을 가질 수 있도록 해줍니다.

위에서 얘기했던 부수적인 옵션들(top, right, bottom, 그리고 left)을 이용해서 원래의 위치에서 상대적인 위치를 지정해줄 수 있습니다.

여기서 말하는 "원래의 위치"라는 것은 position속성에 아무런 값을 주지 않았을 때, 즉, static 일때의 위치를 말합니다.

또한, 다른 컨텐트가 이 엘리먼트에 의해 생긴 빈 공간에 위치할 수는 없습니다.

빈공간이란 원래 위치해야할 곳을 의미합니다.

relative 속성과 static 속성의 차이는

static 속성의 경우 top, right, bottom, left 속성으로 위치를 변경할 수 없지만,

relative는 그것이 가능하다라는 점입니다.

예제를 통해서 static과 relative의 차이를 한번 볼 까요??

html파일을 하나 만들어서 아래 코드를 작성해주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
<head>
<style>
div.static {position: static;border: 3px solid #00f;}
div.relative {position: relative;border: 3px solid #f00;}
</style>
</head>
<body>
 
<div class="static">
This div element has position: static;
</div>
<div class="relative">
This div element has position: relative;
</div>
<div class="static">
This div element has position: static;
</div>
<div class="relative">
This div element has position: relative;
</div>
 
</body>
</html>
Colored by Color Scripter

cs

위 페이지를 열어보면 아래처럼 화면에 출력이 됩니다.

자, 코드를 보면 static 클래스와 relative 클래스 모두 동일한 속성을 갖고있는 것을 알 수 있죠. top, right, bottom, left의 값은 둘 다 없습니다. 이 경우 relative와 static은 아무런 차이가 없습니다. 그저, 태그 순서대로 화면에 출력되죠.

이제 static 클래스의 속성에 left:15px 을 한번 줘볼까요?

1
2
3
4

<style>
div.static {position: static;border: 3px solid #00f;left: 15px;}
div.relative {position: relative;border: 3px solid #f00;}
</style>
Colored by Color Scripter

cs

결과가 어떻게 나올까요?

아무런 차이가 없을 겁니다. static은 top, right, bottom, left 속성값을 무시하기 때문이죠.

그럼 이번에는 relative에 left:15px; 속성을 줘 봅시다.

1
2
3
4

<style>
div.static {position: static;border: 3px solid #00f;}
div.relative {position: relative;border: 3px solid #f00;left: 15px;}
 
</style>
Colored by Color Scripter

cs

이번에는 아래 그림처럼 relative 클래스에 해당하는 div 엘리먼트가 움직인 것을 확인할 수 있습니다.

이제 아래처럼 relative클래스에 top:15px; 속성을 추가해 보겠습니다.

1
2
3
4

<style>
div.static {position: static;border: 3px solid #00f;}
div.relative {position: relative;border: 3px solid #f00;left: 15px;top: 15px;}
 
</style>
Colored by Color Scripter

cs

그럼 어떻게 나올지 상상이 가시나요?

결과는 아래처럼 나옵니다.

relative 클래스에 속한 div 엘리먼트들이 아래쪽으로 15px만큼 내려온 것을 확인할 수 있습니다.

이제 top속성의 값을 100px로 세팅해보세요. relative 클래스의 div 엘리먼트들이 아래쪽으로 한참 내려가는 것을 확인할 수 있습니다. 여기서 중요한 점은, relative 클래스의 엘리먼트들이 아래로 내려갔다고 해서 static 클래스의 엘리먼트들이 위쪽으로 이동하거나 하지는 않는 다는 것입니다.

3. fixed

fixed 속성은 화면에 보이는 위치가 기준이라고 생각하시면 됩니다.

한번 위치가 결정되면 화면에서 스크롤이 생긴다해도 사라지지 않고 처음 화면에 출력되었던 그자리에 고정적으로 위치합니다.

그래서 속성 이름이 fixed 인겁니다.

이 속성의 경우 relative처럼 top, right, bottom, left 속성으로 위치값을 지정해줄 수 있지만,

relative 속성과는 달리 원래 있어야 할 위치, 즉, static일 경우에 위치할 곳에 빈공간을 만들지 않습니다.

여기서 빈공간을 만든다는 것은 다른 엘리먼트가 그 자리에 위치할 수 없도록 한다는 말과 같습니다.

이 속성은 말 그대로 화면을 기준으로 어찌보면 절대적인 위치를 설정하는 것이므로 아마 가장 쉽게 이해할 수 있는 속성이라 생각합니다. 따라서 예제는 생략합니다.

4. absolute

이 속성은 가장 가까운 positioned 조상 엘리먼트에 상대적인 위치를 설정할 수 있도록 해줍니다.

fixed 속성이 화면에서 상대적인 위치를 결정할 수 있도록 해주는 속성이라면,

absolute는 positioned 조상 엘리먼트에서 상대적인 위치를 결정한다는 점에서 차이가 있습니다.

만약, 가장 가까운 positioned 조상 엘리먼트 가 없다면 body를 기준으로 하며 위치값에 따라 스크롤이 생기기도 합니다.

여기서, positioned 엘리먼트라는 것은 position 속성 값이 static인 것을 제외하고 position 속성을 갖고있는 엘리먼트를 의미합니다.

이 속성은 쇼핑몰 같은 곳에서 사진 위에 왼쪽, 오른쪽 화살표를 오버랩 시키고 해당 화살표를 클릭할 때마다 사진을 바꿔주는 기능을 추가할 때 많이 사용하는 것 같습니다.

그게 어떻게 가능하냐구요? 이제부터 저와 함께 살펴보시죠.

우선 html 페이지를 하나 만들고 아래처럼 소스를 적어주세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {width: 360px;height: 200px;border: 3px solid #00f;position: relative;}
div.absolute {width: 200px;height: 100px;border: 3px solid #f00;position: absolute;}
</style>
</head>
<body>
 
<div class="relative">position: relative;
  <div class="absolute">position: absolute;</div>
</div>
 
</body>
</html>
Colored by Color Scripter

cs

위 코드를 보면, relative 클래스의 div 엘리먼트 안에 absolute 클래스의 div 엘리먼트가 존재하고 있습니다.

absolute 포지셔닝은 상위에 positioned 엘리먼트가 필요하다는 것을 기억해주세요.

여기서 absolute 클래스 div 엘리먼트(12라인)의 positioned 조상 엘리먼트는 relative 클래스 div 엘리먼트(11라인)가 됩니다.

위 코드를 화면에 출력해보면 다음과 같습니다.

absolute 박스가 relative 박스 안에 있는 모양이죠.

이제 absolute에 right:0; 속성을 추가해보도록 하겠습니다.

1
2
3
4

<style>
div.relative {width: 360px;height: 200px;border: 3px solid #00f;position: relative;}
 
div.absolute {width: 200px;height: 100px;border: 3px solid #f00;position: absolute;right:0;}
</style>
Colored by Color Scripter

cs

그리고 화면을 새로고침 해보면 ???

absolute 박스가 오른쪽으로 붙은 것을 확인할 수 있습니다.

이제 relative 클래스에 left:150px; 속성을 추가해 보죠.

1
2
3
4

<style>
div.relative {width:360px;height:200px;border:3px solid #00f;position:relative;left:150px;}
 
div.absolute {width:200px;height:100px;border:3px solid #f00;position:absolute;right:0;}
</style>
Colored by Color Scripter

cs

어떤 모양이 나올까요? absolute 박스는 relative 박스 안에 있는데 relative 박스를 우측으로 움직였습니다.

relative 박스의 좌측에 150px만큼 공간을 추가했고, 그 안에있는 absolute 박스는 relative 박스 오른쪽에 꼭 붙어있는 것을 확인할 수 있습니다.

즉, absolute 박스는 relative 박스에 상대적인 위치에 고정된다는 것을 알 수 있죠.

이 속성을 응용하면 relative 박스에 이미지가 로딩 되도록 하고, absolute 박스에 화살표 이미지가 로딩되도록 해서 두 개의 이미지를 오버래핑 시킬 수도 있습니다.

이건 직접 한번 해보세요 ~~

자, 어떤가요? 이제 CSS를 이용한 포지셔닝을 마음대로 할 수 있을 것 같나요?

그렇다면 다행이네요~ ^-^ 제가 설명을 잘 해드린 것이니까요 ㅎㅎㅎ

이만 오늘의 포스팅을 마치겠습니다.

궁금한 점이 있으시면 댓글남겨주세요 아는 한 열심히 답변드리겠습니다 ^-^

저작자표시 비영리 변경금지

'💻 Programming > CSS' 카테고리의 다른 글

[CSS] 27. Layouts ( 레이아웃 ) (0)	2016.06.12
[CSS] 26. Filters - Texts and Image Effects ( 텍스트, 이미지 효과 ) (0)	2016.06.12
[CSS] 25. @ Rules ( @ 규칙들 ) (0)	2016.06.12
[CSS] 24. Pseudo Elements ( 슈도 엘리먼트 ) (0)	2016.06.12
[CSS] 23. Pseudo Classes ( 슈도 클래스 ) (0)	2016.06.12

💻 Programming/CSS

[CSS] 포지션(position) 속성 강좌

CSS position 속성 정복하기

1. static

2. relative

3. fixed

'💻 Programming > CSS' 카테고리의 다른 글

Category

Recent Posts

Recent Comments

티스토리툴바