Skip to content

[ 3주차 과제 ] 음악플레이어 #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Hyewon-5 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[ 3주차 과제 ] 음악플레이어 #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions .github/[ 3주차 과제 ] 음악플레이어
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!-- PR의 제목은 "[ n주차 과제 ] 과제명" 으로 작성해주시면 되겠습니다 -->

## ✨ 구현 기능 명세

- CSS 레이아웃에 대해 배웠다.
Position 속성과 Flexbox의 개념등을 배워서 음악 플레이어 웹사이트를 구현하는 것을 3주차에서 배웠다.

<br />

## 📌 내가 새로 알게 된 부분

.sidebar와 .player가 항상 고정된 상태로 떠 있도록 배치하려면 fixed 포지션을 사용하면 된다는 것을 알았다.


<br />

## 💎 구현과정에서의 고민과정(어려웠던 부분) 공유!
- fixed 포지션은 자리를 차지하지 않기 때문에 페이지를 맨 아래까지 완전히 스크롤했을 때 본문과 플레이어가 겹치지 않도록, <main> 태그에 여백(margin-bottom)을 추가해 주는 것을 잊어서 구현하는데에 애를 먹었다.

<br />

## 🥺 소요 시간
- `3`

<br />

## 🌈 구현 결과물

https://bakey-api.codeit.kr/web/enrollments/66791ff7e58ff7774633d1f1/lessons/5801/index.html