* 겪고 있는 문제 상황을 최대한 자세하게 작성해주세요.
* 문제 해결을 위해 어떤 시도를 해보았는지 구체적으로 함께 알려주세요.
수업 끝나고 응용해서 연습해 보려고 하고 있었는데요,
카드 뒷면으로 색을 넣고 싶었는데, 가운데 정렬을 하면서 양쪽 margin을 auto로 잡았더니
양옆에 색을 넣을 수가 없습니다.
이럴 때는 div를 새로 잡아야 하는 것일까요?
margin을 잡을 때 몇 px정도 여유를 두고 정렬시키는 방법은 없을까요ㅠ
보고
계신 화면 전체를 캡처해 주시면, 튜터님들이 빠르게 상황을 이해할 수 있어요.
작성한 코드 및 에러 메세지
<!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>
<style>
@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
* {
font-family: 'Gowun Dodum', sans-serif;
}
.mytitle {
background-color: aqua;
color: azure;
height: 400px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
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: over;
}
.mytitle>button {
width: 250px;
height: 40px;
background-color: transparent;
border: 1px solid white;
color: white;
border-radius: 50px;
margin-top: 20px;
}
.mytitle>button:hover {
border: 2px solid white;
}
.mycomment {
color: gray;
}
.mycards {
width: 1400px;
margin: 20px auto 20px auto;
background-color: lightgray;
}
.mypost{
width: 500px;
margin:100px auto 100px auto;
padding:20px 20px 20px 20px;
box-shadow: 0px 0px 3px 0px gray;
}
.mybtn{
margin-top: 10px;
display: flex;
flex: row;
align-items: center;
justify-content: center;
}
.mybtn > button{
margin-right: 10px;
}
.별점{
margin-bottom: 18px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>내 생에 최고의 영화들</h1>
<button>영화 기록하기</button>
</div>
<div class="mypost">
<div>
<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="별점">
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
<option selected>별점을 선택해 주세요.</option>
<option value="1">⭐</option>
<option value="2">⭐⭐</option>
<option value="3">⭐⭐⭐</option>
<option value="4">⭐⭐⭐⭐</option>
<option value="5">⭐⭐⭐⭐⭐</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</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>
<div class="mycards">
<div class="row row-cols-1 row-cols-md-4 g-4">
<div class="col">
<div class="card h-100">
<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="mycomment">예쁜 마고로비가 다하는 영화.</p>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="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="http://ticketimage.interpark.com/Movie/still_image/V15/V1502663p_01.gif"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="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="http://t1.daumcdn.net/cfile/22766E4B5473D66B05"
class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">무드인디고</h5>
<p class="card-text">당신의 사랑은 어떤 색인가요?</p>
<p>⭐⭐⭐⭐</p>
<p class="mycomment">사랑스러운 색깔이 바래가는 것을 목격하는게 괴로운 영화.세월의 파도 조각</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
