과제02
링크 : pyjweb.dothome.co.kr/ex02
practice02_ul,li
pyjweb.dothome.co.kr
구글링을 통해 사진을 임의로 가져와봤습니다!
상단 링크 눌러보시면 완성본이 있습니다~
똑같진 않고 비슷하게 해 봤습니다!
logo부분은 만들기 힘드니까
그냥 붙였습니다...ㅋㅋㅋ
*수정*
일단 날짜 부분을 오늘 날짜가 자동으로
나오도록 script로 해봤는데,
꾸미는 것도 js 파일 이용해서 해야해서,
위에는 꾸미기 실패해서...
아래 사진처럼 새로 수정해봤습니다!
상단 링크 눌러서 들어가 보면,
날짜가 현재 날짜로 표시되는 것을 알 수가 있습니다.
소스코드 공유합니다~!
<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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>practice02_ul,li</title>
<link rel="stylesheet" href="style.css">
<script src="../../javascript/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".wrap>p").text(full_date);
})
var date_obj = new Date();
var full_date = 0;
var year = date_obj.getFullYear();
var month = date_obj.getMonth()+1;
var date = date_obj.getDate();
full_date = year+"년 "+month+"월 "+date+"일";
</script>
</head>
<body>
<header>
<h1><a href="#"><img src="img/logo.jpg" alt=""></a></h1>
</header>
<section>
<div class="wrap">
<h2>935</h2>
<b>회</b>
<p></p>
</div>
<div class="ellipse">
<div class="back">
<div class="rectangle"></div>
<div class="circle_left"></div>
<div class="circle_right"></div>
</div>
<ul>
<li>4</li>
<li>10</li>
<li>20</li>
<li>32</li>
<li>38</li>
<li>44</li>
<li>+</li>
<li>18</li>
</ul>
</div>
</section>
</body>
</html>
|
|
<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
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
|
@charset "utf-8";
/* 초기화 */
* {margin: 0; padding: 0;}
ul {list-style: none;}
a {text-decoration: none; color: inherit;}
body {font-family: Yu Gothic;}
img {vertical-align: top;}
/* header */
header {
width: 620px;
border-bottom: 3px solid rgb(54, 166, 231);
}
/* section */
section {
width: 500px;
height: 148px;
margin: 0;
padding: 45px 60px;
background-color: rgb(219, 241, 255);
position: relative;
}
h2 {
text-align: center;
color: rgb(35, 150, 216);
display: inline-block;
font-size: 2rem;
}
b {
display: inline-block;
font-size: 1.8rem;
color: gray;
margin-right: 15px;
}
p {
display: inline-block;
color: gray;
font-size: smaller;
}
.wrap {
margin: 0 auto;
text-align: center;
}
.ellipse {
width: 500px;
height: 80px;
position: absolute;
bottom: 45px;
}
.back {
position: relative;
}
.rectangle {
width: 420px;
height: 80px;
margin: 0 auto;
background-color: white;
}
.circle_left {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 0;
}
.circle_right {
width: 80px;
height: 80px;
border-radius: 50%;
background-color: white;
position: absolute;
bottom: 0;
right: 0;
}
ul {
position: absolute;
top: 10px;
left: 25px;
}
li {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: gold;
color: white;
font-weight: 900;
font-size: 1.6rem;
text-align: center;
padding: 5px;
display: inline-block;
margin: 0 2px;
}
li:nth-child(7) {
background: none;
font-weight: 900;
font-size: 2rem;
color: gray;
padding: 0;
}
li:nth-child(3) {background-color: rgb(98, 198, 255);}
li:nth-child(4) {background-color: darkgray;}
li:nth-child(5) {background-color: darkgray;}
li:nth-child(6) {background-color: rgb(175,216,59);}
li:nth-child(8) {background-color: rgb(98, 198, 255);}
|
|
'HTML, CSS 연습' 카테고리의 다른 글
| 미국립 약물중독 연구소 표 만들기 (0) | 2020.12.15 |
|---|