Hello creators ๐
1-16_1์ฃผ์ฐจ ๋ & ์์ ์ค๋ช ๋ณธ๋ฌธ
[WEB & AI] ์ทจ์ค ๊ณต๋ถ ๊ธฐ๋ก/์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ_์น๊ฐ๋ฐ์ข
ํฉ๋ฐ
1-16_1์ฃผ์ฐจ ๋ & ์์ ์ค๋ช
๋ถ์๋งค๋_HA 2023. 10. 2. 08:59728x90
๋ฐ์ํ
์ด๋ฒ ํ์ฐจ ํ์ต ๋ชฉํ (goal)
- ์ดํด ํ๊ณ ์ ํ๋ ๊ฒ
- 'html, css, Javascript ๋ฌธ๋ฒ' ์ ๋ํ ์ดํด
- ๋ถํธ์คํธ๋ฉ ์ฐ๊ธฐ
- ๋ง๋ค๊ณ ์ ํ๋ ๊ฒ
- ํฌ๋ช
๋ก
- ํฌ๋ช
๋ก
์์
1๏ธโฃ ์ฌ์ ์ค๋น
homework.html
ํ์ผ ๋ง๋ค๊ธฐ๋ถํธ์คํธ๋ฉ ์์ ํ ํ๋ฆฟ
๋ฃ๊ธฐ๋ถํธ์คํธ๋ฉ ์์ ํ ํ๋ฆฟ ์ฝ๋๐
<!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>์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ | ๋ถํธ์คํธ๋ฉ ์ฐ์ตํ๊ธฐ</title>
</head>
<body>
<h1>์ด๊ฑธ๋ก ์์ํด๋ณด์ฃ !</h1>
</body>
</html>
2๏ธโฃ ์ด์ ์์ ๊ฒฐ๊ณผ๋ฌผ์์ ๊ฐ์ ธ์ค๊ธฐ
์คํ๋ฅดํํผ๋์
์์ ๊ฐ์ ธ์ค๊ธฐ
- ํ์ ์๋ ๊ธฐ๋ฅ๋ค ์ญ์
- ํต์ฌ์
- ์ธ์์ ์ฐ๋๊ฒ ์๋๋ผ
- ๊ฐ์ ธ์์, ๊ตฌ์กฐ ํ์ ํ๊ณ , ํ์ํ๊ฑฐ, ๋ฐ๊ฟ ๋ผ๋๊ฑฐ โญโญโญโญโญโญโญโญ
- ํ์น์ฝ ์ฌ์ง ํ๊ณ ์ถ์ผ๋๊น, ๊ทธ๊ฑธ๋ก ๋ฐ๊พธ๋๊ฑฐ โญโญโญโญโญ
๐ DJ ์์ ์์
โ ์ฌ์ง ๋ฐ๊พธ๊ธฐ
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("https://occ-0-778-38.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABaFmXjrqmeZ6Nz5cuXsJil5_g5oOHxj2r8ITHUWq_zzf8jnaWsCH8nA4lVWYqatpXfQnSX4h-_JT2aMFi5TTGRot-A8UZ8jqDR2A.jpg?r=6dd");
โ ๊ตฌ๊ธ ํฐํธ
- ์ฌ๊ธฐ์์ 'ํฐํธ' ๋ถ๋ถ ์ฐธ๊ณ !
[[1-7_ํฐํธ, ์ฃผ์, ํ์ผ๋ถ๋ฆฌ]]
โ ์ด์ ์คํ๋ฅดํํผ๋์ ํฌ์คํ BOX ์์
mypost class
๋ฅผ ๊ฐ์ ธ์์ ์์ ์ฒ์์ background color ๋ฅผ ๋ น์์ผ๋ก ํ๊ณ box ๋ฅผ ํ์ธํ์
์์ง ์ด์ง ๋นํฉ ์ค๋ฌ์ ๐๐๐
<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> <p> </p> <!-- ๋ฒํผ --> <div class="mybtn"> <button type="button" class="btn btn-dark"> ์์ ๋จ๊ธฐ๊ธฐ๐ </button> </div> </div>
<br>
2. style ํ๊ทธ ์์์ mypost ๋ฅผ css ์์
```css
.mypost {
/* ๋ชจ๋ฐ์ผ ์ต์ ํ ๊ณผ์ : ํ๋ฉด ๋ณํ์ ์ ๊นจ์ง๋ ํ๋ฉด ๋ง๋ค๊ธฐ
/* ์ปค์ง๋ฉด ์ต๋ 1200px ๊น์ง๋ง ์ปค์ง ์ ์์ด! */
max-width: 1200px;
/* ๊ทธ ์ด์ ์๋ 95% ๋ง ์ปค์ง ์ ์์ด.*/
width: 95%;
/* div ์์ญ ์ก์ ๋, ๋ฐฑ ๊ทธ๋ผ์ด๋ ์์ญ ์ก๊ณ ํ๋๊ฒ ์ข์ โญโญ */
/* background-color: green; */
width: 500px;
/* ์์ ์ด์ง ๋์ฐ๊ณ div ์์ญ ์ก๊ณ ์ถ์ -> 10px, 0px ๋ง๋ฆ */
margin: 20px auto 0px auto;
/* margin: auto */
/* ๋ฐ์ค shadow ๋ฃ๊ธฐ */
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
- ๊ฒฐ๊ณผ๋ฌผ
3๏ธโฃ card - quote
- ๋ถํธ์คํธ๋ฉ ์ปดํฌ๋ํธ 5.0 URL ๐
https://getbootstrap.com/docs/5.0/components/buttons/
Card - Quote ๋ค์ด๊ฐ์ > ์ด ๋ถ๋ถ ์ง์ฐ๋ฉด > ์ํ๋ ๋ชจ์์ด ๋์ฌ๊ฑฐ์ผ
์ ์ฒด ์ฝ๋ ์ค๋ํซ ๐
<div class="card"> <div class="card-header"> Quote </div> <div class="card-body"> <blockquote class="blockquote mb-0"> <p>A well-known quote, contained in a blockquote element.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote> </div> </div>
๐ DJ ์์ ์์
โ Card - quote ์์ ํ๊ธฐ
โ ๊ถ๊ธํ๊ฑฐ๋, class ์ด๋ฆ์ด card ๋ก ๋์ผํ๋ฐ ๊ด์ฐฎ์๊ฑด๊ฐโโโโโโโโโโ
<!-- ์นด๋ -->
<!-- ๊ถ๊ธํ๊ฑด, class ์ด๋ฆ์ด card ๋ ๋์ผํ๋ฐ ๊ด์ฐฎ๋? โโโ -->
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> Victory, Victory, Victory </p>
<footer class="blockquote-footer"> ์ฒซ ์ฐ์ค in <cite title="Source Title">darkest hour </cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> ์ฒ์น : (์ฌ์์์ด ์ชฝ์ผ๋ก ์์ผ๋ฉฐ) ์ ๋์ง, ์ ๋๋ก ์ ๋ผ. ๋๋ ์ ๋ ํฌ๊ธฐ ์ ํ ๊ฑฐ๋? ์ฌ์์์ด: ๋ค, ์ ๋ ์ ํด์.
</p>
<footer class="blockquote-footer"> ์งํ์ฒ in <cite title="Source Title"> darkest hour </cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> ์ฑ๊ณต๋ ์คํจ๋ ์์ํ์ง ์๋ค. ์ค์ํ ๊ฑด ๊ตด๋ณตํ์ง ์๋ ์ฉ๊ธฐ๋ค. </p>
<footer class="blockquote-footer"> ์์คํด ์ฒ์น in <cite title="Source Title"> darkest hour </cite></footer>
</blockquote>
</div>
</div>
๐น ๊ฒฐ๊ณผ๋ฌผ
- ์ฌ์ง
์ ์ฒด ์ฝ๋ ๐
<!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>์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ | ๋ถํธ์คํธ๋ฉ ์ฐ์ตํ๊ธฐ</title>
<!-- ํฐํธ : Yeon Sung -->
<link href="https://fonts.googleapis.com/css2?family=Hahmlet:wght@500&display=swap" rel="stylesheet">
<style>
/* Yeon Sung */
* {
font-family: 'Hahmlet', serif;
}
.mytitle {
/* div ๋ฐ์ค ์์ฒด ๋ฐฐ๊ฒฝ ์ */
/* background-color: green; */
/* div ๋ฐ์ค ์์ฒด ํฌ๊ธฐ ์กฐ์ */
width: 100%;
height: 250px;
/* ์ด๋ฏธ์ง ๋ฃ๊ธฐ */
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url("https://occ-0-778-38.1.nflxso.net/dnm/api/v6/6gmvu2hxdfnQ55LZZjyzYR4kzGk/AAAABaFmXjrqmeZ6Nz5cuXsJil5_g5oOHxj2r8ITHUWq_zzf8jnaWsCH8nA4lVWYqatpXfQnSX4h-_JT2aMFi5TTGRot-A8UZ8jqDR2A.jpg?r=6dd");
background-position: center;
background-size: cover;
/* ๊ธ์จ ํฐ์ */
color: white;
/* โญโญโญ div ์ ๋ด์ฉ๋ฌผ์ ๊ฐ์ด๋ฐ๋ก ์์ฝ๊ฒ ์ ๋ ฌํ๊ธฐ (4๊ฐ์ง set) */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mypost {
/* ๋ชจ๋ฐ์ผ ์ต์ ํ ๊ณผ์ : ํ๋ฉด ๋ณํ์ ์ ๊นจ์ง๋ ํ๋ฉด ๋ง๋ค๊ธฐ
/* ์ปค์ง๋ฉด ์ต๋ 1200px ๊น์ง๋ง ์ปค์ง ์ ์์ด! */
max-width: 1200px;
/* ๊ทธ ์ด์ ์๋ 95% ๋ง ์ปค์ง ์ ์์ด.*/
width: 95%;
/* div ์์ญ ์ก์ ๋, ๋ฐฑ ๊ทธ๋ผ์ด๋ ์์ญ ์ก๊ณ ํ๋๊ฒ ์ข์ โญโญ */
/* background-color: green; */
width: 500px;
/* ์์ ์ด์ง ๋์ฐ๊ณ div ์์ญ ์ก๊ณ ์ถ์ -> 10px, 0px ๋ง๋ฆ */
margin: 20px auto 0px auto;
/* margin: auto */
/* ๋ฐ์ค shadow ๋ฃ๊ธฐ */
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.card {
/* background-color: green; */
width: 500px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="mytitle">
<h1> ๋คํค์คํธ์์ ํฌ๋ช
๋ก โ </h1>
<!-- โญโญโญ click ํ๋ฉด -> hey() ํจ์ ์คํํ๊ฒ ํ๊ธฐ -->
<!-- <button onclick="hey()"> ์ํ ๊ธฐ๋กํ๊ธฐ โ๏ธ </button> -->
</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>
<p> </p>
<!-- ๋ฒํผ -->
<div class="mybtn">
<button type="button" class="btn btn-dark"> ์์ ๋จ๊ธฐ๊ธฐ๐ </button>
</div>
</div>
<!-- ์นด๋ -->
<!-- ๊ถ๊ธํ๊ฑด, class ์ด๋ฆ์ด card ๋ ๋์ผํ๋ฐ ๊ด์ฐฎ๋? โโโ -->
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> Victory, Victory, Victory </p>
<footer class="blockquote-footer"> ์ฒซ ์ฐ์ค in <cite title="Source Title">darkest hour </cite></footer>
</blockquote>
</div>
</div>
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> ์ฒ์น : (์ฌ์์์ด ์ชฝ์ผ๋ก ์์ผ๋ฉฐ) ์ ๋์ง, ์ ๋๋ก ์ ๋ผ. ๋๋ ์ ๋ ํฌ๊ธฐ ์ ํ ๊ฑฐ๋? ์ฌ์์์ด: ๋ค, ์ ๋ ์ ํด์.
</p>
<footer class="blockquote-footer"> ์งํ์ฒ in <cite title="Source Title"> darkest hour </cite>
</footer>
</blockquote>
</div>
</div>
<div class="card">
<!-- <div class="card-header">
Quote
</div> -->
<div class="card-body">
<blockquote class="blockquote mb-0">
<p> ์ฑ๊ณต๋ ์คํจ๋ ์์ํ์ง ์๋ค. ์ค์ํ ๊ฑด ๊ตด๋ณตํ์ง ์๋ ์ฉ๊ธฐ๋ค. </p>
<footer class="blockquote-footer"> ์์คํด ์ฒ์น in <cite title="Source Title"> darkest hour </cite></footer>
</blockquote>
</div>
</div>
</body>
</html>
๐ธ ํด์ค ์์ ๋ค์ผ๋ฉด์ ๋ฐฐ์ด ๊ฒ #์์ง๋ฎ์ค๋ค โญโญโญ
- ์ฌ์ง ์์ง์ด๊ฒ ํ๋ ค๋ฉด ์ด๋ ๊ฒ ํผ์ผํธ ๊ธฐ์ฌ
center 40%
- ํ
์คํธ๋ฅผ ๋จ๊ธธ ๋
๋์ด์ฐ๊ธฐ
ํ์ง ์๋ ์ชฝ์ผ๋ก
ex)๋๋ค์
์ฐ๊ณ ๋ฐ๋ก</label>
์ค๋ ์์ผ๋ก
- ๋ถ์ด์๋ ๋ฒํผ์ ๋์ธ ๋
๋๋pํ๊ทธ
๋ฅผ ์ผ๋๋ฐ, ์ด๊ฒ ์๋๋ผ,margin-top
์ ์ผ์์ด์ผ
card ๊ฐ ์ฌ๋ฌ๊ฐ๋๊น, ๊ฐ card ๋ฅผ ๊ฐ์ธ๋
cards class
๋ฅผ ํ๋ ๋ง๋ค์ด์ฃผ๋คmycards css ๊พธ๋ฏธ๋ ๋ถ๋ถ๋ ์กฐ๊ธ ๋ค๋ฆ
card ๋ค ๊ฐ๊ฒฉ ์ฃผ๋ ๊ฒ๋ ์กฐ๊ธ ๋ค๋ฅด๊ฒ ํ์
(๋ฐฐ์ธ ๋งํ ๋ถ๋ถ์ด ์์.)
โญ ์กฐ๊ธ ๋ถ์กฑํ ์ดํด๋ก ๋๋ ค ๋ง์ถ๊ฒ ์์. ๋ค์ ํด๋ณด๋ฉด ์ข์ ๊ฑฐ ๊ฐ์.
๐โโ๏ธ ๊ทธ๋๋ ์ํ๋ค๋ ์๋ฌธ์ด ์์.
728x90
๋ฐ์ํ
'[WEB & AI] ์ทจ์ค ๊ณต๋ถ ๊ธฐ๋ก > ์คํ๋ฅดํ์ฝ๋ฉํด๋ฝ_์น๊ฐ๋ฐ์ข ํฉ๋ฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
2-2_JQuery ์์ํ๊ธฐ (0) | 2023.10.02 |
---|---|
2-1_2์ฃผ์ฐจ ์ค๋ ๋ฐฐ์ธ ๊ฒ (0) | 2023.10.02 |
1-15_Javascript ์ฐ์ตํ๊ธฐ 1 (2) | 2023.10.02 |
1-14_Javascript ๊ธฐ์ด ๋ฌธ๋ฒ ๋ฐฐ์ฐ๊ธฐ(2) (0) | 2023.10.02 |
1-13_Javascript ๊ธฐ์ด ๋ฌธ๋ฒ ๋ฐฐ์ฐ๊ธฐ(1) (0) | 2023.09.28 |
Comments