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

💛 nalsae·2022년 10월 12일
1

📚 오늘의 배움(TIL)

목록 보기
61/84
post-thumbnail

🔸 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 기능 구현
profile
𝙸'𝚖 𝚊 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚝𝚛𝚢𝚒𝚗𝚐 𝚝𝚘 𝚜𝚝𝚞𝚍𝚢 𝚊𝚕𝚠𝚊𝚢𝚜. 🤔

0개의 댓글