RGB 색상을 회색조로 변경하기 위해선 각각의 RGB에 적절한 가중합을 적용하여 선형 휘도를 얻고 RGB 값을 모두 계산된 선형 휘도 값으로 대체하면 된다. 선형 휘도는 다음과 같은 수식을 통해 얻을 수 있다. 인간의 시각은 초록색에 가장 민감하기 때문에 가장 큰 계수를 갖고, 파란색에 가장 덜 민감하기 때문에 가장 작은 계수를 갖는다. r, g, b, a 값이 주어졌을 때 다음과 같이 사용된다. // Javascript const y = 0.2126 * r + 0.7152 * g + 0.0722 * b; const grayscale = `rgba(${y}, ${y}, ${y}, ${a})`; sRGB 전형적인 sRGB 색상은 비선형인데 이를 회색조로 변경하기 위해선 선형화 처리를 해야한다. 선형화 작업..
storybook 및 knobs addon 설치 과정은 생략한다. knobs는 컴포넌트의 props 프로퍼티를 동적으로 설정해볼 수 있게 해주는 애드온이다. 1. 기본 사용법 객체가 아닌 경우, text, number, array 등으로 변경하여 적용한다. import { withKnobs, object } from "@storybook/addon-knobs"; storiesOf("스토리명", module) .addDecorator(withKnobs) .add("서브스토리", () => { return { props: { myProps: { type: Object, default: object("my props", { // 컴포넌트에 전달할 props // 값이 knobs 탭에 표시되며 수정에 따라 화면..
sass 에서 독립된 css로 변경하지 않을 코드 조각을 나타내기 위해선 파일명 앞에 _(underscore) 문자를 붙이면 된다. 예를 들어보면... 1. 미리 선언한 변수나 믹스인 집합을 갖는 파일이 있을 때. // _variables.scss // 변수들의 집합 $color-basic-light: #fff; $color-basic-dark: #000; 2. 스타일을 분리하여 관리할 때. // _commons.scss * { box-sizing: border-box; } // _navigation.scss .navigation { width: 100px; } _ 문자가 붙어 있는 파일은 컴파일 시 css 파일로 출력되지 않는다. variables.scss, app.scss 파일이 포함된 경로를 컴파일..
- Total