๐Ÿงฎ open-color

๊น€์ฒ ์ค€ยท2022๋…„ 4์›” 2์ผ
1

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
3/6

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)

0๊ฐœ์˜ ๋Œ“๊ธ€