[2-4] 웹 명함 구축하기 (1) - 기본 설명 정리 (css, sass, js)

CSS, Sass 변수 사용

CSS와 SCSS에서는 변수를 지정하여 속성 값을 컨트롤할 수 있다.

<CSS>
:root 요소 안에
--name 을 지정하여 속성 값 저장 가능

<SCSS>
$name 을 통해 속성 값 저장 가능.
- CSS로 컴파일 되기 때문에
컴파일 된 후에는 변수처럼 사용할 수 없다.
- 여러 파일을 사용하여 변수를 한 번에 관리하기 용이
- CSS의 변수는 이후에 JS를 이용해서
요소의 속성 값을 변형할 수 있음.
= 다크모드 / 라이트모드 사용할 때 자주 사용.

 

SCSS

$primary: #FF008A;
$sub_primary: #31E6FF;
$1h: 1.55em;

CSS

:root{
	--primary: #FF008A;
}
p{
	color: var(--primary);
}

:root {
  --primary: #f1c6d6;
  --text: #194e27;
}

body {
  background: var(--primary);
 }
 
h1 {
  color: var(--text);
}

이렇게도 사용 가능 

---

Sass에서 만들어낸 변수들은
컴파일 된 후에는 변수처럼 작동하지 않음.

Css 에서 변수로 작성하게 되면
- 다소 길어지는 경향 있음
- 관리하기도 조금 힘들 수 있음.
- Inspector (f12) 안에서 즉각적으로 변형된 거 확인 가능
- 자바스크립트 통해서 내부에 있는 속성들을 강제로 바꿔줄 수 있음.

---

Undefined

지정되지 않음을 의미.
Boolean 에서는 false 로 취급.
(에러로 표출되기 때문)

Null
없음을 의미
Undefined 처럼 선언하지않은 기본값이 아닌,
의도적으로 "없음"을 의미
boolean 에서는 false 로 취급.

< 변수 >
var - 쉽게 변경이 가능
const - 한 번 지정한 거 변경 X
다시 다른 걸로 변경할 수 없음.
조금 더 안전하게 자료 보관 가능
let - 함수에 더 해줄 때 사용