[3주차 과제] CSS 레이아웃 목록

[yeonsu0327]

✨ 구현 기능 명세

• 음악플레이어

📌 내가 새로 알게 된 부분

• position: fixed를 사용하여 사이드 바와 플레이어를 화면에 고정할 수 있음
• 고정된 요소가 자리를 차지하지 않기 때문에 본문과 겹치지 않도록 여백을 추가해야 함

💎 구현과정에서의 고민과정(어려웠던 부분) 공유!

• 사이드 바의 내용이 길어질 경우와 플레이어의 내용이 변동될 경우에도 디자인이 깨지지 않도록 조정하는 부분
• 페이지를 맨 아래까지 스크롤했을 때 본문과 플레이어가 겹치지 않도록 태그에 여백(margin-bottom)을 추가

🥺 소요 시간

• 1h

🌈 구현 결과물

2024-07-14.11.20.31-1.mov