-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathproject3.html
More file actions
160 lines (145 loc) · 5.78 KB
/
project3.html
File metadata and controls
160 lines (145 loc) · 5.78 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<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>Samsung x Fast Campus Solution</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap"
rel="stylesheet"
/>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
crossorigin="anonymous"
/>
<link href="/HTML_PROJECT2/css/style3.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light sticky-top bg-light px-5">
<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>
<div class="d-md-flex flex-md-equal w-100">
<div class="bg-primary pt-3 px-3 text-center overflow-hidden">
<h1 class="display-7">
Bootstrap을 활용해 반응형 모바일 페이지 만들기
</h1>
</div>
<div class="bg-light pt-3 px-3 text-center overflow-hidden">
<p class="my-3">
다양한 태그와 라이브러리를 사용하여 자유롭게 표현해보세요
</p>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100">
<div class="bg-success pt-3 px-3 text-center overflow-hidden">
<h2 id="experience" class="bootstrap-post-title mb-1">🧳 경력</h2>
<p>OL을 활용하여 리스트를 표현해보세요</p>
<ol>
<li>첫번째</li>
<li>두번째</li>
<li>세번째</li>
</ol>
</div>
<div class="bg-light pt-3 px-3 text-center overflow-hidden">
<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>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100">
<div class="bg-success pt-3 px-3 text-center overflow-hidden">
<h2 id="hobby" class="bootstrap-post-title mb-1">🧗🏻♀️ 취미</h2>
<h2>헤딩 활용하기</h2>
<div>
div 요소는 플로우 콘텐츠를 위한 통용 컨테이너입니다. CSS로 꾸미기
전에는 콘텐츠나 레이아웃에 어떤 영향도 주지 않습니다.
</div>
</div>
<div class="bg-light pt-3 px-3 text-center overflow-hidden">
<h3>서브 헤딩</h3>
<p>
P 요소는 하나의 문단을 나타냅니다. 시각적인 매체에서, 문단은 보통
인접 블록과의 여백과 첫 줄의 들여쓰기로 구분하지만, HTML에서 문단은
이미지나 입력 폼 등 서로 관련있는 콘텐츠 무엇이나 될 수 있습니다.
</p>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100">
<div class="bg-success pt-3 px-3 text-center overflow-hidden">
<h2 id="etc" 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>
</div>
<div class="bg-light pt-3 px-3 text-center overflow-hidden">
<p>
이미 만들어진 간단한 부트스트랩 스타일을 사용하고 싶다면?
<a href="https://getbootstrap.com" target="_blank">
부스트스트랩 문서를 참고해보세요
</a>
</p>
</div>
</div>
<div class="d-md-flex flex-md-equal w-100">
<div class="bg-success pt-3 px-3 text-center overflow-hidden">
<h4>About</h4>
<p class="mb-0">
저에 대해 더 궁금하신가요? 자세히 알고 싶다면 아래의 소셜을
확인해주세요
</p>
</div>
<div class="bg-danger pt-3 px-3 text-center overflow-hidden">
<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>
<p>
<a href="#">Back to top</a>
</p>
</div>
</div>
</main>
</body>
</html>