영화 기록 사이트를 만들어보는 시간을 가졌다. 로그인페이지보다 복잡한 내용은 많아졌지만 결과물 자체는 더 뿌듯하다 ㅎㅎㅎㅎ.
과정이 재미있고 신기해서 영화 2/맛집 1로 총 3개를 만들었다 ㅎㅎ;;;
(미.먼리스트는 자바스크립트 문법 연습용!!!!!!)
<!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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
color: aliceblue;
background-color: green;
height: 250px;
width: 100%;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
background-position: center;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.mytitle > button {
width: 200px;
height: 50px;
background-color: transparent;
color: aliceblue;
border-radius: 50px;
border: 5px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border: 2px solid white;
}
.comment {
color: gray;
}
.wrap {
max-width: 1200px;
width: 95%;
margin: 20px auto 0px auto;
}
.mypost {
max-width: 500px;
width: 95%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.코멘트 {
margin: auto;
}
.buttons {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border-color: gray;
margin-top: 10px;
}
.buttons > button {
margin-left: 10px;
}
</style>
<script>
let mise_list = [
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "중구",
PM10: 22,
PM25: 14,
O3: 0.018,
NO2: 0.015,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "종로구",
PM10: 24,
PM25: 18,
O3: 0.013,
NO2: 0.016,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "도심권",
MSRSTE_NM: "용산구",
PM10: 0,
PM25: 15,
O3: 0.012,
NO2: 0.027,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "은평구",
PM10: 36,
PM25: 14,
O3: 0.019,
NO2: 0.018,
CO: 0.5,
SO2: 0.005,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "서대문구",
PM10: 28,
PM25: 9,
O3: 0.018,
NO2: 0.015,
CO: 0.6,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서북권",
MSRSTE_NM: "마포구",
PM10: 26,
PM25: 8,
O3: 0.012,
NO2: 0.021,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "광진구",
PM10: 17,
PM25: 9,
O3: 0.018,
NO2: 0.016,
CO: 0.6,
SO2: 0.001,
IDEX_NM: "좋음",
IDEX_MVL: 31,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성동구",
PM10: 21,
PM25: 12,
O3: 0.018,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 33,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "중랑구",
PM10: 27,
PM25: 10,
O3: 0.015,
NO2: 0.019,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "동대문구",
PM10: 26,
PM25: 9,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 34,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "성북구",
PM10: 27,
PM25: 8,
O3: 0.022,
NO2: 0.014,
CO: 0.5,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "도봉구",
PM10: 25,
PM25: 12,
O3: 0.024,
NO2: 0.011,
CO: 0.3,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "강북구",
PM10: 30,
PM25: 15,
O3: 0.022,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동북권",
MSRSTE_NM: "노원구",
PM10: 21,
PM25: 14,
O3: 0.017,
NO2: 0.016,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 36,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "강서구",
PM10: 36,
PM25: 16,
O3: 0.021,
NO2: 0.013,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "구로구",
PM10: 23,
PM25: 10,
O3: 0.022,
NO2: 0.016,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "O3",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "영등포구",
PM10: 29,
PM25: 15,
O3: 0.01,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "동작구",
PM10: 29,
PM25: 15,
O3: 0.012,
NO2: 0.023,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "관악구",
PM10: 27,
PM25: 12,
O3: 0.012,
NO2: 0.022,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 37,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "금천구",
PM10: 25,
PM25: 15,
O3: 0.015,
NO2: 0.02,
CO: 0.4,
SO2: 0.004,
IDEX_NM: "좋음",
IDEX_MVL: 43,
ARPLT_MAIN: "PM25",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "서남권",
MSRSTE_NM: "양천구",
PM10: 0,
PM25: 14,
O3: 0.016,
NO2: 0.017,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "점검중",
IDEX_MVL: -99,
ARPLT_MAIN: "점검중",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강남구",
PM10: 31,
PM25: 16,
O3: 0.018,
NO2: 0.018,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "서초구",
PM10: 34,
PM25: 13,
O3: 0.024,
NO2: 0.019,
CO: 0.3,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 41,
ARPLT_MAIN: "PM10",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "송파구",
PM10: 25,
PM25: 6,
O3: 0.014,
NO2: 0.025,
CO: 0.4,
SO2: 0.003,
IDEX_NM: "좋음",
IDEX_MVL: 42,
ARPLT_MAIN: "NO2",
},
{
MSRDT: "201912052100",
MSRRGN_NM: "동남권",
MSRSTE_NM: "강동구",
PM10: 24,
PM25: 14,
O3: 0.016,
NO2: 0.02,
CO: 0.4,
SO2: 0.002,
IDEX_NM: "좋음",
IDEX_MVL: 39,
ARPLT_MAIN: "PM25",
},
];
for(let i=0; i<mise_list.length;i++){
if(mise_list[i]['IDEX_MVL']<40){
console.log(mise_list[i]['MSRSTE_NM'])
}
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="postbox">
<div class="mypost">
<div class="row row-cols-1 row-cols-md-1 g-4">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화 URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐⭐⭐⭐⭐</option>
<option value="2">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="3">⭐⭐</option>
<option value="3">⭐</option>
</select>
</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>
</div>
<div class="buttons">
<button type="button" class="btn btn-secondary">기록하기</button>
<button type="button" class="btn btn-light">닫기</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">여기에 제목이 들어갑니다.</h5>
<p class="card-text">여기에 내용이 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="comment">여기에 코멘트가 들어갑니다.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
color: white;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("data:image/jpeg;base64,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");
background-size: cover;
background-position: center;
width: 100%;
height: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mytitle > button {
width: 180px;
height: 50px;
background-color: transparent;
color: white;
border-radius: 10px;
margin-top: 10px;
border: 1px solid coral;
}
.mytitle > button:hover {
border: 3px solid coral;
}
.comment {
color: gray;
}
.wrap {
max-width: 1200px;
width:95%;
margin: 20px auto 0px auto;
}
.post {
box-shadow: 0px 0px 3px 0px coral;
max-width: 500px;
width:95%;
padding: 20px;
margin: 20px auto 0px auto;
border-radius: 10px;
}
.mybtn {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
.mybtn > button {
margin-left: 10px;
margin-top: 20px;
}
</style>
<script>
function hey(){
alert('정보를 입력해주세요');
}
</script>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화들</h1>
<button onclick="hey()">영화 기록하기</button>
</div>
<div class="post">
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">영화 URL</label>
</div>
<div class="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">별점</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>--선택하기--</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐</option>
<option value="3">⭐⭐⭐⭐⭐</option>
</select>
</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>
<div class="mybtn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">창닫기</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://upload.wikimedia.org/wikipedia/ko/2/23/%EC%BA%90%EC%B9%98_%EB%AF%B8_%EC%9D%B4%ED%94%84_%EC%9C%A0_%EC%BA%94_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">캐치 미 이프 유 캔</h5>
<p class="card-text">2003년 전미를 뒤집은 희대의 사기극!
이것은 실화다!
1965년, FBI를 발칵 뒤집는 사건이 발생한다. 파일럿을 가장해 모든 비행기의 무임승차는 기본, 50개 주 은행을 순회하며 무려 140만 달러를 횡령한 희대의 사기꾼이
나타난 것이다. FBI는 최고의 베테랑 요원 칼을 수사에 투입하고, 번번히 놈의 속임수에 당하던 칼은 드디어 오랜 추적 끝에 범인의 정체를 알아낸다. 그의 이름은 프랭크
아비그네일. 나이... 17살. 17살?! 천재 사기꾼과 FBI 요원의 유쾌한 머리싸움은 이제 시작이다.</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="comment">쟁쟁한 배우들의 연기와 긴장감 있는 서사!긴 러닝타임이 전혀 지루하지 않았다.</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">내용</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="comment">기록</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">내용</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="comment">기록</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">제목</h5>
<p class="card-text">내용</p>
<p>⭐⭐⭐⭐⭐</p>
<p class="comment">기록</p>
</div>
</div>
</div>
</div>
</div>
</body>
</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>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Gowun Dodum', sans-serif;
}
.all{
color: white;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url("https://k-life.co/files/attach/images/2019/12/09/af685b123e8ce0de2fdf78de01d5d139.png");
background-position: center;
background-size: cover;
display:flex;
align-items: center;
flex-direction: column;
justify-content: center;
width: 100%;
height: 250px;
}
.all>button{
color: white;
background-color: transparent;
border-color: white;
border-radius: 10px;
border: 1px solid white;
margin-top: 20px;
width: 120px;
height: 30px;
}
.all>button:hover{
border: 3px solid white;
}
.comment{
color: gray;
}
.wrap{
max-width:1200px;
width:95%;
margin: 20px auto 0px auto;
}
.posting{
border-radius: 10px;
box-shadow: 0px 0px 3px 0px gray;
max-width: 500px;
width:95%;
margin: 10px auto 0px auto;
padding: 10px;
}
.mybtn{
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 10px;
}
.mybtn>button{
margin-left: 10px;
}
</style>
<script>
function hey(){
alert ('정보를 입력해주세요');
}
</script>
</head>
<body>
<div class="all">
<h1>주관적 맛집리스트</h1>
<button onclick="hey()">맛집 기록하기</button>
</div>
<div class="posting">
<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 mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">음식 유형</label>
</div>
<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="input-group mb-3">
<label class="input-group-text" for="inputGroupSelect01">숟가락 점수</label>
<select class="form-select" id="inputGroupSelect01">
<option selected>-선택하기-</option>
<option value="1">🥄🥄🥄🥄🥄</option>
<option value="2">🥄🥄🥄🥄</option>
<option value="3">🥄🥄🥄</option>
<option value="3">🥄🥄</option>
<option value="3">🥄</option>
</select>
</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>
<div class="mybtn">
<button type="button" class="btn btn-outline-secondary">기록하기</button>
<button type="button" class="btn btn-outline-secondary">닫기</button>
</div>
</div>
<div class="wrap">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card">
<img src="https://search.pstatic.net/common/?autoRotate=true&quality=95&type=f180_180&src=https%3A%2F%2Fpup-review-phinf.pstatic.net%2FMjAyMjA1MTNfMjg0%2FMDAxNjUyNDE2MjQxNTkx.hb_moKBkME0PBgbVwWhibX_236xk2IevhTwaSOaC0nkg.KQ3Z7XR2knGj-hJdMhYX4vGPH8YEt2cDtK849aB8tE8g.JPEG%2Fupload_abbf5c28ac139002c539f0e69530f8d6.jpeg"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">인더비엣</h5>
<p>베트남 음식</p>
<p class="card-text">서울 서초구 사평대로52길 13</p>
<p>🥄🥄🥄</p>
<p class="comment">분짜, 쌀국수 무난. 다만 분짜는 먹기 불편하고 쌀국수는 국물이 좀 짬</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
<p>🥄🥄🥄🥄🥄</p>
<p class="comment">평가</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
<p>🥄🥄🥄🥄🥄</p>
<p class="comment">평가</p>
</div>
</div>
</div>
<div class="col">
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to
additional
content. This content is a little bit longer.</p>
<p>🥄🥄🥄🥄🥄</p>
<p class="comment">평가</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
'코딩' 카테고리의 다른 글
| 코딩교육 2주차(포스팅박스 열기 닫기 감추기 ) (0) | 2022.06.26 |
|---|---|
| 코딩교육 2주차(이름도 생소한... JQuery) (0) | 2022.06.26 |
| 코딩의 기초!!! (0) | 2022.06.23 |
| 코딩교육 1주차(팬명록 만들기) (0) | 2022.06.23 |
| 코딩 교육 1주차(로그인페이지 만들기) (0) | 2022.06.23 |
