날짜: 2022년 12월 7일 수요일

키워드 및 질문

• CSS Module
• styled-component
• SCSS
• Figma
• styled-component
• ::before 형광펜 테크닉
• 라인 만들때 absolute, relative 테크닉
• 리스트에 마진 주는 테크닉 (+ 사용)
• props 전달로 className 지정 없이 조건 렌더링 하기
• defaultProps

본문

• React styling 방법론 소개
• styled component 기본기
• 과목카드 만들기 (with Firma, styled-component, SCSS)

<aside> 📌 요약: CSS Module은 스타일 충돌을 방지하고 코드를 격리하여 css 설계 가능. styled-component는 따로 CSS파일을 만들지 않고 JSX파일 안에서 스타일링까지 해결. 컴포넌트에 묶음으로써 재사용이 쉬워짐. JS 값을 props로 넘겨줘서 해당 값에 의도된 스타일링 적용 가능. CSS Module과 마찬가지로 class이름에 hash값이 붙기 때문에 선택자가 겹치지 않음.

+ 를 사용한 list요소들에 마진을 주는 테크닉, absolute, relative를 활용하여 구분 선을 그리는 테크닉, ::before를 활용하여 글씨 배경에 형광펜 효과를 주는 테크닉, styled-component의 컴포넌트화와 props 전달로 지정된 옵션으로 렌더링하기, defaultProps로 기본 props 지정하기

</aside>