๋ฐ์ํ
๊ฐ์๋ฅผ ๋ฐ๋ผ ์ค์ตํ๋ฉด์ ๋ง๋ค์ด๋ณธ ์นํ๋ฉด์ด๋ค. ์ฒ์์ผ๋ก ์ ๋๋ก๋ HTML์ ๋ค๋ค๋ณด์๋๋ฐ ์ฑ๋ณด๋ค ๋ ์ฆ๊ฐ์ ์ผ๋ก ๋ณํํ๋๊ฒ ์ ๋ณด์ฌ์ ๋๋ฌด ์ฌ๋ฏธ์์๋ค.
์์ฆ IVE์ ๋น ์ ธ์ IVE ํฌ๋ช ๋ก์ ๋ง๋ค์ด๋ณด์๋ค. ์์ง ๋ฒํผ์ ๋๋ฌ ํ๋ฉด์ด ๋์ด๊ฐ๋ ๊ฒ๊น์ง๋ ์๋์ง๋ง ๋นจ๋ฆฌ ๊ณต๋ถํด์ ํ๋์ ์๋ฒฝํ ๋๋ง์ ์น์ฌ์ดํธ๋ฅผ ๋ง๋ค๊ณ ์ถ๋ค.
์ ํ๋ฉด์ ์ฝ๋์ด๋ค.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
<title>IVE ํฌ๋ช
๋ก</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Noto Serif KR', serif;
}
.mytitle{
height: 300px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://img.wkorea.com/w/2021/12/style_61aad8bbd90fc.jpg");
background-position: center 10%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
.mypost > button {
margin-top: 10px;
}
.mycards {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>IVE ํฌ๋ช
๋ก</h1>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">๋๋ค์</label>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2"
style="height: 100px"></textarea>
<label for="floatingTextarea2">์์๋๊ธ</label>
</div>
<button type="button" class="btn btn-dark">์์ ๋จ๊ธฐ๊ธฐ</button>
</div>
<div class="mycards">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>์ด๋ฒ ์จ๋ฒ ๋
ธ๋ ๋๋ฌด ์ข์์!</p>
<footer class="blockquote-footer">๋คํ</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>๋ค๋ค ๋๋ฌด ์๋ป์!</p>
<footer class="blockquote-footer">DahyeKim</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>๋งค๋ ฅ์์ด์:)</p>
<footer class="blockquote-footer">๋คํค</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>๋ฐ์ํ
'๐ ๊ธฐํ > ์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ_FE' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ | ์น์คํฌ๋ํ(ํฌ๋กค๋ง) | DB | mongoDB (0) | 2021.12.26 |
|---|---|
| ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ | jQuery | Ajax (0) | 2021.12.23 |
| ์น๊ฐ๋ฐ ์ข ํฉ๋ฐ | ๊ฐ๋ฐ ๊ธฐ์ด | ํ๊ทธ (0) | 2021.12.21 |
| [์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ๋ฅดํ์ฆ 1๊ธฐ] 2์ฃผ์ฐจ ๋ฏธ์ (0) | 2021.11.28 |
| [์คํ๋ฅดํ ์ฝ๋ฉํด๋ฝ ๋ฅดํ์ฆ 1๊ธฐ] 1์ฃผ์ฐจ ๋ฏธ์ (2) | 2021.11.19 |
