부트스트랩 + CSS [div 안에 있는 내용을 가운데로 위치 시키기]

웹개발 종합반 1주차 - 부트스트랩 + CSS [div 안에 있는 내용을 가운데로 위치 시키기]

 

 

 

 

부트스트랩이란?

 

HTML, CSS, JS 프레임 워크

미리 정의된 HTML, CSS. JS(Javascript)를 모아 놓은 것이다.

>>웹사이트를 빠르게, 예쁘게 만들 수 있다.

 

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

https://getbootstrap.com/docs/5.0/getting-started/introduction/

♥부트스트랩 사이트♥

 

 

 

 

 

    <div class="mycards">

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

부트스트랩에서 가져온 카드 중 1개. card-title, card-text를 보기 쉽게 한글로 간단히 바꾸고 별과 나의 의견을 추가하였다. 

 

row row-cols-1 row-cols-md-4 g-4

★ 여기서 row-cols-md-  에 3이라 적으면 한 줄에 3개의 카드가, 4를 적으면 한 줄에 4개의 카드가 보여진다.

나는 4를 적었으니 한 줄에 4개의 카드가 보여짐.

        .mycomment{

            color: gray;

        }

        .mycards{

            width: 1200px;

            margin: 20px auto 20px auto;

        }

간단한 css를 적용!

부트스트랩을 이용한 영화 기록하는 카드 넣기

 

 

 

 

+div 안에 있는 내용을 가운데로 배치하기

    <div class="mytitle">

        <h1>내 생애 최고의 영화들</h1>

        <button>영화 기록하기</button>

    </div>

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

css적용 할때 padding을 쓰지 않고 가운데로 배치 시켰다.

div 안에 있는 내용을 가운데로 위치 시키고자 한다면 저 4줄을 그대로 복붙~~~😘

 

참고로 column은 세로 정렬, row는 가로 정렬이다.