11 SurveyPie 컴포넌트 스타일링

11-1 styled-components

Styled Components 라는건 말 그대로 스타일된 컴포넌트 라는 의미이다.

그러니까 컴포넌트긴 컴포넌트인데, 그 컴포넌트에 style만 입혔다고 볼 수 있다. 

 

 

css in js 라이브러리

공식 문서

https://styled-components.com/docs/basics#installation

 

 

설치명령 : npm install --save styled-components

 

위와 같은 방식으로 css 코드를 작성

 

 

강의에서 예시

출력화면

 

 

아래는 전통적인 방식으로 style 적용하는 코드이다. 

HTML 태그에 className 속성에 정의된 태그 입력한다.

 

 

 

 

 

11-2. 질문 유형 별, 컴포넌트 만들기

 

 

 

 

11-3. 스타일 변수 만들기

style 변수 관리하기

• CSS 변수로 색상 값 정의하는 방법
• Javascript Object로 값을 정의하는 방법

 

어떤 방법이 좋을까?

상황에 따라, 서비스 환경에 따라, 취향에 따라 결정

중요한 건, 스타일링 할 때, 디자인 관련 값들을 얼마나 효율적으로 관리하고 재사용 용이하도록 만드는지 이다.

 

 

11-4. 나머지 컴포넌트 스타일링 하기