-
Notifications
You must be signed in to change notification settings - Fork 0
/
day1.7_homework.html
120 lines (113 loc) · 4.04 KB
/
day1.7_homework.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
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
<html lang="en">
<head>
<title>HTML 제목</title>
<style>
.prob-question {
background: #d9d9d9;
padding: 10px;
}
.prob-wrap {
height: 200px;
margin-bottom: 50px;
border: 1px solid;
}
div.prob-sample {
background: #ff8383;
}
</style>
<!-- <link href="./index.css" rel="stylesheet"> -->
</head>
<body>
<!------------------- problem 1. ------------------->
<div class="prob-question">
1. 아래 '박스' 텍스트가 담긴 div의 크기가 컨텐츠 사이즈만큼만 설정되도록 변경해보세요.<br>
span과 동일한 모습으로요.
</div>
<style>
#prob-1 {
position: relative;
}
</style>
<div class="prob-wrap">
<div id='prob-1' class='prob-sample'>박스</div>
</div>
<!-- -------------------------------------------- -->
<!------------------- problem 2. ------------------->
<div class="prob-question">
2. 아래 '박스1', '박스2' 텍스트가 담긴 div들은 나란히 위아래로 정렬되어 있네요.<br>
2.1. 좌우로 정렬되면서 너비/높이가 유지되도록 변경해 보세요.<br>
2.2. 좌우로 정렬되면서 가운데 있도록 하려면 prob-2 div에 어떤 스타일을 먹여야 할까요?
</div>
<style>
#prob-2 { height: unset; }
#prob-2-1 {
position: relative;
background: #8b8bff;
height: 100px;
width: 100px;
}
#prob-2-2 {
position: relative;
height: 100px;
width: 100px;
}
</style>
<div class="prob-wrap" id='prob-2'>
<div id='prob-2-1' class='prob-sample'>박스1</div>
<div id='prob-2-2' class='prob-sample'>박스2</div>
</div>
<!-- -------------------------------------------- -->
<!------------------- problem 3. ------------------->
<div class="prob-question">
아래 '박스2' div가 '박스1' div보다 위에 있네요.<br>
박스2에 가려진 박스1을 위로 올려 보세요
</div>
<style>
#prob-3-wrap {
position: absolute;
}
#prob-3-1 {
position: absolute;
background: #8b8bff;
height: 100px;
width: 100px;
}
#prob-3-2 {
position: absolute;
height: 100px;
width: 100px;
top: 20px;
left: 20px;
}
</style>
<div class="prob-wrap" id='prob-3'>
<div id='prob-3-wrap'>
<div id='prob-3-1' class='prob-sample'>박스1</div>
<div id='prob-3-2' class='prob-sample'>박스2</div>
</div>
</div>
<!-- -------------------------------------------- -->
<!------------------- problem 4. ------------------->
<div class="prob-question">
4.1. 아래 리스트 태그(ul, li)를 가로로 나열해보세요. 서로 겹치지 않도록.<br>
이번엔 직접 '인라인 스타일'을 삽입하는 방식으로 해볼게요.
</div>
<style>
#prob-4 {
position: relative;
height: 100px;
width: 100%;
background: yellow;
}
</style>
<div class="prob-wrap">
<ul style='position:relative;'>
<li style=''>아메리카노</li>
<li style=''>핫식스</li>
<li style=''>레드불</li>
<li style=''>에스프레소</li>
</ul>
</div>
<!-- -------------------------------------------- -->
</body>
</html>