๐งฎ open-color
css ์์์ ๋์์ธ์ ํ ๋ ์ฌ๋ฌ ๊ฐ์ง ์์ ๋ฐ ํ๊ฐ์ง ์์์ ๋ํ ์๊น ์กฐ์ ์ ํ ํ์๊ฐ ์๋ค.
์์์ ์ผ์ผํ ์กฐ์ ํ๊ธฐ๋ณด๋จ ์ด๋ฏธ ์์ฑ๋์ด์๋ ์์๊ณผ ์์์กฐ์ ์ ์ด์ฉํ๋ฉด ํธํ ์ ์๋ค.
์ด ๋ ์ ์ฉํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๊ธฐ๋กํด๋๊ณ ์ ํ๋ค.
open-color
$ npm install open-color
open-color ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๋ค์ํ ์์์ ๋ชจ์๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค.
์ํ๊ณ ์ํ๋ ์์์ ๋ณ์ ์ปจ๋ฒค์
์ผ๋ก ๊ฐ์ ธ์ ์ฌ์ฉํ ์ ์๋ค.
styled-component
styled-component์์ ์ฌ์ฉํ ๋์ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ ์ ์๋ค.
import oc from "open-color";
import styled from "styled-components";
const AuthContainer = styled.div`
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: ${oc.gray[4]};
display: flex;
align-items: center;
justify-content: center;
.link-auth {
color: ${oc.gray[6]};
&:hover {
color: ${oc.gray[5]};
}
}
`;
sass,scss,css
sass,scss,css์์๋ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉํ ์ ์๋ค.
sass , scss
$oc-(color)-(number)
css
--oc-(color)-(number)
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐งฎ open-color), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@kcj_dev96/open-color์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค