※연습문제 :
● 문제 조건 :
○ 조건1_ 스크롤했을 때 사이드 바 영역(”Codeit Music” 부분)이 화면 왼쪽에 고정되어 보이도록 배치했다.
○ 조건2_ 스크롤했을 때 플레이어 영역(” After Sunset” 부분)이 화면 하단에 고정되어 보이도록 배치했다.
○ 조건3_ 플레이어 영역의 컨트롤 요소들을 디자인과 같이 배치했다
● 해결과정 :
○ 조건1,2
과정1_ ★main Box의 margin-bottom , margin-left에 각각 footer.Box의 height, sidebar.Box의 width만큼 준다.
body의 구조파악을 해보면, 크게 3가지의 Box로 각각 사이드바 (Div sidebar Box), main Box , footer Box(맨 맽 재생 사이드 바)가 읶다.
과정2_ 사이드바 걸기 => sidebar Box에 position : fixed , left: 0, right : 0 , height : 100%;
과정3_ footer 사이드 걸기 +> footer Box에 position : fixed, bottom : 0px, left : 0px, right : 100; , width : 100%
+ z-index : 1 //0보다 더 큰값을 넣었다(이유: 모든 사이드 바 중 제일 앞에 보이도록 해야함)
○ 조건3 :
마지막 footer의 배치가 조금 어려웠다.
과정4_ 저기 control (이전곡 || 정지 || 다음곡) 부분의 Box를 footer에서 정중앙 배치하기
§방법1 : //가장 정확하게 가운데로 배치하는 방법
- player-main Box안에 left right div의 width를 같게 하고, flex-shrink: 0을 건다.
- control 버튼 Box를 flex-grow : 1을 조진 후, justify-content : center하면 된다.
§방법2 : player-main Box를 grid로 한다음 1fr 3fr 1fr 해서 요소들 넣었음, 그리고 justify-content : center 배치
//얼추 좋은 방법 같음
# 최종 프로젝트 결과물 링크 :
https://bakey-api.codeit.kr/web/enrollments/670f8de1ec16416f4c513d65/lessons/5801/index.html
