티스토리 뷰
저번 시간에 만들었던 영화 포스트 웹페이지에 별점 탭을 추가해보았다.
<head> <style> 안의 코드
.mypost {
max-width: 500px;
width: 90%;
margin: 20px auto 0px auto;
box-shadow: 0px 0px 3px 0px gray;
padding: 20px;
}
.btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 10px;
}
.btn > button {
margin-right: 10px;
}max-width와 width: %를 이용해서 모바일이나 웹페이지를 축소시켰을때 원활하게 사용할 수 있게 맞출 수 있었다.
<body>안의 코드
<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="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="3">****</option>
<option value="3">*****</option>
</select>
</div>
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">코멘트</label>
</div>
<div class = "btn">
<button type="button" class="btn btn-dark">기록하기</button>
<button type="button" class="btn btn-light">닫기</button>
</div>대부분의 디자인은 bootstrap에 있는 툴을 사용하였다.
'[학습일지] > Python' 카테고리의 다른 글
| [학습일지] 웹개발 2-1 ~ 2-5 (JQuery, show, hide, temp_html) (0) | 2022.07.04 |
|---|---|
| [학습일지] 웹개발 (방명록 만들어보기) (0) | 2022.07.01 |
| [학습일지] 웹개발 1-14 ~ 1-20 (javascript 기초) (0) | 2022.07.01 |
| [학습일지] 웹개발 1-9 ~ 1-12 (0) | 2022.06.28 |
| [학습일지] 웹개발 1-5 ~ 1-8(CSS 맛보기) (0) | 2022.06.28 |