-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathharin_Week1_1.html
115 lines (115 loc) · 4.42 KB
/
harin_Week1_1.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
<!doctype html>
<html>
<head>
<meta charset="'utf-8">
<title>이하린을 소개하는 웹 페이지</title>
<style>
#list{
color:green;
}
#pic{
position: relative;
left: 570px;
bottom:250px;
border-left:1px solid black;
padding-left:10px;
}
#hobby{
position: absolute;
top: 300px;
}
h3{
font-size:40px;
width:500px;
margin:5px;
color: salmon;
border-bottom:1px solid black;
border-top: 2px dotted grey;
}
table{
margin-left:5px;
}
a{
text-decoration:none;
color:peru;
}
@media(max-width:800px){
img {
display:none;
}
h3{
font-size:40px;
margin:5px;
color: salmon;
text-align:center;
}
a{
text-decoration:none;
color:peru;
}
#list{
color:green;
text-align:center;
}
#pic{
position:static;
}
p{
text-align:center;
}
}
</style>
</head>
<body>
<input type="button" value="night" onclick="
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';">
<input type="button" value="day" onclick="
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';">
<div id="grid">
<h3 style="height:60px">인사</h3>
<p>안녕하세요.<br>저는 <u>부경대학교 컴퓨터인공지능공학부</u> 2학년 <strong>이하린입니다.</strong><br>
개발은 처음이지만 노력해서 실력을 쌓아가고 싶어요.<br>앞으로 잘 부탁드립니다.</p>
<div id="hobby">
<h3>취미</h3>
<p>저는 쉴 때 음악을 듣는 것을 좋아해요.<br>제가 좋아하는 음악 목록은 다음과 같습니다:</p>
<div id="list">
<table border="2px solid grey">
<tr>
<th>가수</th>
<th>제목</th>
</tr>
<tr>
<td>(여자)아이들</td>
<td>나는 아픈 건 딱 질색이니까</td>
</tr>
<tr>
<td>Lauv</td>
<td>Steal The Show</td>
</tr>
<tr>
<td>요네즈 켄시</td>
<td>Lemon</td>
</table>
</div>
<p><a href="https://www.youtube.com/">유튜브에 가면 이 노래들을 들을 수 있어요.</a></p>
<p>최근 새로운 취미로 수영을 시작했어요.<br>저번 달부터 배우고 있는데, 나날이 발전하는 것이 느껴져 무척 재미있습니다.</p>
</div>
<p>프론트엔드에서 어떤 것을 가장 좋아하시나요?</p>
<input type="radio" id="HTML" name="language" value="HTML" checked/>
<label for="HTML">HTML</label>
<input type="radio" id="CSS" name="language" value="CSS" checked/>
<label for="CSS">CSS</label>
<input type="radio" id="JS" name="language" value="JS" checked/>
<label for="JS">JS</label>
<div id="pic">
<h3><a href="C:\Users\chika\OneDrive\문서\PKNU\gdsc_frontend\2024_1_FE_beginner\Ch01\Harin_Lee\harin_Week1_2.html">최근의 고민</a></h3>
<img src="https://images.unsplash.com/photo-1511871893393-82e9c16b81e3?q=80&w=870&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D">
</div>
</div>
<label for="site-search">Search the site:</label>
<input type="search" id="site-search" name="q" onkeydown="alert('이것은 가짜 검색창입니다.')" />
<button>Search</button>
</body>
</html>