1. Why Variables?!
변수를 선언한다 = 값을 일일이 작성하지 않는다
일정한 테마를 가진 웹 이라면, 배경색이나 헤딩의 폰트 사이즈, 본문의 폰트 사이즈 등등등 동일한 스타일을 줄 경우가 생긴다.(아주 많이)
이 때마다 그 값을 어딘가에서 보고 써넣거나, 복붙하기등의 행동은 효율성이 떨어진다.
변수를 활용하면 이러한 반복작업이 깔끔하게 해결된다.
2. 변수생성
$를 써서 변수를 생성한다.(선언한다.)
//색상
$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;
//폰트사이즈
$font-p: 13px;
$font-h1: 28px;
//폰트
$base-font: 'Noto Sans KR', sans-serif;
.box {
background-color: $bg-color;
//css에서는 background-color: #3e5e9e;가 된다.
}3. List & Map
변수의 값에 하나만 선언하지 않고 여러개를 쓸 수 있는데, 방식은 두 가지가 있다.
3.1 list
- 값들마다 순서가 있다.
- 이 순서를 인덱스라고 한다.
- 인덱스는 1부터 시작한다.
$color-palette: red, blue, green, black, yellow;
.box {
color: nth(color-palette, 2) //blue!따로 괄호를 넣어주지 않아도, 쉼표로 구분해주면 된다!!
3.2 map
map이란 값들이 들어있지만, key : value의 형태로 들어있는 것을 말한다.
$font-sizes: ("h1": 45px, "h2": 19px, "p": 16px);
section {
h2 {
font-size : map-get($font-sizes, "h2");// 19px
}
}
map-get($font-size, "h3");// null h3란 key값이 없으므로!
map-get($font-size, "h1");// 45pxlist와 달리, 괄호로 묶어주는 과정이 필요하다!!
불러오려면, map-get($map, "key"); 형태로 선언하면 된다.
4. Scope (유효범위)
유효범위란, 변수가 전체 문서에서 사용될지(전역변수), 중괄호 안에서만 사용될지(지역변수)를 의미한다.
4.1 지역변수
지역변수란 자신을 감싸고 있는 중괄호 내에서만 쓰이는 변수를 말한다. {}
중괄호 내에서 선언하면 된다.
.box {
$f-color: #525252;
color: $f-color;
font-weight: 700;
span {
color: $f-color;
}
}이렇게 선언한 변수는 중괄호 내에서만 쓸 수 있으며, 다른 지역에서 쓰려고 선언하면 에러가 난다.
4.2 전역변수
전역변수란 문서 전체에서 사용되는 변수를 말한다.
가장 윗부분에서 선언해주면 문서 전체에서 사용할 수 있다.
$l-height: 22px;
.box {
line-height: $l-height;
color: red;
span {
line-height: $l-height;
color: blue;
}
}위처럼, 문서의 상위에서 변수를 선언해두면 어느 지역에서도 쓸 수 있다.
5. Operator (연산자)
Javascript에 들어가면 연산자 공부는 정말 많이하게 될 것이다.
지금 수준에서 알아두면 좋을 것만 알아둔다.
5.1 비교연산자
> < >= <= 는 알고있는 그 의미 그대로이다.
(크다 작다 크거나같다 작거나같다)
연산의 결과는 true(1) or false(0)이다
=는 같다는 의미가 아니다.
==가 같다는 의미이고, !=가 같지 않다는 의미이다.
5.2 산술연산자
a % b는 a에서 b를 나눈 나머지 값을 구하는 연산자이다.string의+
"string" + "-문자열" // "string-문자열"
string + -문자열 // string-문자열
"string" + -문자열 // "string-문자열"문자열의 더하기 연산에서 기억할 것은 두가지.
- "string"과 string은 다르다
- 더하기 연산에서 둘 중 하나만 "문자열"이어도 결과는 "문자열"이 됨
이 정도만 알고 넘어간다.
