1-11 포스팅박스 만들기/ 모바일 최적화 크기

오늘의 결과물♡

코드:

HTML :

 

<div class="commentbox">

 

<input class="form-control form-control-lg" type="text" placeholder="영화URL"

aria-label=".form-control-lg example">

 

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

 

<div class="form-floating">

<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"

style="height:300px"></textarea>

<label for="floatingTextarea">코멘트</label>

</div>

 

<div class="buttons">

<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-outline-secondary">Secondary</button>

</div>

</div>

 

CSS :

.commentbox {

box-shadow: 0px 0px 3px 0px gray;

padding: 20px;

width: 500px;

height: 500px;

margin: 20px auto 10px auto;

}

.input-group {

margin-top: 10px;

height: 40px

}

.buttons {

margin-top: 15px;

display: flex;

flex-direction: row;

align-items: center;

justify-content: center;

}

.buttons>button {

margin-right: 5px;

 

 

⭐️모바일 최적화

    ✔️모바일에서의 가로 사이즈를 맞추기위해

             항상 width를 500px 로 맞춘다.

    ✔️ 화면폭 500px 전에는 95%로 맞추다가 넘으면 500px로 전환:

               width: 95%;

               max-width:500px;