부트스트랩

 

1. mytittle 스타일

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), 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;

background의 그라데이션, 이미지url, 포지션, 사이즈 설정 

display: flex;
flex-direction: column;
align-items: center;
justify-content: center;

타이틀안 글씨 위치 설정

-----------------------------------------------------------------------------------------------------------------------------------

2. mytittle button 스타일

.mytitle button {
    width: 200px;
    height: 50px;

    background-color: transparent;
    color: white;

    border-radius: 30px;
    border: 3px solid white;

    margin-top: 10px;

 

border-radius : 모서리 둥글게하기

border : 테두리 굵기

margin-top : 10px 윗공간 두기

-----------------------------------------------------------------------------------------------------------------------------------

wrap 스타일(카드묶음calssname)

<div class="wrap">
    <div class="row row-cols-1 row-cols-md-4 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">여기에 제목이 들어갑니다.</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
        <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">여기에 제목이 들어갑니다.</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
        <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">여기에 제목이 들어갑니다.</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
        <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">여기에 제목이 들어갑니다.</h5>
                    <p class="card-text">여기에 내용이 들어가지요.</p>
                    <p>⭐⭐⭐</p>
                    <p class="mycomment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>