티스토리 뷰

css로 positioning하는 법을 배워보자 - position:static


관련글

2013/03/11 - [Web개발/Web Standard] - 04 CSS로 Positioning하는 법을 배워보자 - float:left



positioning옵션은 크게 3가지이다.

static, relative, absolute.


css에 적용하는 방법은 아래와 같다.

position:static;

position:relative;

position:absolute;



static

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
26
27
28
29
30
31
32
33
34
35
#article01{
    position:static;
    width:100px;
    height:100px;
    background:#3E454C;
}
#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}
#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}
#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}
#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
cs


결과 화면.

이렇게 나온다.


아래 소스코드 '#article01'을 보자 위치를 top:20px; left:40px;라는 값을 주었다. 어떻게 변하는지 보자.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
#article01{
    position:static;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:20px;
     left:40px;
}
#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}
#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}
#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}
#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
 
cs


결과 화면.

이런.. 변화가 없다.

posistion:static 을 적용하면 시작 위치를 지정해 주어도 개체의 위치가 변하지 않는다.


relative

relative라는 단어는 '상대적인'이라는 뜻이 있다.

hello

아래 #article01을 보자. position:relative;를 적용했다. 

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
26
27
28
29
30
31
32
33
34
#article01{
    position:relative;
    width:100px;
    height:100px;
    background:#3E454C;
}
#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}
#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}
#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}
#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
cs

결과





일단은 static을 적용한 것과 똑같다.


그러면 객체의 시작 위치를 지정해보자.


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
26
27
28
29
30
31
32
33
34
35
36
37
#article01{
    position:relative;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:20px;
     left:40px;
}
#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}
#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}
#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}
#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
cs

결과 화면. static과 다르게 위치가 이동한 것을 볼 수 있다.


absolute

absolute는 적용하고자 하는 객체가 포함된 객체의 모서리 기준이다.

아래 소스코드의 #article01을 보자 position:absolute 를 적용했다

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
26
27
28
29
30
31
32
33
34
35
36
37
#article01{
    position:absolute;
    width:100px;
    height:100px;
    background:#3E454C;
    
    top:300px;
     left:500px;
}
#article02{
    position:static;
    width:100px;
    height:100px;
    background:#2185C5;
}
#article03{
    position:static;
    width:100px;
    height:100px;
    background:#7ECEFD;
}
#article04{
    position:static;
    width:100px;
    height:100px;
    background:#FFF6E5;
}
#article05{
    position:static;
    width:100px;
    height:100px;
    background:#FF7F66;
}
cs


section의 모서리 기준으로 300*500px 떨어진 위치에서 그려진다.



end.






공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
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 26 27 28 29 30
31
글 보관함