WIL _ 부트스트랩 활용하여 포스팅 박스 만들기 (feat.모바일 처리)

1. 포스팅 박스 추가하기

- 부트 스트랩에서 URL / 난이도 선택 / 코멘트 부분을 가져와 진행

<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>별1~5개</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="floatingTextarea2"
                  style="height: 100px"></textarea>
        <label for="floatingTextarea2">Comments</label>
    </div>
    <div class="mybtns">
        <button type="button" class="btn btn-dark">기록하기</button>
        <button type="button" class="btn btn-outline-dark">닫기</button>
    </div>
</div>

 

- 박스의 그림자 효과와 라인 색상을 바꾸는 코드

box-shadow: 0px 0px 4px 0px lightpink;

 [box-shaodw에서 각 숫자의 의미]

- 수평거리 : 양수 값은 오른쪽, 음수 값은 왼쪽으로 그림자를 만듦

- 수직거리 : 양수 값은 아래쪽, 음수 값은 윗쪽으로 그림자를 만듦

- 흐림정도 : 값이 커질 수록 부드러운 그림자를 표시(음수값은 없음)

- 번짐정도 : 양수 값은 그림자를 모든 방향으로 확장 / 음수 값은 그림자를 모든 방향으로 축소 (기본값 0)

- 색상 : 그림자의 색상

- inset : 안쪽으로 그림자를 그림

- 웹에서 크기 변화와 더불어 모바일에서도 크기 변화를 잡아주는 코드

max-width : 1200px; -> 최대 크기 지정

width : 95%; -> 최대 크기의 95프로만 채워지도록 코드 기입

.wrap {
    max-width: 1200px;
    width: 95%;
    margin: 30px auto 0px auto;
}

.mypost {
    /*최대 500까지만 커지고 그전까지 95프로만 채워지는 형태로 모바일도 연동*/
    max-width: 500px;
    width: 95%;

    margin: 60px auto 0px auto;

    box-shadow: 0px 0px 4px 0px lightpink;
    padding: 20px;
}