커뮤니티
포인트
쿠폰
내 강의실
국비 신청 내역
증명서
계정
로그아웃
학습 질문
개발 일지
나의 활동
답변 완료
카드페이지 이어서 질문
undefined주차
남*지
댓글
1
・
추천
0
・
조회수
5
조회수
5
답변 완료
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
* {
font-family: 'Gowun Dodum', sans-serif;
}
<style>
.mytitle {
background-color: green;
width : 100%;
height : 250px;
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;
color:white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* display: flex;*/
/*flex-direction: column;*/
/*justify-content: center;*/
/*align-items: center;*/
/*네개 같이 다님 필수, 이것만 붙여서 만드는 것, center 같은 요소만 바꿈*/
}
.mytitle > button {
width : 200px;
height: 50px;
background-color: transparent;
color : white;
/*transparent : 투명한 색*/
border-radius : 50px;
border : 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border : 3px solid white;
}
.mycomment {
color:gray;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화</h1>
<button>영화 기록하기</button>
</div>
<div class="row row-cols-1 row-cols-md-3 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">Card title</h5>
<p class="card-text"> 여기 에는 내용이 들어 갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 코멘트 </p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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 short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">내용.</p>
</div>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">
* {
font-family: 'Gowun Dodum', sans-serif;
}
<style>
.mytitle {
background-color: green;
width : 100%;
height : 250px;
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;
color:white;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* display: flex;*/
/*flex-direction: column;*/
/*justify-content: center;*/
/*align-items: center;*/
/*네개 같이 다님 필수, 이것만 붙여서 만드는 것, center 같은 요소만 바꿈*/
}
.mytitle > button {
width : 200px;
height: 50px;
background-color: transparent;
color : white;
/*transparent : 투명한 색*/
border-radius : 50px;
border : 1px solid white;
margin-top: 10px;
}
.mytitle > button:hover {
border : 3px solid white;
}
.mycomment {
color:gray;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생애 최고의 영화</h1>
<button>영화 기록하기</button>
</div>
<div class="row row-cols-1 row-cols-md-3 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">Card title</h5>
<p class="card-text"> 여기 에는 내용이 들어 갑니다.</p>
<p>⭐⭐⭐</p>
<p class="mycomment"> 코멘트 </p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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 short card.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<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.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">내용.</p>
</div>
</div>
</div>
</div>
</body>
</html>
댓글 알림
