1-6. 부트스트랩 써보기

<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="mycoment">여기에 나의 의견을 쓰면 되겠죠</p>

                    </div>

                </div>

            </div>

    </div>

이것을 복사붙여넣은 뒤 style에 

.mycoment{

            color: gray;

        }

        .mycards{

            width: 1200px;

            margin: 20px auto 20px auto;

        }

 

추가 해주면 아래 처럼 나오게 된다.

포스팅 박스 추가하기

 

박스를 추가한 후 밑에 코드를 썻다.

<div class="mypost">

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

 

 

그리고 style로 가서 마저  쓰고 나니

.mypost {

            width: 500px;

            margin: 20px auto 20px auto;

            padding: 20px 20px 20px 20px;

            box-shadow: 0px 0px 3px 0px gray; /*그림자 추가하기. 3번째만 주로 바꿈. 그림자 길이설정하는곳이기 때문*/

        }

        .mybtn{ /*버튼들을 가운데 정렬 후 위에 코멘트 박스와 사이 벌려놓았다.*/

            display: flex;

            flex-direction: row;

            align-items: center;

            justify-content: center;

            margin-top: 20px;

        }

        .mybtn>button { /*버튼들 사이를 벌려놓기*/

            margin-right: 10px;

        }

위 사진과 같이 만들어 졌다.