margin, transition, absolute, relative position

margin, transition, absolute, relative position
/category/Front-end/htms%5Ccss

2022. 3. 4. 11:49

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

<!DOCTYPE html>
<html>
    <head>
        <title>han's main web page</title>
        <link href="./data/Style/default2.css" rel="stylesheet"></link>
        <style>
        </style>
    </head>
    <body>
        <div class="left">
            han's right, and bottom position
        </div>
 
        <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
        <div class="contents">
            han's workplace
        </div>
    <div class="frame">
        <div class="red">
            red
        </div>
       
        <div class="blue">
            blue
        </div>
 
        <div class="green">
            green
        </div>
    </div>
       
    </body>
</html>
 
Colored by Color Scripter

cs

아래는 위 코드에 대한 css 코드이다.

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

.contents
{
    text-align: center;
    width: 150px;
    height: 150px;
    border: 3px solid black;
    position: absolute;
    padding-top: 100px;
    
    /*
    absolute -> 브라우져 전체의 좌표를 사용 가능.
    relative -> contens div 안에서만 가능.
    */
    left: 30%;
    top: 50%;
    /*
    px값으로 안 주고 %값을 주는 것은, px로 주게 되면 고정위치가 됨.
    %로 줘야 우리의 화면 사이즈에 비례하여 사이즈를 옮기게 되어 유동적인 크기를 줌.
    각각 left, top으로 부터 50%지점에 즉 화면 정중앙으로부터의 기준임.
    그리하여 정중앙에 두려면 margin으로 조절해야함.
    */
    margin: -75px 0 0 -75px; /*상 우 하 좌 순서*/
    transition: 0.9s; /*0.9초의 속성을 주겠다 !*/
}
.left{
    border: 1px solid black;
    position: fixed;
    right: 150px;
    bottom: 100px;
}
/* top, left, right, bottom 각각 주는 px만큼 미는 속성*/
 
.contents:hover{ /*이 class에 hover 속성을 부여하겠다.*/
    color: white;
    background-color: #000;
}
 
.red{
    background-color: red;
    position: absolute; /* top = 0, left = 0으로 설정되어 좌측 상단 지점으로 다 모이게 됨.
                        직접 좌표값을 정해줘야 값을 이동시킬 수 있음.*/
    width: 100px;
    height: 100px;
    left: 0px; /*이렇게 기준점을 주고 다른 위치에 배치할 값들은 다시 좌표를 줌.*/
    top: 0px;
}
.blue{
    background-color: blue;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 100px;
    top: 100px;
}
.green{
    background-color: green;
    width: 100px;
    height: 100px;
    position: relative;
    left: 200px;
    top: 200px;
}
.frame{
    margin: 0 auto;
    width: 500px;
    height: 500px;
    border: 1px solid #000;
    position: relative;
}
/*
부모 class인 frame 안에 있는 red, blue, green에서
red만 absolute로 하여 부모 class에 구애받지 않고 전체 영역에 설정 가능.
blue, green은 relative로 frame 안에서만 한정되어 좌표값이 지정됨.
top, left 등의 설정에도 부모인 frame에 한정됨.
 
부모 class인 frame에 position relative를 주면, absloute인 red는
부모 frame의 자식 객체이므로, red는 frame을 자신의 전체 좌표로 지정됨.
 
부모 class에 relative를 설정하지 않으면 자식 class는 화면 전체를 자신의 좌표로 지정하지만,
설정하게되면, 부모 class의 크기를 기준으로 좌표를 가지게 됨.
*/
Colored by Color Scripter

cs