CSS, SCSS, SASS의 기본 개념과 문법

CSS 파일에서 변수를 정의하는 방법

div.css

:root { --div-color: red; }

div { background-color: var(--div-color); }

CSS 작성에 있어 Sass만이 방법인 건 아니긴 합니다. css 파일 안에서 함수를 사용할 순 없지만css 여러 내장 함수를 지원하고 있다.

1. calc(): 계산을 수행하는 함수로, 길이, 너비, 위치 등을 계산할 때 사용됩니다. 예를 들어, width: calc(100% - 20px)요소의 너비를 화면 너비의 100%에서 20px을 뺀 값으로 설정합니다.
2. rgb(): RGB 색상을 생성하는 함수로, 빨간색, 초록색, 파란색 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgb(255, 0, 0);는 빨간색의 배경색을 설정합니다.
3. rgba(): RGB 색상과 투명도를 생성하는 함수로, 빨간색, 초록색, 파란색 값과 투명도 값을 사용하여 색상을 지정합니다. 예를 들어, background-color: rgba(255, 0, 0, 0.5);는 투명도가 0.5인 빨간색의 배경색을 설정합니다.
4. hsl(): HSL 색상을 생성하는 함수로, 색상, 채도, 명도 값을 사용하여 색상을 지정합니다. 예를 들어, color: hsl(120, 100%, 50%);는 채도와 명도가 100%인 녹색의 텍스트 색상을 설정합니다.
5. url(): 이미지 파일의 경로를 지정하는 함수로, 배경 이미지나 이미지 요소의 src 속성에 사용됩니다. 예를 들어, background-image: url('image.jpg');는 image.jpg 파일을 배경 이미지로 설정합니다.
6. var(): CSS 변수를 참조하는 함수로, 미리 정의된 변수 값을 가져와 사용합니다. 예를 들어, color: var(--primary-color);는 --primary-color라는 CSS 변수의 값을 사용하여 텍스트 색상을 설정합니다.

 

css와 js을 변수값을 같이 사용하는 방법

css 속성을 js에서 쓰는 방법

CSS와 JS 사이에 변수 공유하기 :: 언어 감각 기르기 (tistory.com)

 

js에서 리턴값을 css에서 쓰는 방법

• 없음

 

css가 입혀지는 화면에서 js로 동적 표현

const root = document.documentElement; root.style.setProperty('--brand-color', BrandColor);

 

색상

HTML Color Picker

HTML Color Codes