1. $ - 디자인을 코드로 옮기는 첫 걸음
변수 선언 형식
- All 소문자 - 모두 소문자로 쓰는 경우 ' - ' 사용하는 경우가 많다.
$yunsu-1: 2024; - All 대문자 - 모두 대문자로 쓰는 경우 ' _ ' 사용하는 경우가 많다.
$YUNSU_1: 2024;
변수 선언 시 주의 사항
//예시
$name: 'yunsu';
$number: 1;
$animation: color 200ms ease-in-out;
$color: #fff;
$bacground-image: url('./assets/images/cat.jpg');
$font-size: 13px;
$boolean: true;- 앞에 숫자가 올 수는 없다.
- 문자를 쓸때는 ' '(따옴표)를 해줘야 한다.
- css 속성 값을 변수 값으로 쓸때에는 따옴표는 표기하지 않는다.
변수의 스코프
//SCSS
$yunsu: 1;
p {
line-height: $yunsu;
}
a {
$yunsu: 2;
line-height: $yunsu;
a span {
line-height: $yunsu;
}
}
div {
ine-height: $yunsu;
}//CSS
p {
line-height: 1;
}
a {
line-height: 2;
a span {
line-height: 2;
}
}
div {
ine-height: 1;
}변수의 유효범위(scope)는 { }블럭내에서만 유효하다.
웬만하면 같은 이름의 변수를 사용하지 말자.
2. 색상 팔레트 Color Palettes
- constants - 상수 → 바뀌지 않는 값 / 색상은 바뀌지 않는 값이기 때문에 style 디렉토리에 constants 디렉토리 만들어서 관리.
- main.scss 에 @import 시킬때 변수 선언과 관련된 파일은 맨윗줄에 위치시키기.
color 변수 이름 정하기
1. 컬러 번호에 따른 작명 / 개발 시점
$blsck: #000000;
/* greyscale 작명 방법 */
$grey-1: #191A20;
$grey-3: #3F4150;
$grey-8: #8C8D96;
$grey-B: #B2B3B9;
$grey-E: #E0E2E7;
$grey-F: #F7F8FA;
$white: #FFFFFF;
$blue: #3DA5F5;
$blue-dark: #3186C4;
$blue-light: #ECF6FE;
$red: #F86D7D;
$green: #22C58B;
- 장점 : 디자인 시안의 컬러 번호를 보고 바로 변수 이름을 알수 있다.
- 단점 : 디자이너가 컬러변경을 할 때 변수명의 의미를 상실해서 변수명을 변경을 해야한다.
2. 컬러 사용 목적에 따른 작명 / 디자인 시점
$blsck: #000000;
/* greyscale 작명 방법 */
$dark: #191A20;
$primary: #3F4150;
$secondary: #8C8D96;
$tertiary: #B2B3B9;
$border: #E0E2E7;
$background: #F7F8FA;
$white: #FFFFFF;
$blue: #3DA5F5;
$blue-dark: #3186C4;
$blue-light: #ECF6FE;
$red: #F86D7D;
$green: #22C58B;
- primary - 기본 폰트 색상
- secondary - primary보다 중요도가 낮고 연한 부수 정보 폰트 색상
- tertiary - primary보다 중요도가 낮고 연한 부수 정보 폰트 색상
- 장점 : 컬러 사용 목적에 따라 작명을 하여 사용목적을 유추하기가 쉽다.
- 단점 : 100% 통하는 방법은 아니다.
3. 타이포그래피 Typography
line-heght 와 letter-spacing이 지켜지지 않는 경우가 허다하다.
해당 font-size와 매칭이 되는 line-heght 와 letter-spacing이 무엇인지 함께 파악해서 이 3가지를 함께 세트로 보는 관점이 필요하다.
$font-main: 'Noto Sans KR', sans-serif;
$font-price: 'Tahoma', sans-serif;
$font-size-12: 12px;
$line-height-12: 16px;
$letter-spacing-12: -0.005em;
$font-size-13: 13px;
$line-height-13: 20px;
$letter-spacing-13: -0.01em;
$font-size-14: 14px;
$line-height-14: 24px;
$letter-spacing-14: -0.01em;
$font-size-16: 16px;
$line-height-16: 24px;
$letter-spacing-16: -0.01em;
$font-size-18: 18px;
$line-height-18: 28px;
$letter-spacing-18: -0.02em;
$font-size-24: 24px;
$line-height-24: 34px;
$letter-spacing-24: -0.01em;
- font-smooting 효과 // reset.css에
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
4. 그리드 시스템 Grid System
5. 반응형 그리드 시스템
/*
* MOBILE (<768px) -----------------------------
* fixture ......................... sm
* # of column...................... 4
* gutter .......................... 20px
* margin .......................... 5px
* container-size .................. 100% - (5px * 2)
* TABLET (>768px) -----------------------------
* fixture ......................... md
* # of column...................... 12
* gutter .......................... 20px
* margin .......................... 30px
* container-size .................. 100% - (30px * 2)
* max-container-size .............. 960px
* DESKTOP (>1200px) -----------------------------
* fixture ......................... lg
* # of column...................... 12
* gutter .......................... 20px
* unit ............................ 75px
* margin .......................... auto
* container-size .................. 1140px
* max-container-size .............. 1140px
*/위와 같이 파악을 하고 코드를 짜면 용이하다.
위를 변수로 변형하면..
//sm 만
$gutter: 20px;
$sm-columns: 4;
$sm-margin: 5px;
5. 반응형 그리드 시스템 - Mobile
부트스트랩에서 사용하는 그리드 설계 방식 사용.
.container
- width: 100%이되 양옆에 margin영역 5px 존재 // padding으로 5px
- Desktop에서나 mobile, teblet에서나 항상 가운데에 와야하기 때문에 margin: 0 auto;
.row
- column의 부모가 될 row 에게 display: flex; 를 준다. // column들을 가로로 정렬해주어야한다.
- row 에게 flex-wrap: wrap; 을 준다. // 추가로 row 의 자식인 column의 사이즈의 합이 row를 넘어설때 아래로 떨어지도록 해준다.
flex-wrap의 기본값인 nowrap은 자식요소를 구겨서라도 가로로 정렬하려고 한다.
따라서 column의 width 값을 유지시키기 위해서는 flex-wrap: wrap;을 사용해야한다.
.col-sm-1 , .col-md-1 , .col-lg-1 (column)
//.col-sm-1, .col-md-3, .col-lg-5 와 같은 column을 SCSS로 찾는 법
- [class='col-']
html속성 중 class에서 그 값이 'col-'인 것을 찾아라. → .col-
- [class^='col-']
html속성 중 class에서 그 값이 'col-'으로 시작하는 것을 찾아라. → .col-XXX
① column이 1column 이던 2column 이던 공통적으로 양옆에 gutter값을 반으로 나눠 가지고 있다.
[class^='col-'] {
padding: 0 $gutter / 2;
}② col-sm-1, col-sm-2, col-sm-3 ... 연산하기.
css 로만 했다면 아래와 같이 일일이 계산해줘야 했다.
.col-sm-1 {
width: 25%;
}
.col-sm-2 {
width: 50%;
}
.col-sm-3 {
width: 75%;
}
.
.
.⭐ SCSS의 for문을 이용하여 연산 !
@for $i from 1 through $sm-columns {
@debug $i //확인용
}→ for문에서만 쓸 변수 i를 만든 후 1부터 colum의 갯수인 4($sm-columns) 만큼 출력한다.
// @debug $i 를 통해 확인해보면 terminal에 1~4까지 찍히는 것을 확인할수 있다.
//최종
//SCSS .container { @for $i from 1 through $sm-columns { .col-sm-#{$i} { width: persentage( $i / $sm-columns ); // = $i / $sm-columns * 100% } } }//CSS 변환 후 .container .col-sm-1 { width: 25%; } .container .col-sm-2 { width: 50%; } .container .col-sm-3 { width: 75%; } .container .col-sm-4 { width: 100%; }
- .col-sm-#{$i}
그냥 col-sm- $i 를 한다면 CSS변환시 .container .col-sm- $i 로 출력됨.
#{ }로 감싸줘야 변수가 갖고 있는 값으로 출력된다.persentage( $i / $sm-columns );$i / $sm-columns * 100% 로도 표기 가능하지만 persentage 라는 함수에 넣어주면 알아서 % 값으로 출력해준다.
