내 생애 최고의 영화들

김나영·2023년 6월 5일

목록 보기

2/6

👉 하나하나 뜯어보며 복습하기

코드

<!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 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>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle {
        background-color: green;
        color: white;
        height: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        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');
        background-position: center;
        background-size: cover;
    }
    .mytitle>button {
        width: 250px;
        height: 50px;
        background-color: transparent;
        border: 1px solid white;
        color: white;
        border-radius: 50px;
        margin-top: 20px;
    }
    .mytitle>button:hover {
        border: 2px solid white;
    }
</style>
</head>
<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </div>
</body>
</html>

display: flex;

내용물을 정렬할 때 사용
div안에 있는 내용물을 건들 때에는 세로인지, 가로인지, display:flex를 이용해서 정렬하면 됨

flex-direction: column;

세로로 정렬하고자 할 때 사용
가로로 저장하고 싶을 때 : column 대신 row

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

이 4개는 한 세트라고 생각!!!

 .mytitle>button {}

mytitle안에 있는 버튼을 꾸미고자 할 때

background-color: transparent;

background 배경을 없애고자 할 때 사용

background-image: linear-gradient(), url('');

background의 이미지를 url로 넣을 때 '' 안에 url 삽입
만약 이미지를 어둡게 하고 싶다면??
- url('') 앞에 ,를 찍고 그 앞에 linear-gradient() 사용

background-image: url('');
background-position: center;
background-size: cover;

이 3개는 한 세트라고 생각!!!

border: 1px solid white;

border: solid => 테두리가 실선

 .mytitle>button:hover

마우스를 버튼에 올려두면 테두리가 두껍게 변하도록 해줌

부트스트랩 활용

코드

<!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 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>
    <style>
    @import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
    * {
        font-family: 'Gowun Dodum', sans-serif;
    }
    .mytitle {
        background-color: green;
        color: white;
        height: 250px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        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');
        background-position: center;
        background-size: cover;
    }
    .mytitle>button {
        width: 250px;
        height: 50px;
        background-color: transparent;
        border: 1px solid white;
        color: white;
        border-radius: 50px;
        margin-top: 20px;
    }
    .mytitle>button:hover {
        border: 2px solid white;
    }
    .mycomment {
        color: grey;
    }
    .mycards {
        width: 1200px;
        margin: 20px auto 20px auto;
    }
    .mypost {
        width: 500px;
        margin: 20px auto 20px auto;
        padding: 20px 20px 20px 20px;
        box-shadow: 0px 0px 3px 0px grey;
    }
    .mybtn {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }
    .mybtn > button {
        margin-right: 10px;
    }
</style>
</head>
<body>
    <div class="mytitle">
        <h1>내 생애 최고의 영화들</h1>
        <button>영화 기록하기</button>
    </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">영화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>
    <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="'mycomment">여기에 나의 의견을 쓰면 되겠죠</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="'mycomment">여기에 나의 의견을 쓰면 되겠죠</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="'mycomment">여기에 나의 의견을 쓰면 되겠죠</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="'mycomment">여기에 나의 의견을 쓰면 되겠죠</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

https://getbootstrap.com/docs/5.0/components/card/ 여기서 필요한 코드 복사/붙여넣기

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

이 코드를 기준으로 끝까지 복사/붙여넣기 함
이 때, md-3을 md-4로 수정(카드 4장이 필요하기 때문에)

<h5 class="card-title">영화 제목이 들어갑니다.</h5>
<p class="card-text">여기에 코멘트가 들어갑니다.</p>
<p>⭐⭐⭐</p>
<p class="'mycomment">여기에 나의 의견을 쓰면 되겠죠</p>

기존의 card-title을 영화 제목이 들어갑니다.로 수정하고 card-text도 여기에 코멘트가 들어갑니다.로 수정함
p 태그를 사용하여 별점과 comment를 추가해줌

 <img src=""class="card-img-top" alt="...">

이미지를 삽입하기 위해 img src=""에 url을 넣어주면 됨

<div class="mycards">

위 클래스를 하나로 묶어줄 클래스 생성

<div class="form-floating mb-3">
<div class="form-floating">

포스팅박스를 만들기 위해 https://getbootstrap.com/docs/5.0/forms/floating-labels/ 여기에서 필요한 코드 복사/붙여넣기

<label for="floatingInput">영화URL</label>
<label for="floatingTextarea">코멘트</label>

가져온 코드에서 label 이름을 영화URL, 코멘트로 변경해줌

<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-outline-dark">닫기</button>

버튼도 https://getbootstrap.com/docs/5.0/components/buttons/ 여기에서 필요한 코드를 찾아 복사/붙여넣기
버튼 이름을 기록하기와 닫기로 수정

<div class="mybtn">

버튼을 하나로 묶어줄 클래스 생성

.mypost {
       width: 500px;
       margin: 20px auto 20px auto;
       padding: 20px 20px 20px 20px;
       box-shadow: 0px 0px 3px 0px grey;
    }

포스팅 박스에 그림자를 주기 위해 box-shadow를 사용
- box-shadow: 0px 0px 3px 0px 색깔; => 가운데로부터 아래 옆에 방향으로 얼마나 먼지
- 중앙부에서 시작(대부분 그림자의 길이를 가리키는 3px부분 자리만 고치면 됨

 .mybtn {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       margin-top: 20px;

버튼을 가운데로 정렬하기 위해 display, flex-direction, align-items, justify-content 함수 사용
버튼은 세로가 아닌 가로 정렬이므로 row

 .mybtn > button {
      margin-right: 10px;
    }

기록하기와 닫기 버튼의 사이의 간격을 넓히기
기록하기와 닫기의 버튼은 "mybtn" 클래스 안에 존재하므로 .mybtn > button { }로 사용

별점 추가 기능을 넣고 싶다면?!

<div class="input-group mb-3">
            <label class="input-group-text" for="inputGroupSelect01">별점</label>
            <select class="form-select" id="inputGroupSelect01">
             <option selected>--선택하기--</option>
             <option value="1">⭐</option>
             <option value="2">⭐⭐</option>
             <option value="3">⭐⭐⭐</option>
             <option value="4">⭐⭐⭐⭐</option>
             <option value="5">⭐⭐⭐⭐⭐</option>
        </select>
     </div>

https://getbootstrap.com/docs/5.0/forms/input-group/ 여기에서 사용할 코드 복사/붙여넣기
Button 이름을 별점, Choose...이름을 --선택하기--로 변경
아래와 같이 포스팅박스에서 URL과 코멘트 사이에 태그를 붙여넣기

<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="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">코멘트</label>
    </div>

김나영

이전 포스트

웹개발 종합반

다음 포스트

내 생애 최고의 영화들

웹개발 종합반

👉 하나하나 뜯어보며 복습하기

코드

부트스트랩 활용

코드

별점 추가 기능을 넣고 싶다면?!

웹개발 종합반

Script

0개의 댓글