다른 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;

}

1. import하기

@import url(./common.css);

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

.not-good {

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

}

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

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

u {

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

}