코드 응용 관련 질문 드립니다. | 스파르타 커뮤니티

커뮤니티

포인트

쿠폰

내 강의실

국비 신청 내역

증명서

계정

로그아웃

학습 질문

개발 일지

나의 활동

답변 완료

코드 응용 관련 질문 드립니다.

undefined주차

이*경

・

추천

・

조회수

답변 완료

안녕하세요!

강의 계속 청강하다보니 다시 질문 드립니다.

웹개발 1주차 10강을 들으며 제가 직접 (따라) 만들어 본 코드인데요.

 <!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">
</head>
<style>
    * {
font-family: 'Gowun Dodum', sans-serif;
}
    .mytitle {
        background-color: green;

        width: 100%;
        height: 250px;

        color: white;

        background-image: 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: white;
        border-radius: 50px;

        border: 1px solid white;

        margin-top: 20px;
    }
    .mytitle > button:hover {
        border: 2px solid white;
    }
    .card-group {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        margin: 20px 100px 20px 100px;
    }
</style>

<body>
<div class="mytitle">
    <h1>내 생에 최고의 영화들</h1>
    <button>영화 기록하기</button>
</div>
<div class="card-group">
  <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 class="card-text"><small class="text-muted">⭐⭐⭐</small></p>
    </div>
  </div>
  <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 class="card-text"><small class="text-muted">⭐⭐⭐</small></p>
    </div>
  </div>
  <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 class="card-text"><small class="text-muted">⭐⭐⭐</small></p>
    </div>
  </div>
    <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 class="card-text"><small class="text-muted">⭐⭐⭐</small></p>
    </div>
  </div>
</div>

</body>

</html>

이렇게 해서 디스플레이 실현을 하면 부트스트랩에서 제공하는 카드만 제외하고, 10강에서 만들어보기 예시와 동일한 형태를 띠게 되는데 제가 궁금한 것은 위의 코드의 경우 제가 1주차 10강에서 요구하는 카드선택을 부트스트랩에서 잘못 선택했기 때문에 카드의 모양이 다른 것인데, 제가 이렇게까지 만들었다고 가정할 때, 새로운 코드를 추가하여 4개의 붙어있는 카드 사이사이를 뗄 수 있는 방법이 있을지 혹시 궁금합니다.

display:flex를 구글링해보니 space-between이라는 것을 알게 되었는데, 제가 이왕 제공된 부트스트랩으로 카드 사이가 벌려져 있는 것을 선택하지 않고 위처럼 코드를 만들었다면 예를 들어 display:flex의 space-between 또는 padding 등등.... 이런 추가 코드를 삽입하여 카드와 카드 사이의 간격을 뗄 수가 있는지 궁금합니다.

감사합니다.

댓글 알림