-
Notifications
You must be signed in to change notification settings - Fork 49
/
Copy pathindex.html
169 lines (153 loc) · 7.61 KB
/
index.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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>웹 스터디 ::: 이름을 쓰세요</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css"
integrity="sha512-10/jx2EXwxxWqCLX/hHth/vu2KY3jCF70dCQB8TSgNjbCVAC/8vai53GfMDrO2Emgwccf2pJqxct9ehpzG+MTw=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<h1>화면 설계 그리드</h1>
<div class="grid-layout">
<div class="gl-item" id="header">헤더 부분<br>
<div id="head_title">
<h1>웹화면 구현 수업의 웹스터디 페이지</h1>
<p>
안녕하세요! 목원대학교 컴퓨터공학과 이름쓰세요
<br /><br />
<!-- FIXME: 폰트어썸에서 3개~5개 정도를 넣어주세요 -->
<i class="fa-brands fa-tiktok fa-2xl" style="color: #f20202"></i>
<i class="fa-brands fa-facebook fa-beat fa-2xl" style="color: #74c0fc"></i>
<i class="fa-brands fa-facebook fa-2xl" style="color: #74c0fc"></i>
</p>
</div>
</div>
<div class="gl-item" id="sidebar">사이드바 부분</div>
<div class="gl-item" id="content">메인 콘텐츠 부분<br>
<h1>animation *** </h1>
<div id="box-ani">
<div id="start">시작</div>
<div id="pause">멈춤</div>
</div>
<h1>flex-container</h1>
<div class="flex-container">
<!-- FIXME: 지금 예제를 대체하는 콘텐츠로, 영화 또는 드라마 콘텐츠 4개 작성 -->
<div class="flex-item">
<dl>
<dt>영화소개 : 듄2</dt>
<dd>
<a target="_blank" href="https://namu.wiki/w/%EB%93%84:%20%ED%8C%8C%ED%8A%B8%202"><img
src="https://search.pstatic.net/common?quality=75&direct=true&src=https%3A%2F%2Fmovie-phinf.pstatic.net%2F20240207_151%2F1707288437263gBsdd_JPEG%2Fmovie_image.jpg"
alt="" /></a>
2024년 2월 28일에 개봉한 드니 빌뇌브 감독의 듄 시리즈 실사영화.
2021년 영화 〈듄〉의 속편이다.
</dd>
</dl>
</div>
<div class="flex-item">
<dl>
<dt>영화소개 : 냉정과 열정 사이</dt>
<dd>
<a target="_blank"
href="https://namu.wiki/w/%EB%83%89%EC%A0%95%EA%B3%BC%20%EC%97%B4%EC%A0%95%20%EC%82%AC%EC%9D%B4"><img
src="https://i.namu.wiki/i/nfVqC1FuFaC27Kf6J_wHxE858tdwwFyP_2wZo4qIIB1VxSnOF-PJ7NyHZz9uySo9bz3gc5lr4cJHAuWvT8QsLGh38N-b8ci42Ndh5hUgN7D_-abhZL8ZT35Jz3_dN2d8GAnVvx3RP3eeuSXfX3sxUw.webp"
alt="" /></a><br />
2001년에 타케노우치 유타카, 진혜림 주연의 영화로 제작되었다.
타다이마 오카에리 엔딩의 전형적인 영화.
</dd>
</dl>
</div>
<div class="flex-item">
<dl>
<dt>넷플릭스 소개: 삼체</dt>
<dd>
<a target="_blank"
href="https://namu.wiki/w/%EC%82%BC%EC%B2%B4%28%EB%AF%B8%EA%B5%AD%20%EB%93%9C%EB%9D%BC%EB%A7%88%29">
<img
src="https://i.namu.wiki/i/oX1oa1g4_3hjnOfbeiX1KlJ_pQfzE-BG1ydHvLl_PLAjq-UOOGbF4nL9j7Zq-Duua0zf_Thf__So00aDy_HqLz-9Tu-SKgMY9rj4yGk3rALLHD-VGx5IssQkwwu4v4G2ptTs6uvLoFdQwLGWQoEXGA.webp"
alt="" /></a>
“물리학은 존재하지 않는다”라는 유서를 남기고 자살한 동료 과학자
'양둥'의 죽음이 석연치 않았던 '왕먀오'는 ...!
</dd>
</dl>
</div>
</a>
<div class="flex-item" id="f4">
<dl>
<dt>영화소개 : 범죄도시4</dt>
<dd>
<a target="_blank" href="https://namu.wiki/w/%EB%B2%94%EC%A3%84%EB%8F%84%EC%8B%9C4"><img
src="https://i.namu.wiki/i/UV5cDIV4GTiR81tpwd8qsWzna_HaavSVxpgjwWoJgV9ydIbARV4-9_1KaBhQT8Esd20jCHUcgD8ZXm8pCJirRTIWeFbXs6xIGHFHDv6ywuWbDTk7X_afpPTjLXOltjfhNUDTSpaelAvhJsEU7wBSFA.webp"
alt="" /></a>
2024년 2월 28일에 개봉한 드니 빌뇌브 감독의 듄 시리즈 실사영화.
2021년 영화 〈듄〉의 속편이다.
</dd>
</dl>
</div>
</div>
<h1>grid-container</h1>
<div class="grid-container">
<!-- FIXME: 지금 예제를 대체하는 콘텐츠로, 영화 또는 드라마 콘텐츠 4개 작성 -->
<div class="grid-item">
<dl>
<dt>영화소개 : 듄2</dt>
<dd>
<a target="_blank" href="https://namu.wiki/w/%EB%93%84:%20%ED%8C%8C%ED%8A%B8%202"><img
src="https://search.pstatic.net/common?quality=75&direct=true&src=https%3A%2F%2Fmovie-phinf.pstatic.net%2F20240207_151%2F1707288437263gBsdd_JPEG%2Fmovie_image.jpg"
alt="" /></a>
2024년 2월 28일에 개봉한 드니 빌뇌브 감독의 듄 시리즈 실사영화.
2021년 영화 〈듄〉의 속편이다.
</dd>
</dl>
</div>
<div class="grid-item">
<dl>
<dt>영화소개 : 냉정과 열정 사이</dt>
<dd>
<a target="_blank"
href="https://namu.wiki/w/%EB%83%89%EC%A0%95%EA%B3%BC%20%EC%97%B4%EC%A0%95%20%EC%82%AC%EC%9D%B4"><img
src="https://i.namu.wiki/i/nfVqC1FuFaC27Kf6J_wHxE858tdwwFyP_2wZo4qIIB1VxSnOF-PJ7NyHZz9uySo9bz3gc5lr4cJHAuWvT8QsLGh38N-b8ci42Ndh5hUgN7D_-abhZL8ZT35Jz3_dN2d8GAnVvx3RP3eeuSXfX3sxUw.webp"
alt="" /></a><br />
2001년에 타케노우치 유타카, 진혜림 주연의 영화로 제작되었다.
타다이마 오카에리 엔딩의 전형적인 영화.
</dd>
</dl>
</div>
<div class="grid-item">
<dl>
<dt>넷플릭스 소개: 삼체</dt>
<dd>
<a target="_blank"
href="https://namu.wiki/w/%EC%82%BC%EC%B2%B4%28%EB%AF%B8%EA%B5%AD%20%EB%93%9C%EB%9D%BC%EB%A7%88%29">
<img
src="https://i.namu.wiki/i/oX1oa1g4_3hjnOfbeiX1KlJ_pQfzE-BG1ydHvLl_PLAjq-UOOGbF4nL9j7Zq-Duua0zf_Thf__So00aDy_HqLz-9Tu-SKgMY9rj4yGk3rALLHD-VGx5IssQkwwu4v4G2ptTs6uvLoFdQwLGWQoEXGA.webp"
alt="" /></a>
“물리학은 존재하지 않는다”라는 유서를 남기고 자살한 동료 과학자
'양둥'의 죽음이 석연치 않았던 '왕먀오'는 ...!
</dd>
</dl>
</div>
</a>
<div class="grid-item">
<dl>
<dt>영화소개 : 범죄도시4</dt>
<dd>
<a target="_blank" href="https://namu.wiki/w/%EB%B2%94%EC%A3%84%EB%8F%84%EC%8B%9C4"><img
src="https://i.namu.wiki/i/UV5cDIV4GTiR81tpwd8qsWzna_HaavSVxpgjwWoJgV9ydIbARV4-9_1KaBhQT8Esd20jCHUcgD8ZXm8pCJirRTIWeFbXs6xIGHFHDv6ywuWbDTk7X_afpPTjLXOltjfhNUDTSpaelAvhJsEU7wBSFA.webp"
alt="" /></a>
2024년 2월 28일에 개봉한 드니 빌뇌브 감독의 듄 시리즈 실사영화.
2021년 영화 〈듄〉의 속편이다.
</dd>
</dl>
</div>
</div>
</div>
<div class="gl-item" id="footer">풋터 부분</div>
</div>
<script src="./js/main.js"></script>
</body>
</html>