Week02/Minju

[yminjuu]

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

1. javascript를 사용한 간단한 Calendar 만들기 🗓️
2. html와 css로 당근마켓 랜딩페이지 클론코딩 🥕

1. Calendar 동작 화면

2. 당근마켓 구현 화면

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

1. Calendar

<div class="date ${condition}">${date}</div>
오늘 날짜에 대해 이 class="date" 를 갖는 div 요소 전체를 감싸는 border을 만들고, background color 전체를 바꾸고 싶었습니다.

for (let date of document.querySelectorAll(".date.this")) { if (+date.innerText === today.getDate()) { date.classList.add("today"); break; } }
이러한 코드를 통해서 오늘 날짜에 해당하는 div 객체에 대해 class를 새롭게 추가하는 방법이 있음을 검색을 통해 알게 되었습니다. 즉, 만약 현재 캘린더 페이지와 오늘 날짜에 대한 연도/달이 일치한다면 오늘 날짜에 해당하는 요소에 대해 "today" class를 추가해주게 됩니다.

css 파일에는 class="today"에 대한 스타일 속성을 정의해두었기에 알맞게 적용됩니다.
.today { position: relative; border: 3px solid rgb(205, 231, 255, 0.8); border-radius: 10px; padding: 5px; background-color: rgb(205, 231, 255, 0.8); box-shadow: 2px 2px 2px rgb(205, 231, 255, 0.8); }

2. 당근 마켓

당근마켓 랜딩페이지의 구조를 하나하나 뜯어보며 어떤 게 효율적인 구조인지 고민하는 시간을 가졌습니다. 두번째 클론코딩이지만 아직 css를 완벽하게 다루지 못한다고 느껴서 (부모-자식 간 속성 상속 다루기, 레이아웃 알맞게 정렬, 익숙하지 않은 grid 레이아웃 등) 더 익숙해질 수 있도록 시간을 갖고 열심히 공부해야겠다고 느꼈습니다. 특히 계속해서 위에 고정되어 있는 header부분을 구현할 때 어려움을 겪었습니다. 일정 너비까지는 창의 크기를 줄여도 양쪽 여백만 줄어들고 content를 갖는 부분의 너비는 무조건 고정되도록 하고 싶었는데 쉽지 않았습니다.

🤔 PR Point

• header 부분에 대한 style을 다른 분들은 어떤 식으로 적용하셨는지 궁금합니다!!

• 추가적으로 현재 알맞게 파일 디렉터리를 push하고 있는 건지 궁금합니닷.. 이번 두번째 과제에서는 week02 하위에 minju 디렉터리를 만들어서 push했지만 첫번째 과제에서는 따로 디렉터리를 만들지 않았는데 다시 push해야 할까요?