1주차 심화 과제

[yesongoget]

✨ 구현 기능 명세

- 기본 과제

1. header , main (section , section) , footer 로 나누어 구현합니다.
2. main
   1. 캘린더는 ‼️ grid ‼️ 를 사용해 구현합니다. ✔️
      1. 아래 3개의 정보는 가운데 정렬로 구현합니다.✔️
         1. 요일
         2. 할일의 숫자가 들어있는 아이콘
         3. 날짜
   2. 카테고리별로 색상이 다르게 표시됩니다. ✔️
   3. 특정 너비보다 초과하게 되면 다음 행으로 카테고리+할일리스트가 세트로 넘어갑니다 ✔️
3. footer
   1. 하단 메뉴로 달력 / MY 가 존재합니다. ✔️

- 심화 과제

1. css 다루기
   1. 완료한 할일과 완료하지 않은 할일을 색상으로 구분하여 체크표시를 나타냅니다. ✔️
   2. 입체감있는 그림자를 설정해 이쁜 🌼 디자인으로 만듭니다. ✔️(?..)

🌼 PR Point

캘린더는 다음과 같이 grid-template-columns를 활용하여 구현하였습니다!

.count-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

하트 이미지를 박아놓고 count 텍스트에 absolute 설정해서 가운데로 이동시켜줬는데 이 방식이 맞는지 모르겠네용 ㅎ

.heart_count {
    position: absolute;
    top: 50%; /* 부모 요소의 중앙을 기준으로 수직으로 50% 이동합니다. */
    left: 50%; /* 부모 요소의 중앙을 기준으로 수평으로 50% 이동합니다. */
    transform: translate(-50%, -50%); /* 자식 요소를 가운데로 이동합니다. */
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 20px;
    color: white;
}

투두 카테고리에 그림자 효과를 적용시켰는데, 반영이 안되더라구요!
이거 왜 그런지 아시는 분 계실까요 ㅠ

.category-name {
    width: fit-content;
    height: fit-content;
    padding: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    color: white;
    font-size:smaller;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
<br />

🥺 소요 시간, 어려웠던 점

• 7h
• grid 익숙해지는데 계속 헤맸던 것 같아요ㅠ 진짜 publishing 연습 많이 해야겠다는 생각 !!

🌈 구현 결과물

4.mp4

[Dangpy]

호엥 ! 이거 말하는 거면 내가 파일 다운 받아서 봤을 때는 색깔을 바꿔주면 바로 보이도라공!! 그 투명도도 입혀져 있어서 되어있는 상태인데 잘 안보이는 거 같옹 ~~

[Dangpy]

히히 요건 아주 자잘한 곤디 rem이랑 px 둘 중에 하나로 통일하면 더 일관성있어보일것 같아용ㅇ~~~~

[yesongoget]

rem으로 통일.. 명심!!

[Dangpy]

와웅 ㅜㅜ 진짜 꼼꼼하게 html도 시맨틱하게 하려고 한 거 보이구!! css도 예쁘게 잘했돠ㅜㅜ!!!! 역시 뉴식스 막댕 ㅜ💛 사랑해요 엉엉 ㅜ

[eastlaw80]

할일 페이지 디자인을 아주 잘해주신거 같아요!! 특히 눈에 띄는건 아주 꼼꼼하게 신경쓴 폰트들,,,배워갑니다! 고생하셨습니다~!~!

[eastlaw80]

이쪽에 할일 표시나 날짜 표시 div는 p태그 이용해도 좋을거 같아요!

[yesongoget]

오옹 p태그 생각못했는데 적용해봐야겠어용! 감사합니다!

[eastlaw80]

label for 속성을 이용해서 id를 기준으로 연결할 수 있군요...! 배워갑니다:)

[eastlaw80]

매번 폰트에 신경을 정말 많이 써주시네요...!🥹 디테일 멋져요