[CSS] CSS 모듈화 - 반복되거나 공통되는 스타일 지정

다른 CSS 파일 임포트하기

@import를 사용하면 절대 및 상대경로를 사용해서
다른 CSS파일의 내용을 불러올 수 있습니다.

여러 페이지들에서 공통적으로 사용되는 스타일들을 특정 파일로
분리하여 모듈화할 수 있죠.

 

ex) @import url(./common.css);

 

CSS 변수 정의하기

1. 특정 요소에서만 사용될 수 있는 변수 

- 특정 요소 {

 --변수명 : css 설정; 

} 

ex) 

u {

  --not-good: wavy underline orange;

  --wrong: wavy underline red;

}

css에서 변수명은 --을 붙여야 한다.

 

2. 모든 요소들에게 사용될 수 있는 변수 

:root { 

 }

 

ex) 

:root {

  --font-small: 8px;

  --font-normal: 16px;

  --font-large: 24px;

 

  --font-w-normal: 400;

  --font-w-bold: 600;

  --font-w-extrabold: 900;

  --color-main: #FF4200;

  --color-sub: #865A55;

  --color-text: #49281C;

}

 

CSS 변수 사용하기

1. import하기

@import url(./common.css);

 

 

2. var(--변수명)으로 사용

.not-good {

  text-decoration: var(--not-good);

}

 

 

3. 지정되어 있는 스타일이 없을 경우 대안 지정하기

 

/* 스코프에 지정된 변수가 없을 경우 대안 값을 넣을 수도 있습니다. */

u {

  background-color: var(--warn, lightblue);

}

 

팁 - 색 조합 사이트들

• 👉 Color Space
• 👉 Paletton
• 👉 Color Hunt
• 👉 Gradient Hunt