Week2/youkyeong

[ukyeong-user]

✨어떤 과제를 수행했나요?✨

2주차 유튜브 랜딩 페이지 클론

✨어려웠던점, 트러블슈팅✨

1. 유튜브 검색창 도형이 width를 지정했는데도 화면 밖으로 나갈 만큼 길게 설정되었던 문제

• width를 아무리 바꿔도 영향이 가지 않길래 두 가지 방법을 시도해보았습니다.
• 부모 요소에 width 설정하기(실패), 해당 클래스의 css로 max-width 속성을 적용해 해결 완료하였습니다!

2. 유튜브 메인 메뉴 창(전체, 음악, 뉴스 등..)과 aside 부분의 메뉴 창이 하나의 content로 인식되는 문제가 있었습니다.

• AI에게도 질문하고, 구글링해보았지만 명확한 답변을 찾을 수 없었고 flex:1을 사용하는 방법도 있었지만 제 코드에는 적용이 되지 않아서, 결국 해당 aside 너비만큼을 content 클래스에서 margin-left 값으로 처리하였습니다.

🤔 PR Point

코드와 직접적인 것은 아니지만, position 속성(특히 relative, absolute)를 언제 사용해야 하는지, 그리고 flex-wrap 속성에 대해 이해하기 어려워서 배우고 싶습니다!

[hyun907]

유튜브 클론 코딩 거의 동일하게 만들어주셔서 깜짝 놀랐습니다! ㅎㅎ
그리고 캘린더 깨알 귀여운 파비콘이랑 현재 날짜 파란색으로 해두신 디테일 너무 좋습니다!

전체 구조와 흐름이 명확해서 보기도 좋습니다! DOM 조작도 효율적인 방식(createElement, appendChild)으로 잘 구성되어 있어요. 특히 .innerHTML +=이 아닌 DOM 메서드를 쓴 부분은 성능 면에서도 아주 좋은 선택이었습니다!

한 가지 개선 제안 드리자면, 월 선택 기능이 현재 연도에만 고정되어 있어서, 연도 선택이 가능하도록 확장하거나 상태 분리를 시도해도 좋을 것 같아요!

---

그리고 PR Point에 대해 답변 드리자면,

속성값	의미	쓸 때
static	기본값 (위치 지정 불가)	특별한 위치 지정 필요 없을 때
relative	현재 위치 기준으로 이동	기준점을 만들거나 약간의 위치 조정이 필요할 때
absolute	가장 가까운 relative, absolute, fixed 조상 기준으로 절대 위치	오버레이, 배치 고정 요소
fixed	브라우저 창 기준으로 고정	스크롤해도 고정되어야 할 요소 (ex. header)
sticky	스크롤 시엔 고정되다가 조건 충족 시 멈춤	스크롤 내릴 때 따라오는 메뉴 등

특히 relative는 absolute 요소의 기준점이 되는 경우가 많기 때문에, 앞으로 레이아웃 잡을 때 무의식적으로라도 자주 쓰일 거예요!

그리고 flex-wrap은 반응형 디자인에서 너비가 줄어들 때 자동으로 줄바꿈이 되도록 하고 싶을 때 사용합니다!
display: flex는 기본적으로 한 줄에 다 우겨넣으려 하니까, 줄넘김이 되게 하려면 꼭 flex-wrap: wrap을 추가해야 합니다!
쉽게 말해 줄 바꿈 허용이라 생각해주시면 됩니다.