HTML/test19.html at main · ksj2001/HTML · GitHub

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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="kr">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <Style>
        /* 부모는 relative, 자식은 absolute로
        position 속성을 지정한다. */
        .parent{
            width: 700px;
            height: 500px;
            background-color: dodgerblue;
            position: relative;
            margin: 100px;
        }
        .child1{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            /* translate: 이동, - 값은 좌표값을 아래에서 위로, 오른 쪽에서 왼쪽으로 이동시킨다. */
            transform: translate(-50%,-50%);
        }
        .child2{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: 100%;
        }
        .child3{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100%;
            left: 100%;
        }
        .child4{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 100%;
            left: 0;
        }
        .child5{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 0;
            left: -14%;
        }
        .child6{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            /* top: 80%;
            left: -14%; */
            bottom: 0;
            right: 100%;
        }
        .child7{
            width: 100px;
            height: 100px;
            background-color: gold;
            position: absolute;
            bottom: 0;
            left: 100%;

        }
        .child8{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: -20%;
            left: 0;
        }
        .parent2{
            width: 500px;
            height: 500px;
            margin: 800px;
            border: 1px solid black;
            position: relative;
        }
        .parent2 div{
            width: 100px;
            height: 100px;
            position: absolute;
        }
        .child9{
            margin: 10px;
            background-color: lightblue;
            z-index: 3;
        }
        .child10{
            margin: 20px;
            background-color: yellowgreen;
            z-index: 2;
        }
        .child11{
            margin: 30px;
            background-color: gray;
            z-index: 1;
        }
    </Style>
</head>
<body>
    <div class="parent">
        <div class="child1"></div>
        <div class="child2"></div>
        <div class="child3"></div>
        <div class="child4"></div>
        <div class="child5"></div>
        <div class="child6"></div>
        <div class="child7"></div>
        <div class="child8"></div>
    </div>
    <div class="parent2">
        <div class="child9"></div>
        <div class="child10"></div>
        <div class="child11"></div>
    </div>
</body>
</html>