[Web] 부트스트랩 활용 - ( week 1 )

Card

부트스트랩을 활용해서 페이지에 카드 붙여 넣기를 사용해 본다.

 

Bootstrap Card

 

적용시킬 카드는 위와 같이 동일한 카드를 나열한 형태이다.

아래에는 사용하기 위한 코드가 있다. 해당 코드를 복사한 다음 현재 페이지의 소스에서 div를 새로 생성하고 추가해 준다.

    <div class="mycards">

        <!-- 복사한 코드 붙여넣기 -->

    </div>

<div class="row row-cols-1 row-cols-md-3 g-4">
  <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>
      </div>
    </div>
  </div>
</div>

<div class="col">

이 부분이 하나의 카드라 볼 수 있으며 이 부분을 수정해서 여러 개를 사용할 것이기 때문에 하나만 남겨두고 나머지는 지워준다.

<div class="row row-cols-1 row-cols-md-4 g-4">

여기는 한 줄에 몇 개를 보여줄지 정할 수 있으며 한 줄에 4개가 보이도록 수정한다.

이 상태에서 확인해 보면 이미지가 빠져있어서 제대로 나오지 않고 있다.

<img src="..."

여기에 사용할 이미지 소스를 불러오면 다음과 같이 화면이 나오게 된다.

 

bootstrap에서 가져온 코드가 제대로 적용이 되지 않는 경우 head에서 참조하는 부분이 빠진 것일 수 있으니 추가해 준다.

    <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>

 

카드에 추가로 별점과 코멘트를 남기는 칸을 생성해 본다.

<div class="card-body">

   <h5 class="card-title">Movie Title</h5>

   <p class="card-text">Movie Comment</p>

   <p>⭐⭐⭐</p>

   <p class="mycomment">My Comment</p>

</div>

 

내 의견을 남길 mycomment는 css로 색상을 gray로 변경해 주고 col을 복사해서 4개 정도 생성해 본다.

카드들의 크기와 여백을 줘서 페이지가 한눈에 들어오도록 한다.

        .mycards {

            width: 1200px;

            margin: 20px auto 20px auto;

        }

Posting box

코멘트를 작성해서 입력할 수 있도록 포스팅 박스를 만든다.

이 기능은 부트스트랩에서 플로팅 라벨을 사용한다.

 

Floating Label

 

원하는 플로팅 라벨과 텍스트 영역을 복사해서 내 코드의 title과 cards div 사이에 새로운 div를 만들고 붙여 넣는다.

    <div class="mytitle">

    </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">Movie URL</label>

        </div>

        <div class="form-floating">

            <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>

            <label for="floatingTextarea">Comments</label>

        </div>

    </div>

    <div class="mycards">

 

입력한 값을 저장하거나 취소할 버튼도 추가해 준다.

Buttons

        <div class="mybtn">

            <button type="button" class="btn btn-dark">Save</button>

            <button type="button" class="btn btn-outline-dark">Close</button>

        </div>

 

위와 같이 형태가 만들어졌다.

 

mypost

이제 mypost의 크기와 여백 등을 조절해서 꾸며준다.

        .mypost{

            width: 500px;

            margin: 20px auto 20px auto;

            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray;

        }

 

box-shadow는 요소에 그림자를 넣는다. 수평, 수직 거리와 흐릿함, 확산 정도 그리고 색상을 조절할 수 있다.

 

mybtn

버튼을 정렬하고 여백을 준다.

정렬하는 방식은 flex로 만들어서 수평으로 정렬해 준다.

마진을 줘서 위의 요소들과 여백을 주고 내부의 요소들은 mybtn> button을 사용해서 마진을 적용한다.

        .mybtn{

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: center;

            margin-top: 20px;

            margin-right: 20px;

        }

        .mybtn>button{

            margin-right: 10px;

        }

 

이렇게 페이지가 완성되었다.