프로젝트: React(TypeScript) 기반의 동적 UI 개발(2)-global style(reset, normalize, sanitize)

레이아웃이 필요한 이유

1. 프로젝트의 기본적인 화면 구조를 잡는다.
2. 반복적으로 들어가야 하는 헤더, 푸터 등을 매 화면마다 제공한다.
3. 상황과 필요에 따라 레이아웃이 변경될 수 있도록 대비한다.

global style

1. global = 프로젝트 전체에 적용 = 프로젝트에 일관된 스타일링을 적용
2. "user agent stylesheet"로 표시되는 브라우저의 기본 스타일이 차이를 만든다.
3. 브라우저 간의 스타일 차이를 극복하기 위해 사용

에릭마이어 reset.css

https://meyerweb.com/eric/tools/css/reset/

CSS Tools: Reset CSS

모든 스타일을 0으로 reset

💢h1, h2...h6까지 모두 똑같아짐

normalize.css

https://github.com/necolas/normalize.css

GitHub - necolas/normalize.css: A modern alternative to CSS resets

각 element의 고유한 속성을 유지하며 기기간, 브라우저간의 차이를 줄이는 것이 목적

sanitize.css

https://csstools.github.io/sanitize.css/

sanitize.css

normalize의 발전된 버전

개선된 브라우저의 디폴트 스타일을 살리는 쪽으로 사용

yarn add sanitize.css --save

 

sanitize.css는 where 셀렉트를 통해서 평준화 작업을 한다.

where 셀렉터는 중복작성을 위한 헬퍼 셀렉터라고 생각하면 된다.

css-in-js가 필요한 이유

1. 전역 충돌
2. 의존성 관리 어려움
3. 불필요한 코드, 오버라이딩
4. 압축
5. 상태 공유 어려움
6. 순서와 명시도
7. 캡슐화

yarn add styled-components

theme 사용 이유

1. UI, UX의 일관성 유지
2. 유지보수가 용이
3. 확장성
4. 재사용성
5. 사용자 정의

테마 스위처 Context API

1. 사용자는 토글 UI를 통해 웹사이트의 색상 테마를 바꿀 수 있다.
2. 색상 테마는 전역상태로 존재한다.
3. 사용자가 선택한 테마는 로컬스토리지에 저장한다.