위치 속성

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

codingfarm

위치 속성 본문

web/CSS3

위치 속성

scarecrow1992 2020. 10. 3. 19:43

요소의 위치를 2가지 방법으로 설정할수있다.

$\bullet$ 절대 위치 좌표 : 요소의 $X$좌표와 $Y$좌표를 설정해 절대 위치를 지정한다.

$\bullet$ 상대 위치 좌표 : 요소를 입력한 순서를 통해 상대적으로 위치를 지정한다.

1. position

상대위치 좌표를 쓸때는 position속성에 static 또는 relative 키워드를 적용한다.

static키워드를 적용하면 태그가 "위에서 아래로"아 "왼쪽에서 오른쪽으로" 순서에 맞게 배치된다.

relative 키워드를 적용하면 static 키워드로 초기 위치가 지정된 상태에서 상하좌우로 이동할 수 있다.

반면 절대 위치 좌표를 사용할 때는 position 속성에 absolute 키워드 또는 fixed 키워드를 적용한다.

키워드	설명
static	태그가 위에서 아래로 순서대로 배치된다.
relative	초기 위치 상태에서 상하좌우로 위치를 이동한다.
absolute	절대 위치 좌표를 설정한다.
fixed	화면을 기준으로 절대 위치 좌표를 설정한다.

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

<!doctype html>
<html>
    <head>
        <title>CSS3 Property Basic</title>
        <style>
            .box{
                width: 100px; height: 100px;
                position: absolute;
            }
            .red{
                background-color: red;
                left: 10px; top: 10px;
            }
            .green{
                background-color: green;
                left: 50px; top: 50px;
            }
            .blue{
                background-color: blue;
                left: 90px; top: 90px;    
            }
        </style>
    </head>
 
    <body>
        <div class="box red"></div>        
        <div class="box green"></div>
        <div class="box blue"></div>
    </body>
</html>
Colored by Color Scripter

cs

z-index

html은 그 특성상 페이지의 뒤에 입력한 태그가 상위에 올라간다.

위의 그림에서도 제일 마지막에 작성된 blue가 맨위에 있는것을 볼 수 있다.

표시 순서를 조정하고 싶다면 z-index 속성에 숫자를 적용하여 숫자가 클수록 앞에 위치 시킬 수 있다.

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

<!doctype html>
<html>
    <head>
        <title>CSS3 Property Basic</title>
        <style>
            .box{
                width: 100px; height: 100px;
                position: absolute;
            }
            .red{
                background-color: red;
                left: 10px; top: 10px;
                z-index: 100;
            }
            .green{
                background-color: green;
                left: 50px; top: 50px;
                z-index: 200;
            }
            .blue{
                background-color: blue;
                left: 90px; top: 90px;
                z-index: 0;    
            }
        </style>
    </head>
 
    <body>
        <div class="box red"></div>        
        <div class="box green"></div>
        <div class="box blue"></div>
    </body>
</html>
Colored by Color Scripter

cs

위치 속성과 관련된 공식

기존의 코드에 아래처럼 h1태그를 추가한다.

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

<!doctype html>
<html>
    <head>
        <title>CSS3 Property Basic</title>
        <style>
            .box{
                width: 100px; height: 100px;
                position: absolute;
            }
            .red{
                background-color: red;
                left: 10px; top: 10px;
                z-index: 100;
            }
            .green{
                background-color: green;
                left: 50px; top: 50px;
                z-index: 200;
            }
            .blue{
                background-color: blue;
                left: 90px; top: 90px;
                z-index: 0;    
            }
        </style>
    </head>
 
    <body>
        <h1>lorem ipsum dolor amet</h1>
        <div>
            <div class="box red"></div>        
            <div class="box green"></div>
            <div class="box blue"></div>
        </div>
        <h1>lorem ipsum dolor amet</h1>
    </body>
</html>
Colored by Color Scripter

cs

2가지 문제점이 보인다.

1. h1태그 사이에 있는 div태그가 별도의 공간을 차지하지 않는다.

2. 색상이 적용된 상자가 자신의 부모div를 기준으로 위치를 잡지 않는다.

이 문제를 해결하기 위해서는 공식처럼 명심해야할 사안이 있다.

1. 자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용한다.
2. 자손의 position 속성에 absolute 키워드를 적용하면 부모의 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
35
36
37
38
39
40
41
42
43

<!doctype html>
<html>
    <head>
        <title>CSS3 Property Basic</title>
        <style>
            body>div{
                width:400px; height: 100px;
                border:3px solid black;
                position: relative;
                overflow : hidden;
            }
            .box{
                width: 100px; height: 100px;
                position: absolute;
            }
            .red{
                background-color: red;
                left: 10px; top: 10px;
                z-index: 100;
            }
            .green{
                background-color: green;
                left: 50px; top: 50px;
                z-index: 200;
            }
            .blue{
                background-color: blue;
                left: 90px; top: 90px;
                z-index: 0;    
            }
        </style>
    </head>
 
    <body>
        <h1>lorem ipsum dolor amet</h1>
        <div>
            <div class="box red"></div>        
            <div class="box green"></div>
            <div class="box blue"></div>
        </div>
        <h1>lorem ipsum dolor amet</h1>
    </body>
</html>
Colored by Color Scripter

cs