포스팅 박스 만들기

완성본

이 포스팅 박스를 부트스트랩으로 만들어보았다.
작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다..

원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다..

1.큰 박스 먼저 만들기

하나의 div 클래스를 만들어 한 묶음로 만들어주었다.

2.영화URL

부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다.
가져온 후에는 적절하게 이름을 바꾸었다.

<div class="form-floating mb-3">
        <input type="email" class="form-control" id="floatingInput" placeholder="영화URL">
        <label for="floatingInput">영화URL</label>
    </div>

3.별점 박스

Custom select에 있는 선택하고 항목을 설정할 수 있는 템플릿을 가져왔다.

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

4.코멘트 URL

comment를 작성할 수 있는 label 템플릿을 가져와 활용했다.

<div class="form-floating">
        <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
        <label for="floatingTextarea">코멘트</label>
    </div>

5.기록하기, 닫기 버튼

먼저 div로 버튼의 영역을 묶어주었다.

이렇게 두 가지 모양 템플릿으로 가지고 와서

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

이름을 바꾸어 주었다.

버튼의 경우 CSS가 중요했는데,

.mybtn {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

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

가운데로 정렬해주면서, flex-direction: row를 줌으로서 수평으로 두었다.

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

아무래도 위 4가지 태그는 가운데 정렬할 때 많이 쓰일 듯 하다!
이렇게 해서 위의 완성본을 완성했다!