[221012] 오늘의 배움(TIL) - CSS / 피플(Piece Plan) 프로젝트 회고

🔸 CSS

• 스크롤 바 스타일링을 어떻게 변경할 수 있는가?

: 가상 요소 선택자 ::-webkit-scrollbar , ::-webkit-scrollbar-thumb 등 활용

.daily-plan-wrapper::-webkit-scrollbar {
  width: 12px;
}
.daily-plan-wrapper::-webkit-scrollbar-thumb {
  height: 40%;
  background: var(--gradient-button-2);
  border-radius: 10px;
}

• CSS로 부모 요소를 어떻게 선택할 수 있는가?

: 직접적으로 부모 요소를 선택할 수 있는 선택자는 없지만, :has 가상 요소 선택자를 통해 비슷하게 선택할 수 있음

• 텍스트 자체에 그라데이션을 어떻게 구현할 수 있는가?

: 배경으로 그라디언트를 설정한 후 -webkit-backgroud-clip, -webkit-text-fill-color 어트리뷰트의 값을 각각 text, transparent로 설정하면 구현 가능

.text-gradient {
  background: var(--gradient-button-2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

🔸 피플(Piece Plan) 프로젝트 회고

🔹 개발 프로세스

💡 진행 기간

: 10/12

◾ 디자인 시안 보완 작업

• 디자인 시스템, 템플릿, 컴포넌트 분할 완료

◾ 컴포넌트별 HTML 작업

• 각자 담당한 컴포넌트별 작업 완료
  : 메인 + 로그인, 회원가입
  : 전체 캘린더
  : 데일리 캘린더
  : 데일리 모달
  : 피스 상세 정보 모달

◾ 컴포넌트별 CSS 작업

• 각자 담당한 컴포넌트별 작업 완료
  : 메인 + 로그인, 회원가입
  : 전체 캘린더
  : 데일리 캘린더
  : 데일리 모달
  : 피스 상세 정보 모달

◾ CSS 환경 설정 파일 제작

• 변수, reset CSS 제작 및 적용 완료
  : color, font, gradient, shadow 등 적용

🔹 참여한 작업

• 디자인 시안 보완 작업

• 컴포넌트별 HTML 작업
  : 데일리 모달, 피스 상세 정보 모달 담당

• 컴포넌트별 CSS 작업
  : 데일리 모달, 피스 상세 정보 모달 담당

• CSS 환경 설정 파일 제작

🔹 해야 할 일

• JS 기능 구현