-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject2.html
More file actions
198 lines (182 loc) · 6.88 KB
/
project2.html
File metadata and controls
198 lines (182 loc) · 6.88 KB
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="내 소개 페이지" />
<meta property="og:title" content="내 소개 페이지 만들기" />
<meta
property="og:description"
content="내 소개 페이지를 간단히 만들어보세요"
/>
<meta property="og:image" content="/images/thumbnail.jpg" />
<title>내 소개 페이지</title>
<link rel="icon" href="images/thumbnail.jpg" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css?family=Black+Han+Sans:400"
rel="stylesheet"
/>
<link href="./css/style2.css" rel="stylesheet" />
</head>
<body>
<nav
class="navbar navbar-expand-lg navbar-light sticky-top bg-light px-5 mb-4"
>
<a class="navbar-brand" href="#">Hello</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#experience">경력</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#hobby">취미</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#etc">기타</a>
</li>
</ul>
</nav>
<main class="container">
<div class="p-4 p-md-5 mb-4 rounded text-bg-dark">
<div class="col-md-6 px-0">
<h1 class="display-7">
Bootstrap을 활용해 퍼스널 브랜딩 페이지 만들기
</h1>
<p class="lead my-3">
다양한 태그와 라이브러리를 사용하여 자유롭게 표현해보세요
</p>
</div>
</div>
<div class="row mb-2">
<div class="col-md-4">
<div
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-100 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">경력</h3>
<a href="#experience" class="stretched-link">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-100 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">취미</h3>
<a href="#hobby" class="stretched-link">자세히 보기</a>
</div>
</div>
</div>
<div class="col-md-4">
<div
class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-100 position-relative"
>
<div class="col p-4 d-flex flex-column position-static">
<h3 class="mb-0">기타</h3>
<a href="#etc" class="stretched-link">자세히 보기</a>
</div>
</div>
</div>
</div>
<div class="row g-5">
<div class="col-md-8">
<article id="experience" class="bootstrap-post">
<h2 class="bootstrap-post-title mb-1">🧳 경력</h2>
<h3>리스트 사용하기</h3>
<p>UL을 활용하여 리스트를 표현해보세요</p>
<ul>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ul>
<p>OL을 활용하여 리스트를 표현해보세요</p>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
<p>DL을 활용하여 리스트를 표현해보세요</p>
<dl>
<dt>HyperText Markup Language (HTML)</dt>
<dd>HTML이란?</dd>
<dt>Cascading Style Sheets (CSS)</dt>
<dd>CSS란?</dd>
<dt>JavaScript (JS)</dt>
<dd>JS란?</dd>
</dl>
</article>
<article id="hobby" class="bootstrap-post">
<h2 class="bootstrap-post-title mb-1">🧗🏻♀️ 취미</h2>
<h2>헤딩 활용하기</h2>
<div>
div 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기
전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
</div>
<h3>서브 헤딩</h3>
<p>
P 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통
인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서
문단은 이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수
있습니다.
</p>
</article>
<article id="etc" class="bootstrap-post">
<h2 class="bootstrap-post-title mb-1">😀 기타</h2>
<h3>아직 더 표현하고 싶은게 있으신가요?</h3>
<p>아직도<mark>다양한 태그</mark>들이 남았답니다.</p>
<p>
<a
href="https://developer.mozilla.org/ko/docs/Web/HTML/Element"
target="_blank"
>여기에서</a
>
더 다양한 태그들을 확인해보시고 간단하게 사용해보세요
</p>
<p>
이미 만들어진 간단한 부트스트랩 스타일을 사용하고 싶다면?
<a href="https://getbootstrap.com" target="_blank">
부스트스트랩 문서를 참고해보세요
</a>
</p>
</article>
</div>
<div class="col-md-4">
<div class="position-sticky" style="top: 2rem">
<div class="p-4 mb-3 bg-light rounded">
<h4>About</h4>
<p class="mb-0">
저에 대해 더 궁금하신가요? 자세히 알고 싶다면 아래의 소셜을
확인해주세요
</p>
</div>
<div class="p-4">
<h4>Social</h4>
<ol class="list-unstyled">
<li><a href="#">페이스북</a></li>
<li><a href="#">인스타그램</a></li>
<li><a href="mailto:[email protected]">메일 보내기</a></li>
<li><a href="tel:+123456789">전화 걸기</a></li>
</ol>
</div>
</div>
</div>
</div>
</main>
<footer class="bootstrap-footer">
<p>
template built for
<a href="https://getbootstrap.com/">Bootstrap</a>
</p>
<p>
<a href="#">Back to top</a>
</p>
</footer>
</body>
</html>