이 포스팅 박스를 부트스트랩으로 만들어보았다.
작년에 부트스트랩 공부했을 때 도대체가 무슨 말인지 몰라서 많이 헤맸던 경험이 있다..
원하는 템플릿만 잘 찾아서 넣으면 되는데...그게 그렇게 어려웠나보다..
하나의 div 클래스를 만들어 한 묶음로 만들어주었다.
부트스트랩에 있는 이메일 템플릿을 활용하여 코드를 가져왔다.
가져온 후에는 적절하게 이름을 바꾸었다.
<div class="form-floating mb-3">
<input type="email" class="form-control" id="floatingInput" placeholder="영화URL">
<label for="floatingInput">영화URL</label>
</div>
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>
comment를 작성할 수 있는 label 템플릿을 가져와 활용했다.
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
먼저 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가지 태그는 가운데 정렬할 때 많이 쓰일 듯 하다!
이렇게 해서 위의 완성본을 완성했다!
max-width : 1200px
width :95% 를 주면 브라우저 크기가 줄어들어도 크기 조절이 자동으로 가능해진다.!