10/18 정말 쉽고 간단한 Css 부트스트랩

YOOYOUNGJAE 2022. 10. 18. 15:22

728x90

지난시간에는 로그인창을만들었지만

이번에는 조금더 홈페이지다운걸 만들어보는거같다

거두절미하고 바로 코드부터 보자

html

<!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 rel="stylesheet" href="main.css">
    <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>
</head>

<body>
    <div class="mytittel">
        <h1>내생에 최고의 영화들</h1>
        <button class="mybtn">영화기록하기</button>
    </div>

    <div class="wrap">
        <div class="row row-cols-1 row-cols-md-3 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="maycomment">코멘트</p>
                    </div>
                </div>
            </div>
            <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="maycomment">코멘트</p>
                    </div>
                </div>
            </div>
            <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="maycomment">코멘ㅌ</p>
                    </div>
                </div>
            </div>
            <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="maycomment">코멘트</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Css

.mytittel{
    width: 100%;
    height: 250px;
    background-position: center;
    background-size: cover;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg");
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mybtn{
    width: 200px;
    height: 50px;
    background-color: transparent;
    color: white;
    border-radius: 50px;
    border: 1px solid white;
    margin-top: 10px;
    }

.mybtn:hover{
    border: 2px solid white;
}

.maycomment{
    color: gray;
}

.wrap{
    width: 1200px;
    margin: 20px auto 0px auto;
}

코드가 기하급수적으로 길어졋지만 걱정하지마라

정말간단하다 div로사용된 구획이어떻게 나위어있는지만 파악하면

어려울것이없다 여기서 한가지 주목할점은 타이틀 아래에있는

div로만들어진 걸 직접치지않고도 만들수있다라는점이다

부트스트랩에는 정말다양한 폼들이많다 카드 버튼 리스트 등등

내가 원하는 폼을가져다가 복사 붙여넣기만하면 충분히 멋진

페이지를 만들수있을거라 생각이된다

하지만 안에들어가는 이미지크기나 정렬되는 가로길이의값등

세밀한 조정은 본인이직접 해야한다

편리함에속아 할수있는걸 빼먹어서는안되지

css를보자 저번강의에 서술되어있던 모든

css 기능이 사용되었다

width를 사용할때 퍼센테이지%를 사용하여

화면의 몇퍼센트를 쓸것인가로 정의가되었다

박그라운드 이미지앞에 ilinear-gradient 가생겼는데

rgb값을 조정하여 그림의 체도를 조절하는대 사용된다

전문적으로 만질것이아니기에 가볍게 그런거구나하고 이해하고넘어가면된다

display:flex는 기본값이 row<작성되는 방향>이다

flex-direction:column 을사용하여 글을 새로로 정렬해보자

flex-direction에는 다양한 구문이있다

1. row 작성하는 방향

2. row-reverse row의역방향

3. column 새로방향

4. column-reverse 컬럼의 역방향

다음으로는 border 태두리를 사용하는 구간이나왔다

태두리의 두깨는 1px

선의 종류는 solid

색상은 white로 구분이된다

이외적인건 종류가많으니 구글링을해보자

다음으로는 :hover 기능이다

이건 마우스가 위에올라갓을때 효과를줄수있는데

태두리의 두깨를 1px 에서 3px로 옮겨지면서 버튼위에올라갓을때

작용하는것처럼 보인다

마지막으로는 margin에대한 추가적인설명인데

.wrap 안에있는 마진을봐주길바란다

20px auto 0px auto 라고되어있다

이렇게 auto를 넣어주는것은 전체적인 가운대정렬을 해주기위함이다

결과물

어떤가 너무쉽지않은가

로그인창에서 css를 4가지정도밖에 추가가안되었는데 벌써

그럴싸한 그림이 보이기시작한다

오늘의수업을마치고나서 개인적으로 만들어보고 싶은 홈페이지를 만들어봐야겠다

내일은 js의 기초문법을시작한다

이제어려워지는것이다

어렵다고포기하지말자 라는생각을하며

오늘의 포스팅을 마친다

728x90