요약 설명
편리하고 효율적인 CSS 코딩을 위해 Gulp에 Sass(SCSS)를 세팅합니다.
웹에서는 Sass(SCSS)가 직접 동작하지 않으므로 웹에서 동작 가능한 표준의 CSS로 컴파일(Complie) 해야 합니다.
gulp-sass와 관련 부가 패키지를 세팅하여 Gulp에서 편리하게 Sass(SCSS)를 컴파일(Complie) 하는 방법을 알아봅니다.
CSS 문법과 굉장히 유사하지만 선택자의
중첩(Nesting)이나
조건문,
반복문,
다양한 단위(Unit)의 연산 등.
표준 CSS 보다 훨씬 많은 기능을 사용해서 편리하게 작성할 수 있는
CSS 전처리기(CSS Preprocessor)입니다.
보통 언급되는 전처리기 3대장으로 Sass(SCSS), Less, Stylus가 있지만 Sass(SCSS)는 Less, Stylus의 장점을 모두 가지고 있고, 2006년부터 시작하여 가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있기 때문에 보편적으로 사용되는 Sass(SCSS)로 세팅을 진행합니다.
Sass(SCSS)를 제대로 활용하려면 충분한 공부가 필요하지만 간단하게 중첩(Nesting)과 변수($, variable)만 사용해도 Sass(SCSS)를 사용하는 데에 의미가 있습니다.
Sass(SCSS) 문법 등 자세한 커리큘럼은 추후 Publishing > CSS에 업데이트될 예정입니다.
터미널에서 아래 명령을 실행하여 gulp-sass와 Sass 컴파일(Complie)에 필요한 부가적인 패키지를 설치합니다.
npm install gulp-sass -D
npm install dart-sass -D
npm install gulp-dependents -D
npm install autoprefixer@9.8.5 -D
npm install gulp-postcss -D
npm install gulp-sourcemaps -D
npm install gulp-minify-css -D
npm install gulp-rename -D
npm i gulp-sass dart-sass gulp-dependents autoprefixer@9.8.5 gulp-postcss gulp-sourcemaps gulp-minify-css gulp-rename -D
gulp-sass를 사용하려면 gulp-sass 자체와 Sass 컴파일러를 모두 설치해야 합니다.
dart-sass는 Dart 언어로 되어 있는 Sass 컴파일러입니다.
일반 Sass에 비해 빠르게 컴파일되고, Sass의 모든 버전을 지원하며, 'CSS Modules', 'CSS Grid' 등의 최신 기능을 지원합니다.
dart-sass는 더욱 자세하고 의미 있는 오류 메시지를 제공합니다. 이는 Sass에서 발생한 문제를 식별하고 해결하는 데 도움이 됩니다.
Sass는 Ruby로 작성된 라이브러리이므로, Ruby의 업데이트와 관련하여 버전 충돌이 발생할 수 있는 반면,
dart-sass는 자체 업데이트 기능을 갖추고 있으며, Sass의 최신 기능을 지속적으로 지원합니다.
파일 간의 종속성을 추적하고 현재 스트림에 있는 파일에 종속되는 모든 파일을 추가하여 PCs, less, scss, sass의 *증분 빌드를 가능하게 하는 Gulp 플러그인입니다.
*증분 빌드란?
효율적일 빌드를 위해 이전에 빌드 된, 아직까지 최신 상태인 구성 요소는 다시 빌드 하지 않게 해주는 방식
PostCSS는 Sass(SCSS), LESS 등의 CSS 전처리기와 반대로 CSS 후처리기입니다.
JavaScript 기반 플러그인을 사용하는 소프트웨어 개발 도구로 특정 플러그인을 조합하여 원하는 CSS 변환 과정을 정의할 수 있습니다.
Autoprefixer는 PostCSS의 가장 유명한 플러그인 중 하나로,
벤더 접두사(Vendor Prefix. '-webkit-', '-moz-', '-ms-', '-o-')를 자동으로 추가해 주는 역할을 합니다.
다양한 브라우저에 호환되는 CSS를 작성하고 Autoprefixer를 사용하면,
해당 브라우저의 벤더 접두사를 자동으로 추가해 일관된 스타일을 유지할 수 있습니다.
/* 컴파일 전 Sass(SCSS) 코드 */
.box {
display: flex;
flex-direction: column;
}
/* 컴파일 후 Autoprefixer가 적용 된 CSS 코드 */
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
소스맵(sourcemaps)은 쉽게 말해 코드 상의 위치를 알려주는 것을 의미합니다.
일반 css를 사용하면 우리가 하던 일반적인 방법으로 개발자 모드를 통해 해당 엘리먼드에 적용된 style를 찾아 편리하게 디버깅을 할 수 있습니다.
하지만 Sass(SCSS)을 사용하면 html에 원본(Sass(SCSS))이 아닌 컴파일된 CSS 파일을 link 하기 때문에
개발자 모드에서 디버깅하기에 어려움이 있습니다.
(Sass(SCSS)는 웹에서 직접 동작하지 않으므로 컴파일 후 CSS 파일을 연결해야 합니다.)
// Sass(SCSS) 직접 링크의 잘못된 예 (CSS가 적용되지 않습니다.)
<link href="style.scss" rel="stylesheet" />
// style.scss로 작업 후 컴파일 된 style.css로 연결해야 합니다.
<link href="style.css" rel="stylesheet" />
gulp-sourcemaps를 설정하면 개발자 모드에서 Sass(SCSS) 파일의 위치를 알려주기 때문에 위에 언급된 불편함을 해소할 수 있습니다.
gulp-minify-css는 CSS를 압축하여 코드를 최소화할 수 있습니다.
줄바꿈과 띄어쓰기도 각각 1byte의 용량을 차지합니다.
짧은 CSS의 경우 용량의 압박이 없지만 코드가 많은 CSS일 경우 부담이 될 수 있습니다.
gulp-minify-css를 이용해서 줄바꿈 띄어쓰기를 제거하여 용량을 줄이고, 줄인 용량만큼 파일 전송량도 줄일 수 있습니다.
gulp-minify-css로 압축한 코드를,
gulp-rename를 이용하여 파일의 이름을 변경하여 새 파일을 생성할 수 있습니다.
압축된 새 파일의 이름에는 보통 minify의 줄임으로 min 이라는 이름을 붙입니다.
따라서 컴파일 후 파일명.css, 파일명.min.css 이렇게 두 개의 파일이 생성됩니다.
이 과정을 생략한다고 해서 표준에 어긋나거나 오류가 발생하는 것은 아닙니다.
하지만 사이트를 최적화하는 목적으로 조금의 용량이라도 줄일 수 있다면 의미가 있습니다.
gulpfile.babel.js 파일의 코드를 아래처럼 추가 및 수정합니다. (영역별 설명은 주석으로 대체합니다.)
변경이 없는 부분은 생략되며,
추가된 부분과 수정, 삭제된 부분의 코드만 표시됩니다.
또한 변경 없음,
추가된 부분,
수정, 삭제된 부분을 표시하는 텍스트는 마우스 드래그로 선택되지 않으므로 편리하게 코드를 복사할 수 있습니다.
전체 코드는 에디터기 오른쪽 [View full code]를 클릭하여 확인할 수 있습니다.
// import -----------------------------------------------------------
// ··· 기존 import 생략 ···
import gulpSass from "gulp-sass";
import dartSass from "dart-sass";
import sourcemaps from "gulp-sourcemaps";
import minificss from "gulp-minify-css";
import autoprefixer from "autoprefixer";
import postCss from "gulp-postcss";
import rename from "gulp-rename";
import dependents from "gulp-dependents";
// routes -----------------------------------------------------------
// etc --------------------------------------------------------------
// task -------------------------------------------------------------
// html task
// css task
const css = () => {
//scss 옵션 정의
const sass = gulpSass(dartSass); // ECMAScript 모듈(최신 Node.js 14 이상에서 지원됨)에서 사용하기 위해 선언
const options = {
scss : {
outputStyle: "expanded", // 컴파일 스타일: nested(default), expanded, compact, compressed
indentType: "space", // 들여쓰기 스타일: space(default), tab
indentWidth: 2, // 들여쓰기 칸 수 (Default : 2)
precision: 8, // 컴파일 된 CSS 의 소수점 자리수 (Type : Integer , Default : 5)
sourceComments: true, // 주석 제거 여부 (Default : false)
compiler: dartSass, // 컴파일 도구
},
postcss: [ autoprefixer({
overrideBrowserslist: 'last 2 versions', // 최신 브라우저 기준 하위 2개의 버전까지 컴파일
}) ]
};
return gulp.src(
path_src.css + '/**/*.scss', // 컴파일 대상 scss파일 찾기
{ since: gulp.lastRun(css) } // 변경된 파일에 대해서만 컴파일 진행
)
.pipe( plumber({errorHandler:onErrorHandler}) ) // 에러 발생 시 gulp종료 방지 및 에러 핸들링
// *.css 생성
.pipe( dependents() ) // 현재 스트림에 있는 파일에 종속되는 모든 파일을 추가
.pipe( sourcemaps.init() ) // 소스맵 작성
.pipe( sass(options.scss).on('error', sass.logError) ) // scss 옵션 적용 및 에러 발생 시 watch가 멈추지 않도록 logError 설정
.pipe( postCss(options.postcss) ) // 하위 브라우저 고려
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ) // 컴파일 후 css파일이 생성될 목적지 설정
// *.min.css 생성
.pipe( minificss() ) // 컴파일된 css 압축
.pipe( rename({ suffix: '.min' }) ) // 압축파일 *.min.css 생성
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ); // 컴파일 후 css파일이 생성될 목적지 설정
}
// clean task
// webserver task
// watch task
const watch = () => {
// njk(html) watch
const html_watcher = gulp.watch(path_src.html + "/**/*", html);
file_management(html_watcher, path_src.html, path_dist.html);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
}
// watch - 파일 감시 및 삭제를 위한 함수
// series & parallel (task 그룹화) ----------------------------------
// 순차적으로 실행되어야 하는 task 그룹
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
const assets = gulp.series([ html, css ]);
// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행)
// export (gulp 실행 명령어) ----------------------------------------
// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행
// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행
// import -----------------------------------------------------------
import gulp from "gulp";
import nunjucksRender from "gulp-nunjucks-render";
import plumber from "gulp-plumber";
import data from "gulp-data";
import cached from "gulp-cached";
import fs from "fs";
import del from "del";
import ws from "gulp-webserver";
import path from "path";
import gulpSass from "gulp-sass";
import dartSass from "dart-sass";
import sourcemaps from "gulp-sourcemaps";
import minificss from "gulp-minify-css";
import autoprefixer from "autoprefixer";
import postCss from "gulp-postcss";
import rename from "gulp-rename";
import dependents from "gulp-dependents";
// routes -----------------------------------------------------------
const src = './src';
const dist = './dist';
const ass = '/assets';
// src 폴더의 경로 설정
const path_src = {
html: src + '/html',
css: src + ass + '/css',
images: src + ass + '/images',
js: src + ass + '/js',
}
// 빌드될 dist 폴더의 경로 설정
const path_dist = {
html: dist,
css: dist + ass + '/css',
images: dist + ass + '/images',
js: dist + ass + '/js',
};
// etc --------------------------------------------------------------
const onErrorHandler = (error) => console.log(error); // plumber option (에러 발생 시 에러 로그 출력)
// task -------------------------------------------------------------
// html task
const html = () => {
// 들여쓰기(Tab Indent) 조정을 위한 함수
const manageEnvironment = (environment) => {
environment.addFilter('tabIndent', (str, numOfIndents, firstLine) => {
str = str.replace(/^(?=.)/gm, new Array(numOfIndents + 1).join('\t'));
if(!firstLine) {
str = str.replace(/^\s+/, "");
}
return str;
});
};
// _gnb.json 파일 적용을 위한 변수
const gnbJson = JSON.parse(fs.readFileSync(path_src.html + '/_templates/_json/_gnb.json'));
const json_all = {...gnbJson};
const datafile = () => {
return json_all;
}
// njk 빌드
return gulp.src([
path_src.html + '/**/*', // 빌드할 njk 파일 경로
'!' + path_src.html + '/**/_*', // 경로 중 제외할 njk 파일(빌드 때 병합될 파일)
'!' + path_src.html + '/**/_*/**/*' // 경로 중 제외할 폴더 및 폴더의 njk 파일(빌드 때 병합될 파일)
])
.pipe( plumber({errorHandler:onErrorHandler}) ) // 에러 발생 시 gulp 종료 방지 및 에러 핸들링
.pipe( data( datafile) ) // _gnb.json 적용
.pipe( nunjucksRender({ // njk 적용
envOptions: { // njk 옵션 설정
autoescape: false, // njk 문법의 오류가 있더라도 진행
},
manageEnv: manageEnvironment, // 들여쓰기(Tab Indent) 함수 적용
path: [path_src.html], // html 폴더 전체 경로
}) )
.pipe( cached('html') ) // 변경된 파일 캐시 저장
.pipe( gulp.dest(path_dist.html) ) // 빌드 후 html 파일이 생성될 목적지 설정
}
// css task
const css = () => {
//scss 옵션 정의
const sass = gulpSass(dartSass); // ECMAScript 모듈(최신 Node.js 14 이상에서 지원됨)에서 사용하기 위해 선언
const options = {
scss : {
outputStyle: "expanded", // 컴파일 스타일: nested(default), expanded, compact, compressed
indentType: "space", // 들여쓰기 스타일: space(default), tab
indentWidth: 2, // 들여쓰기 칸 수 (Default : 2)
precision: 8, // 컴파일 된 CSS 의 소수점 자리수 (Type : Integer , Default : 5)
sourceComments: true, // 주석 제거 여부 (Default : false)
compiler: dartSass, // 컴파일 도구
},
postcss: [ autoprefixer({
overrideBrowserslist: 'last 2 versions', // 최신 브라우저 기준 하위 2개의 버전까지 컴파일
}) ]
};
return gulp.src(
path_src.css + '/**/*.scss', // 컴파일 대상 scss파일 찾기
{ since: gulp.lastRun(css) } // 변경된 파일에 대해서만 컴파일 진행
)
.pipe( plumber({errorHandler:onErrorHandler}) ) // 에러 발생 시 gulp종료 방지 및 에러 핸들링
// *.css 생성
.pipe( dependents() ) // 현재 스트림에 있는 파일에 종속되는 모든 파일을 추가
.pipe( sourcemaps.init() ) // 소스맵 작성
.pipe( sass(options.scss).on('error', sass.logError) ) // scss 옵션 적용 및 에러 발생 시 watch가 멈추지 않도록 logError 설정
.pipe( postCss(options.postcss) ) // 하위 브라우저 고려
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ) // 컴파일 후 css파일이 생성될 목적지 설정
// *.min.css 생성
.pipe( minificss() ) // 컴파일된 css 압축
.pipe( rename({ suffix: '.min' }) ) // 압축파일 *.min.css 생성
.pipe( sourcemaps.write() ) // 소스맵 적용
.pipe( gulp.dest(path_dist.css) ); // 컴파일 후 css파일이 생성될 목적지 설정
}
// clean task
const clean = () => del([dist]); // dist 폴더 삭제
// webserver task
const webserver = () => {
return gulp.src(dist) // webserver를 실행 할 폴더 경로
.pipe(
ws({ // webserver 옵션 설정
// port: 8000, // 기본 8000, 필요 시 변경 가능
livereload: true, // 작업 중 파일 저장 시 브라우저 자동 새로고침 (기본 false)
open: true // Gulp 실행 시 자동으로 브라우저를 띄우고 localhost 서버 열기 (기본 false)
})
);
}
// watch task
const watch = () => {
// njk(html) watch
const html_watcher = gulp.watch(path_src.html + "/**/*", html);
file_management(html_watcher, path_src.html, path_dist.html);
// sass watch
const scss_watcher = gulp.watch(path_src.css + "/**/*", css);
file_management(scss_watcher, path_src.css, path_dist.css);
}
// watch - 파일 감시 및 삭제를 위한 함수
const file_management = (watcher_target, src_path, dist_path) => {
watcher_target.on('unlink', (filepath) => {
const filePathFromSrc = path.relative(path.resolve(src_path), filepath);
const extension_type = filePathFromSrc.split('.')[filePathFromSrc.split('.').length-1];
// scss 삭제 (min 파일까지 삭제)
if( extension_type === 'scss' ){
const destFilePath_css = path.resolve(dist_path, filePathFromSrc).replace('.scss','.css');
del.sync(destFilePath_css);
const destFilePath_minCss = path.resolve(dist_path, filePathFromSrc).replace('.scss','.min.css');
del.sync(destFilePath_minCss);
}
// js 삭제 (min 파일까지 삭제)
else if( extension_type === 'js' ){
const destFilePath_js = path.resolve(dist_path, filePathFromSrc);
del.sync(destFilePath_js);
const destFilePath_minJs = path.resolve(dist_path, filePathFromSrc).replace('.js','.min.js');
del.sync(destFilePath_minJs);
}
// njk(html) 삭제
else if( extension_type === 'njk' ){
const destFilePath_html = path.resolve(dist_path, filePathFromSrc).replace('.njk','.html');
console.log(destFilePath_html);
del.sync(destFilePath_html);
}
// 위 파일 외 삭제
else{
const destFilePath = path.resolve(dist_path, filePathFromSrc);
console.log(destFilePath);
del.sync(destFilePath);
}
});
}
// series & parallel (task 그룹화) ----------------------------------
// 순차적으로 실행되어야 하는 task 그룹
const prepare = gulp.series([ clean ]);
// 위 prepare 실행 완료 후 순차적으로 실행되어야 하는 task 그룹
const assets = gulp.series([ html, css ]);
// 동시에 여러 개의 task가 실행되어야 하는 그룹 (병렬로 실행)
const live = gulp.parallel([ webserver, watch ]);
// export (gulp 실행 명령어) ----------------------------------------
// gulp build 실행 (prepare 실행 후 assets 실행) - build만 실행
export const build = gulp.series([ prepare, assets ]);
// gulp dev 실행 (build 실행 후 live 실행) - build 실행 후 live 실행
export const dev = gulp.series([ build, live ]);
gulpfile.babel.js 파일을 세팅한 후 터미널에서 아래 명령을 실행합니다.
gulp dev
Gulp가 샐행되고 터미널에 Gulp의 작업 내용이 출력됩니다.
세팅한 작업 순서에 따라 html 다음으로
css가 실행되는 것을 확인할 수 있습니다.
간혹 css task 사이에 아래와 같이 browserslist를 업데이트하라는 메시지가 출력이 되는 경우가 있습니다.
지속적으로 업데이트되는 브라우저에 대응하기 위한 것으로, 이 메시지가 노출되면 Gulp를 종료(ctrl + c and y)하고 업데이트를 진행합니다.
터미널에서 아래 명령을 실행합니다.
npx update-browserslist-db@latest
자동으로 설치가 완료되지 않고 중간에 설치를 계속 진행할지 물어보는 단계가 있습니다. (아래 이미지 빨간 줄)
y 클릭 후 설치를 계속합니다.
위 이미지처럼 출력되면 browserslist가 성공적으로 업데이트되고, 업데이트 메시지가 당분간 나오지 않습니다.
browserslist는 지속적으로 업데이트되기 때문에 시간이 지나면 다시 나타납니다.
미리 세팅한 SCSS가 CSS로 컴파일 되어 브라우저에 적용됩니다.
dist > assets > css 폴더 안에 style.css와 style.min.css
파일이 컴파일 되어 있는 것을 확인할 수 있습니다.
src 폴더의 _reset.scss와 _variable.scss는
style.scss에 병합되어 컴파일 되기 때문에
dist 폴더에는 존재하지 않습니다.
병합된 _reset.scss 코드와 브라우저별 접두어가 적용된 css 결과물을 확인합니다.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
html {
background-color: #ddd;
}
.wrap {
margin: 0 20px;
}
.wrap .header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 15px;
background-color: #ccc;
}
.wrap .container h1 {
margin-top: 20px;
font-size: 26px;
font-weight: bolder;
color: #006be2;
}
.wrap .container .image_box {
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 20px;
padding: 10px;
background-color: #fff;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}
.wrap .footer {
margin-top: 20px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIl9yZXNldC5zY3NzIiwic3R5bGUuY3NzIiwic3R5bGUuc2NzcyIsIl92YXJpYWJsZS5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBOzs7Ozs7Ozs7Ozs7O0VBYUMsU0FBQTtFQUNBLFVBQUE7RUFDQSxTQUFBO0VBQ0EsZUFBQTtFQUNBLGFBQUE7RUFDQSx3QkFBQTtBQ0NEOztBRENBLGdEQUFBO0FBQ0E7O0VBRUMsY0FBQTtBQ0VEOztBREFBO0VBQ0MsY0FBQTtBQ0dEOztBRERBO0VBQ0MsZ0JBQUE7QUNJRDs7QURGQTtFQUNDLFlBQUE7QUNLRDs7QURIQTs7RUFFQyxXQUFBO0VBQ0EsYUFBQTtBQ01EOztBREpBO0VBQ0MseUJBQUE7RUFDQSxpQkFBQTtBQ09EOztBQzVDQTtFQUNDLHNCQ0xVO0FGb0RYOztBQzVDQTtFQUNDLGNBQUE7QUQrQ0Q7QUM3Q0M7RUFDQyxvQkFBQTtFQUFBLG9CQUFBO0VBQUEsYUFBQTtFQUNBLHlCQUFBO01BQUEsc0JBQUE7VUFBQSxtQkFBQTtFQUNBLHlCQUFBO01BQUEsc0JBQUE7VUFBQSw4QkFBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtBRCtDRjtBQzNDRTtFQUNDLGdCQUFBO0VBQ0EsZUFBQTtFQUNBLG1CQUFBO0VBQ0EsY0N2QlU7QUZvRWI7QUMzQ0U7RUFDQyxnQkFBQTtFQUNBLG9CQUFBO0VBQUEsb0JBQUE7RUFBQSxhQUFBO0VBQ0EsNEJBQUE7RUFBQSw2QkFBQTtNQUFBLDBCQUFBO1VBQUEsc0JBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7RUFDQSxzQkFBQTtFQUNBLCtDQUFBO1VBQUEsdUNBQUE7RUFDQSxtQkFBQTtBRDZDSDtBQ3pDQztFQUNDLGdCQUFBO0FEMkNGIiwiZmlsZSI6InN0eWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwsIGJvZHksIGRpdiwgc3BhbiwgYXBwbGV0LCBvYmplY3QsIGlmcmFtZSxcclxuaDEsIGgyLCBoMywgaDQsIGg1LCBoNiwgcCwgYmxvY2txdW90ZSwgcHJlLFxyXG5hLCBhYmJyLCBhY3JvbnltLCBhZGRyZXNzLCBiaWcsIGNpdGUsIGNvZGUsXHJcbmRlbCwgZGZuLCBlbSwgaW1nLCBpbnMsIGtiZCwgcSwgcywgc2FtcCxcclxuc21hbGwsIHN0cmlrZSwgc3Ryb25nLCBzdWIsIHN1cCwgdHQsIHZhcixcclxuYiwgdSwgaSwgY2VudGVyLFxyXG5kbCwgZHQsIGRkLCBvbCwgdWwsIGxpLFxyXG5maWVsZHNldCwgZm9ybSwgbGFiZWwsIGxlZ2VuZCxcclxudGFibGUsIGNhcHRpb24sIHRib2R5LCB0Zm9vdCwgdGhlYWQsIHRyLCB0aCwgdGQsXHJcbmFydGljbGUsIGFzaWRlLCBjYW52YXMsIGRldGFpbHMsIGVtYmVkLFxyXG5maWd1cmUsIGZpZ2NhcHRpb24sIGZvb3RlciwgaGVhZGVyLCBoZ3JvdXAsXHJcbm1lbnUsIG5hdiwgb3V0cHV0LCBydWJ5LCBzZWN0aW9uLCBzdW1tYXJ5LFxyXG50aW1lLCBtYXJrLCBhdWRpbywgdmlkZW8ge1xyXG5cdG1hcmdpbjogMDtcclxuXHRwYWRkaW5nOiAwO1xyXG5cdGJvcmRlcjogMDtcclxuXHRmb250LXNpemU6IDEwMCU7XHJcblx0Zm9udDogaW5oZXJpdDtcclxuXHR2ZXJ0aWNhbC1hbGlnbjogYmFzZWxpbmU7XHJcbn1cclxuLyogSFRNTDUgZGlzcGxheS1yb2xlIHJlc2V0IGZvciBvbGRlciBicm93c2VycyAqL1xyXG5hcnRpY2xlLCBhc2lkZSwgZGV0YWlscywgZmlnY2FwdGlvbiwgZmlndXJlLFxyXG5mb290ZXIsIGhlYWRlciwgaGdyb3VwLCBtZW51LCBuYXYsIHNlY3Rpb24ge1xyXG5cdGRpc3BsYXk6IGJsb2NrO1xyXG59XHJcbmJvZHkge1xyXG5cdGxpbmUtaGVpZ2h0OiAxO1xyXG59XHJcbm9sLCB1bCB7XHJcblx0bGlzdC1zdHlsZTogbm9uZTtcclxufVxyXG5ibG9ja3F1b3RlLCBxIHtcclxuXHRxdW90ZXM6IG5vbmU7XHJcbn1cclxuYmxvY2txdW90ZTpiZWZvcmUsIGJsb2NrcXVvdGU6YWZ0ZXIsXHJcbnE6YmVmb3JlLCBxOmFmdGVyIHtcclxuXHRjb250ZW50OiAnJztcclxuXHRjb250ZW50OiBub25lO1xyXG59XHJcbnRhYmxlIHtcclxuXHRib3JkZXItY29sbGFwc2U6IGNvbGxhcHNlO1xyXG5cdGJvcmRlci1zcGFjaW5nOiAwO1xyXG59IiwiaHRtbCwgYm9keSwgZGl2LCBzcGFuLCBhcHBsZXQsIG9iamVjdCwgaWZyYW1lLFxuaDEsIGgyLCBoMywgaDQsIGg1LCBoNiwgcCwgYmxvY2txdW90ZSwgcHJlLFxuYSwgYWJiciwgYWNyb255bSwgYWRkcmVzcywgYmlnLCBjaXRlLCBjb2RlLFxuZGVsLCBkZm4sIGVtLCBpbWcsIGlucywga2JkLCBxLCBzLCBzYW1wLFxuc21hbGwsIHN0cmlrZSwgc3Ryb25nLCBzdWIsIHN1cCwgdHQsIHZhcixcbmIsIHUsIGksIGNlbnRlcixcbmRsLCBkdCwgZGQsIG9sLCB1bCwgbGksXG5maWVsZHNldCwgZm9ybSwgbGFiZWwsIGxlZ2VuZCxcbnRhYmxlLCBjYXB0aW9uLCB0Ym9keSwgdGZvb3QsIHRoZWFkLCB0ciwgdGgsIHRkLFxuYXJ0aWNsZSwgYXNpZGUsIGNhbnZhcywgZGV0YWlscywgZW1iZWQsXG5maWd1cmUsIGZpZ2NhcHRpb24sIGZvb3RlciwgaGVhZGVyLCBoZ3JvdXAsXG5tZW51LCBuYXYsIG91dHB1dCwgcnVieSwgc2VjdGlvbiwgc3VtbWFyeSxcbnRpbWUsIG1hcmssIGF1ZGlvLCB2aWRlbyB7XG4gIG1hcmdpbjogMDtcbiAgcGFkZGluZzogMDtcbiAgYm9yZGVyOiAwO1xuICBmb250LXNpemU6IDEwMCU7XG4gIGZvbnQ6IGluaGVyaXQ7XG4gIHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcbn1cblxuLyogSFRNTDUgZGlzcGxheS1yb2xlIHJlc2V0IGZvciBvbGRlciBicm93c2VycyAqL1xuYXJ0aWNsZSwgYXNpZGUsIGRldGFpbHMsIGZpZ2NhcHRpb24sIGZpZ3VyZSxcbmZvb3RlciwgaGVhZGVyLCBoZ3JvdXAsIG1lbnUsIG5hdiwgc2VjdGlvbiB7XG4gIGRpc3BsYXk6IGJsb2NrO1xufVxuXG5ib2R5IHtcbiAgbGluZS1oZWlnaHQ6IDE7XG59XG5cbm9sLCB1bCB7XG4gIGxpc3Qtc3R5bGU6IG5vbmU7XG59XG5cbmJsb2NrcXVvdGUsIHEge1xuICBxdW90ZXM6IG5vbmU7XG59XG5cbmJsb2NrcXVvdGU6YmVmb3JlLCBibG9ja3F1b3RlOmFmdGVyLFxucTpiZWZvcmUsIHE6YWZ0ZXIge1xuICBjb250ZW50OiBcIlwiO1xuICBjb250ZW50OiBub25lO1xufVxuXG50YWJsZSB7XG4gIGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XG4gIGJvcmRlci1zcGFjaW5nOiAwO1xufVxuXG5odG1sIHtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2RkZDtcbn1cblxuLndyYXAge1xuICBtYXJnaW46IDAgMjBweDtcbn1cbi53cmFwIC5oZWFkZXIge1xuICBkaXNwbGF5OiBmbGV4O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XG4gIHBhZGRpbmc6IDE1cHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNjY2M7XG59XG4ud3JhcCAuY29udGFpbmVyIGgxIHtcbiAgbWFyZ2luLXRvcDogMjBweDtcbiAgZm9udC1zaXplOiAyNnB4O1xuICBmb250LXdlaWdodDogYm9sZGVyO1xuICBjb2xvcjogIzAwNmJlMjtcbn1cbi53cmFwIC5jb250YWluZXIgLmltYWdlX2JveCB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIG1hcmdpbi10b3A6IDIwcHg7XG4gIHBhZGRpbmc6IDEwcHg7XG4gIGJhY2tncm91bmQtY29sb3I6ICNmZmY7XG4gIGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwgMCwgMCwgMC4xKTtcbiAgYm9yZGVyLXJhZGl1czogMTBweDtcbn1cbi53cmFwIC5mb290ZXIge1xuICBtYXJnaW4tdG9wOiAyMHB4O1xufSIsIkBjaGFyc2V0IFwidXRmLThcIjtcclxuQGltcG9ydCAnX3Jlc2V0JztcclxuQGltcG9ydCAnX3ZhcmlhYmxlJztcclxuXHJcbmh0bWwge1xyXG5cdGJhY2tncm91bmQtY29sb3I6ICRiZy1jb2xvcjtcclxufVxyXG5cclxuLndyYXAge1xyXG5cdG1hcmdpbjowIDIwcHg7XHJcblxyXG5cdC5oZWFkZXIge1xyXG5cdFx0ZGlzcGxheTogZmxleDtcclxuXHRcdGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcblx0XHRqdXN0aWZ5LWNvbnRlbnQ6IHNwYWNlLWJldHdlZW47XHJcblx0XHRwYWRkaW5nOiAxNXB4O1xyXG5cdFx0YmFja2dyb3VuZC1jb2xvcjogI2NjYztcclxuXHR9XHJcblxyXG5cdC5jb250YWluZXIge1xyXG5cdFx0aDEge1xyXG5cdFx0XHRtYXJnaW4tdG9wOiAyMHB4O1xyXG5cdFx0XHRmb250LXNpemU6IDI2cHg7XHJcblx0XHRcdGZvbnQtd2VpZ2h0OiBib2xkZXI7XHJcblx0XHRcdGNvbG9yOiAkZm9udC1jb2xvcjtcclxuXHRcdH1cclxuXHRcdC5pbWFnZV9ib3gge1xyXG5cdFx0XHRvdmVyZmxvdzpoaWRkZW47XHJcblx0XHRcdGRpc3BsYXk6IGZsZXg7XHJcblx0XHRcdGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XHJcblx0XHRcdG1hcmdpbi10b3A6IDIwcHg7XHJcblx0XHRcdHBhZGRpbmc6IDEwcHg7XHJcblx0XHRcdGJhY2tncm91bmQtY29sb3I6ICNmZmY7XHJcblx0XHRcdGJveC1zaGFkb3c6IDAgMCAxMHB4IHJnYmEoMCwwLDAsLjEpO1xyXG5cdFx0XHRib3JkZXItcmFkaXVzOiAxMHB4O1xyXG5cdFx0fVxyXG5cdH1cclxuXHJcblx0LmZvb3RlciB7XHJcblx0XHRtYXJnaW4tdG9wOiAyMHB4O1xyXG5cdH1cclxufSIsIiRiZy1jb2xvcjogI2RkZDtcclxuJGZvbnQtY29sb3I6ICMwMDZiZTI7Il19 */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{background-color:#ddd}.wrap{margin:0 20px}.wrap .header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:15px;background-color:#ccc}.wrap .container h1{margin-top:20px;font-size:26px;font-weight:bolder;color:#006be2}.wrap .container .image_box{overflow:hidden;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;margin-top:20px;padding:10px;background-color:#fff;-webkit-box-shadow:0 0 10px rgba(0,0,0,.1);box-shadow:0 0 10px rgba(0,0,0,.1);border-radius:10px}.wrap .footer{margin-top:20px}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLmNzcyIsIl9yZXNldC5zY3NzIiwic3R5bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxFQUFHLEtBQU0sUUFBUyxRQ0ZsQixPRFNBLFFBQVMsTUFHRyxNQVBaLEVBSDJCLElBREEsV0NEM0IsS0RTZ0IsT0FEVCxRQUhFLE9BSHVCLEtBQU0sS0FJOUIsR0FIUixJQU13QixRQU5uQixJQ0hMLElETUEsR0FBSSxHQUhNLEdBTXVCLE1BRmpDLFNBR1EsV0FBUixPQUFvQixPQUhWLEtBTlYsR0FBSSxHQUFJLEdBQUksR0FBSSxHQUFJLEdBU1EsT0FBUSxPQ1ZwQyxLREtNLEVDTE4sT0RHYyxJQUFLLElBQUssSUFJUixNQUFPLE9BREgsR0FNZCxLQUROLEtBQU0sSUNYTixPRE1ZLEdBS0QsT0FWYSxFQUFlLElBRVYsRUFRVixLQVJhLEVBQUcsS0FRVixRQVB6QixNQ0pBLEtESU8sT0FBUSxPQUFRLElBT1csUUFQTixJQUk1QixNQUFnQixNQUE2QixHQUF0QixNQUFrQixHQUFYLE1BSTlCLEtBSnFDLEdBSkosR0FDOUIsRUFDYSxHQUZxQixJQVFsQixNQ0NsQixPQUFBLEVBQ0EsUUFBQSxFQUNBLE9BQUEsRUFFQSxLQUFBLFFBQ0EsZUFBQSxTQUdELFFBQUEsTUFBQSxRQUFBLFdBQUEsT0RFQSxPQUFRLE9BQVEsT0FBUSxLQUFNLElBQUssUUNBbEMsUUFBQSxNQUVELEtBQ0MsWUFBQSxFQUVELEdBQUEsR0FDQyxXQUFBLEtBRUQsV0FBQSxFQUNDLE9BQUEsS0FFRCxpQkFBQSxrQkRNVSxRQUFWLFNDSkMsUUFBQSxHQUNBLFFBQUEsS0FFRCxNQUNDLGdCQUFBLFNBQ0EsZUFBQSxFQ3JDRCxLQUNDLGlCQUFBLEtBR0QsTUFDQyxPQUFBLEVBQUEsS0FFQSxjQUNDLFFBQUEsWUFBQSxRQUFBLFlBQUEsUUFBQSxLQUNBLGtCQUFBLE9BQUEsZUFBQSxPQUFBLFlBQUEsT0FDQSxpQkFBQSxRQUFBLGNBQUEsUUFBQSxnQkFBQSxjQUNBLFFBQUEsS0FDQSxpQkFBQSxLQUlBLG9CQUNDLFdBQUEsS0FDQSxVQUFBLEtBQ0EsWUFBQSxPQUNBLE1BQUEsUUFFRCw0QkFDQyxTQUFBLE9BQ0EsUUFBQSxZQUFBLFFBQUEsWUFBQSxRQUFBLEtBQ0EsbUJBQUEsU0FBQSxzQkFBQSxPQUFBLG1CQUFBLE9BQUEsZUFBQSxPQUNBLFdBQUEsS0FDQSxRQUFBLEtBQ0EsaUJBQUEsS0FDQSxtQkFBQSxFQUFBLEVBQUEsS0FBQSxlQUFBLFdBQUEsRUFBQSxFQUFBLEtBQUEsZUFDQSxjQUFBLEtBSUYsY0FDQyxXQUFBIiwiZmlsZSI6InN0eWxlLm1pbi5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJodG1sLCBib2R5LCBkaXYsIHNwYW4sIGFwcGxldCwgb2JqZWN0LCBpZnJhbWUsXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2LCBwLCBibG9ja3F1b3RlLCBwcmUsXG5hLCBhYmJyLCBhY3JvbnltLCBhZGRyZXNzLCBiaWcsIGNpdGUsIGNvZGUsXG5kZWwsIGRmbiwgZW0sIGltZywgaW5zLCBrYmQsIHEsIHMsIHNhbXAsXG5zbWFsbCwgc3RyaWtlLCBzdHJvbmcsIHN1Yiwgc3VwLCB0dCwgdmFyLFxuYiwgdSwgaSwgY2VudGVyLFxuZGwsIGR0LCBkZCwgb2wsIHVsLCBsaSxcbmZpZWxkc2V0LCBmb3JtLCBsYWJlbCwgbGVnZW5kLFxudGFibGUsIGNhcHRpb24sIHRib2R5LCB0Zm9vdCwgdGhlYWQsIHRyLCB0aCwgdGQsXG5hcnRpY2xlLCBhc2lkZSwgY2FudmFzLCBkZXRhaWxzLCBlbWJlZCxcbmZpZ3VyZSwgZmlnY2FwdGlvbiwgZm9vdGVyLCBoZWFkZXIsIGhncm91cCxcbm1lbnUsIG5hdiwgb3V0cHV0LCBydWJ5LCBzZWN0aW9uLCBzdW1tYXJ5LFxudGltZSwgbWFyaywgYXVkaW8sIHZpZGVvIHtcbiAgbWFyZ2luOiAwO1xuICBwYWRkaW5nOiAwO1xuICBib3JkZXI6IDA7XG4gIGZvbnQtc2l6ZTogMTAwJTtcbiAgZm9udDogaW5oZXJpdDtcbiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lO1xufVxuXG4vKiBIVE1MNSBkaXNwbGF5LXJvbGUgcmVzZXQgZm9yIG9sZGVyIGJyb3dzZXJzICovXG5hcnRpY2xlLCBhc2lkZSwgZGV0YWlscywgZmlnY2FwdGlvbiwgZmlndXJlLFxuZm9vdGVyLCBoZWFkZXIsIGhncm91cCwgbWVudSwgbmF2LCBzZWN0aW9uIHtcbiAgZGlzcGxheTogYmxvY2s7XG59XG5cbmJvZHkge1xuICBsaW5lLWhlaWdodDogMTtcbn1cblxub2wsIHVsIHtcbiAgbGlzdC1zdHlsZTogbm9uZTtcbn1cblxuYmxvY2txdW90ZSwgcSB7XG4gIHF1b3Rlczogbm9uZTtcbn1cblxuYmxvY2txdW90ZTpiZWZvcmUsIGJsb2NrcXVvdGU6YWZ0ZXIsXG5xOmJlZm9yZSwgcTphZnRlciB7XG4gIGNvbnRlbnQ6IFwiXCI7XG4gIGNvbnRlbnQ6IG5vbmU7XG59XG5cbnRhYmxlIHtcbiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTtcbiAgYm9yZGVyLXNwYWNpbmc6IDA7XG59XG5cbmh0bWwge1xuICBiYWNrZ3JvdW5kLWNvbG9yOiAjZGRkO1xufVxuXG4ud3JhcCB7XG4gIG1hcmdpbjogMCAyMHB4O1xufVxuLndyYXAgLmhlYWRlciB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGFsaWduLWl0ZW1zOiBjZW50ZXI7XG4gIGp1c3RpZnktY29udGVudDogc3BhY2UtYmV0d2VlbjtcbiAgcGFkZGluZzogMTVweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2NjYztcbn1cbi53cmFwIC5jb250YWluZXIgaDEge1xuICBtYXJnaW4tdG9wOiAyMHB4O1xuICBmb250LXNpemU6IDI2cHg7XG4gIGZvbnQtd2VpZ2h0OiBib2xkZXI7XG4gIGNvbG9yOiAjMDA2YmUyO1xufVxuLndyYXAgLmNvbnRhaW5lciAuaW1hZ2VfYm94IHtcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgbWFyZ2luLXRvcDogMjBweDtcbiAgcGFkZGluZzogMTBweDtcbiAgYmFja2dyb3VuZC1jb2xvcjogI2ZmZjtcbiAgYm94LXNoYWRvdzogMCAwIDEwcHggcmdiYSgwLCAwLCAwLCAwLjEpO1xuICBib3JkZXItcmFkaXVzOiAxMHB4O1xufVxuLndyYXAgLmZvb3RlciB7XG4gIG1hcmdpbi10b3A6IDIwcHg7XG59IiwiaHRtbCwgYm9keSwgZGl2LCBzcGFuLCBhcHBsZXQsIG9iamVjdCwgaWZyYW1lLFxyXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2LCBwLCBibG9ja3F1b3RlLCBwcmUsXHJcbmEsIGFiYnIsIGFjcm9ueW0sIGFkZHJlc3MsIGJpZywgY2l0ZSwgY29kZSxcclxuZGVsLCBkZm4sIGVtLCBpbWcsIGlucywga2JkLCBxLCBzLCBzYW1wLFxyXG5zbWFsbCwgc3RyaWtlLCBzdHJvbmcsIHN1Yiwgc3VwLCB0dCwgdmFyLFxyXG5iLCB1LCBpLCBjZW50ZXIsXHJcbmRsLCBkdCwgZGQsIG9sLCB1bCwgbGksXHJcbmZpZWxkc2V0LCBmb3JtLCBsYWJlbCwgbGVnZW5kLFxyXG50YWJsZSwgY2FwdGlvbiwgdGJvZHksIHRmb290LCB0aGVhZCwgdHIsIHRoLCB0ZCxcclxuYXJ0aWNsZSwgYXNpZGUsIGNhbnZhcywgZGV0YWlscywgZW1iZWQsXHJcbmZpZ3VyZSwgZmlnY2FwdGlvbiwgZm9vdGVyLCBoZWFkZXIsIGhncm91cCxcclxubWVudSwgbmF2LCBvdXRwdXQsIHJ1YnksIHNlY3Rpb24sIHN1bW1hcnksXHJcbnRpbWUsIG1hcmssIGF1ZGlvLCB2aWRlbyB7XHJcblx0bWFyZ2luOiAwO1xyXG5cdHBhZGRpbmc6IDA7XHJcblx0Ym9yZGVyOiAwO1xyXG5cdGZvbnQtc2l6ZTogMTAwJTtcclxuXHRmb250OiBpbmhlcml0O1xyXG5cdHZlcnRpY2FsLWFsaWduOiBiYXNlbGluZTtcclxufVxyXG4vKiBIVE1MNSBkaXNwbGF5LXJvbGUgcmVzZXQgZm9yIG9sZGVyIGJyb3dzZXJzICovXHJcbmFydGljbGUsIGFzaWRlLCBkZXRhaWxzLCBmaWdjYXB0aW9uLCBmaWd1cmUsXHJcbmZvb3RlciwgaGVhZGVyLCBoZ3JvdXAsIG1lbnUsIG5hdiwgc2VjdGlvbiB7XHJcblx0ZGlzcGxheTogYmxvY2s7XHJcbn1cclxuYm9keSB7XHJcblx0bGluZS1oZWlnaHQ6IDE7XHJcbn1cclxub2wsIHVsIHtcclxuXHRsaXN0LXN0eWxlOiBub25lO1xyXG59XHJcbmJsb2NrcXVvdGUsIHEge1xyXG5cdHF1b3Rlczogbm9uZTtcclxufVxyXG5ibG9ja3F1b3RlOmJlZm9yZSwgYmxvY2txdW90ZTphZnRlcixcclxucTpiZWZvcmUsIHE6YWZ0ZXIge1xyXG5cdGNvbnRlbnQ6ICcnO1xyXG5cdGNvbnRlbnQ6IG5vbmU7XHJcbn1cclxudGFibGUge1xyXG5cdGJvcmRlci1jb2xsYXBzZTogY29sbGFwc2U7XHJcblx0Ym9yZGVyLXNwYWNpbmc6IDA7XHJcbn0iLCJAY2hhcnNldCBcInV0Zi04XCI7XHJcbkBpbXBvcnQgJ19yZXNldCc7XHJcbkBpbXBvcnQgJ192YXJpYWJsZSc7XHJcblxyXG5odG1sIHtcclxuXHRiYWNrZ3JvdW5kLWNvbG9yOiAkYmctY29sb3I7XHJcbn1cclxuXHJcbi53cmFwIHtcclxuXHRtYXJnaW46MCAyMHB4O1xyXG5cclxuXHQuaGVhZGVyIHtcclxuXHRcdGRpc3BsYXk6IGZsZXg7XHJcblx0XHRhbGlnbi1pdGVtczogY2VudGVyO1xyXG5cdFx0anVzdGlmeS1jb250ZW50OiBzcGFjZS1iZXR3ZWVuO1xyXG5cdFx0cGFkZGluZzogMTVweDtcclxuXHRcdGJhY2tncm91bmQtY29sb3I6ICNjY2M7XHJcblx0fVxyXG5cclxuXHQuY29udGFpbmVyIHtcclxuXHRcdGgxIHtcclxuXHRcdFx0bWFyZ2luLXRvcDogMjBweDtcclxuXHRcdFx0Zm9udC1zaXplOiAyNnB4O1xyXG5cdFx0XHRmb250LXdlaWdodDogYm9sZGVyO1xyXG5cdFx0XHRjb2xvcjogJGZvbnQtY29sb3I7XHJcblx0XHR9XHJcblx0XHQuaW1hZ2VfYm94IHtcclxuXHRcdFx0b3ZlcmZsb3c6aGlkZGVuO1xyXG5cdFx0XHRkaXNwbGF5OiBmbGV4O1xyXG5cdFx0XHRmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xyXG5cdFx0XHRtYXJnaW4tdG9wOiAyMHB4O1xyXG5cdFx0XHRwYWRkaW5nOiAxMHB4O1xyXG5cdFx0XHRiYWNrZ3JvdW5kLWNvbG9yOiAjZmZmO1xyXG5cdFx0XHRib3gtc2hhZG93OiAwIDAgMTBweCByZ2JhKDAsMCwwLC4xKTtcclxuXHRcdFx0Ym9yZGVyLXJhZGl1czogMTBweDtcclxuXHRcdH1cclxuXHR9XHJcblxyXG5cdC5mb290ZXIge1xyXG5cdFx0bWFyZ2luLXRvcDogMjBweDtcclxuXHR9XHJcbn0iXX0= */
아래 동영상처럼 실시간으로 SCSS가 컴파일 되는지 확인해 보세요.