장선근
7 years ago
77 changed files with 66455 additions and 1 deletions
-
1.gitignore
-
40README.md
-
2dist/assets/css/style.min.css
-
1dist/assets/css/style.min.css.map
-
BINdist/assets/fonts/fa-brands-400.eot
-
3570dist/assets/fonts/fa-brands-400.svg
-
BINdist/assets/fonts/fa-brands-400.ttf
-
BINdist/assets/fonts/fa-brands-400.woff
-
BINdist/assets/fonts/fa-brands-400.woff2
-
BINdist/assets/fonts/fa-duotone-900.eot
-
15055dist/assets/fonts/fa-duotone-900.svg
-
BINdist/assets/fonts/fa-duotone-900.ttf
-
BINdist/assets/fonts/fa-duotone-900.woff
-
BINdist/assets/fonts/fa-duotone-900.woff2
-
BINdist/assets/fonts/fa-light-300.eot
-
12330dist/assets/fonts/fa-light-300.svg
-
BINdist/assets/fonts/fa-light-300.ttf
-
BINdist/assets/fonts/fa-light-300.woff
-
BINdist/assets/fonts/fa-light-300.woff2
-
BINdist/assets/fonts/fa-regular-400.eot
-
11256dist/assets/fonts/fa-regular-400.svg
-
BINdist/assets/fonts/fa-regular-400.ttf
-
BINdist/assets/fonts/fa-regular-400.woff
-
BINdist/assets/fonts/fa-regular-400.woff2
-
BINdist/assets/fonts/fa-solid-900.eot
-
9588dist/assets/fonts/fa-solid-900.svg
-
BINdist/assets/fonts/fa-solid-900.ttf
-
BINdist/assets/fonts/fa-solid-900.woff
-
BINdist/assets/fonts/fa-solid-900.woff2
-
2dist/assets/js/common.min.js
-
1dist/assets/js/common.min.js.map
-
34dist/index.html
-
113gulpfile.js
-
28package.json
-
29source.info.json
-
6src/html/include/footer.html
-
13src/html/include/header.html
-
12src/html/include/meta.html
-
2src/html/include/tail.html
-
5src/html/index.html
-
25src/icons/iconsTemplates.scss.handlebars
-
0src/js/common.js
-
862src/js/wheeparam.js
-
29src/scss/_variables.scss
-
3src/scss/boot/_fonts.scss
-
37src/scss/boot/_function.scss
-
125src/scss/boot/_mixins.scss
-
330src/scss/boot/_reset.scss
-
3src/scss/common/_animation.scss
-
3src/scss/common/_layout.scss
-
108src/scss/common/_utility.scss
-
3src/scss/components/_button.scss
-
3src/scss/components/_icons.scss
-
3src/scss/pages/main.scss
-
20src/scss/plugins/FontAwesome-5.13.0/_animated.scss
-
20src/scss/plugins/FontAwesome-5.13.0/_bordered-pulled.scss
-
21src/scss/plugins/FontAwesome-5.13.0/_core.scss
-
6src/scss/plugins/FontAwesome-5.13.0/_fixed-width.scss
-
2296src/scss/plugins/FontAwesome-5.13.0/_icons.scss
-
23src/scss/plugins/FontAwesome-5.13.0/_larger.scss
-
18src/scss/plugins/FontAwesome-5.13.0/_list.scss
-
56src/scss/plugins/FontAwesome-5.13.0/_mixins.scss
-
24src/scss/plugins/FontAwesome-5.13.0/_rotated-flipped.scss
-
5src/scss/plugins/FontAwesome-5.13.0/_screen-reader.scss
-
2066src/scss/plugins/FontAwesome-5.13.0/_shims.scss
-
31src/scss/plugins/FontAwesome-5.13.0/_stacked.scss
-
2313src/scss/plugins/FontAwesome-5.13.0/_variables.scss
-
23src/scss/plugins/FontAwesome-5.13.0/brands.scss
-
1916src/scss/plugins/FontAwesome-5.13.0/duotone.scss
-
16src/scss/plugins/FontAwesome-5.13.0/fontawesome.scss
-
23src/scss/plugins/FontAwesome-5.13.0/light.scss
-
23src/scss/plugins/FontAwesome-5.13.0/regular.scss
-
24src/scss/plugins/FontAwesome-5.13.0/solid.scss
-
6src/scss/plugins/FontAwesome-5.13.0/v4-shims.scss
-
3src/scss/plugins/_custom.scss
-
28src/scss/style.scss
-
3873yarn.lock
@ -1,3 +1,41 @@ |
|||||
# publisingTemplate |
# publisingTemplate |
||||
|
|
||||
퍼블리싱용 기본 템플릿 |
|
||||
|
### 초기 세팅 |
||||
|
초기 세팅시 npm 또는 yarn 을 이용한 의존패키지 설치가 필요합니다. |
||||
|
다음의 명령어를 입력하여 의존패키지를 먼저 설치해 주세요. |
||||
|
<code>npm install</code> |
||||
|
또는 |
||||
|
<code>yarn install</code> |
||||
|
※ 가급적 yarn 을 사용하길 권장합니다. |
||||
|
|
||||
|
### 폴더 구조 |
||||
|
``` |
||||
|
+-- dist # 배포용 폴더 |
||||
|
+-- src # 소스 폴더 |
||||
|
| +-- html # HTML 소스 폴더 |
||||
|
| | +-- include # HTML 소스에 Include 해서 사용할 파일들을 넣어놓는 폴더 |
||||
|
| +-- js # Javascript 소스 폴더 |
||||
|
| +-- scss # Sass 소스 폴더 |
||||
|
| +-- icons # Sprite 소스 폴더 |
||||
|
+-- .gitignore |
||||
|
+-- gulpfile.js |
||||
|
+-- package.json |
||||
|
+-- README.md |
||||
|
+-- source.info.json # Gulp 사용시 소스디렉토리 설정 파일 |
||||
|
``` |
||||
|
- 패킹이 완료된 파일은 배포용폴더 /dist 에 자동으로 파일이 생성됩니다. |
||||
|
- source.info.json 파일에서 패킹할 파일을 정의하거나 디렉토리를 지정할 수 있습니다. |
||||
|
- src/html/include 에 들어있는 파일은 HTML 패킹시 파일을 생성하지 않습니다. |
||||
|
|
||||
|
### GULP 명령어 |
||||
|
``` |
||||
|
gulp # 전체 패키징을 처리합니다. |
||||
|
gulp html # HTML 파일 패킹을 처리합니다. |
||||
|
gulp scss:compile # sass 패킹을 처리합니다. |
||||
|
gulp js:compile # javascript 패킹을 처리합니다. |
||||
|
gulp sprite # Sprite 패킹을 처리합니다. |
||||
|
gulp watch # 파일변경을 감지하여 자동으로 패킹을 처리합니다. (추천) |
||||
|
``` |
||||
|
|
||||
|
### 포함된 플러그인 |
||||
|
FontAwesome Pro 5.13.0 (http://fontawesome.io) |
||||
2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
dist/assets/css/style.min.css.map
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
3570
dist/assets/fonts/fa-brands-400.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
15055
dist/assets/fonts/fa-duotone-900.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
12330
dist/assets/fonts/fa-light-300.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
11256
dist/assets/fonts/fa-regular-400.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
9588
dist/assets/fonts/fa-solid-900.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
2
dist/assets/js/common.min.js
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
dist/assets/js/common.min.js.map
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,34 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="ko"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> |
||||
|
<title>메인 페이지</title> |
||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css"> |
||||
|
<link rel="stylesheet" href="./assets/css/style.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
||||
|
<script src="./assets/js/common.min.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
|
<!--S: 숨김 메뉴--> |
||||
|
<ul class="sr-only sr-only-focusable"> |
||||
|
<li><a href="#contents">컨텐츠 바로가기</a></li> |
||||
|
<li><a href="#nav">메뉴 바로가기</a></li> |
||||
|
</ul> |
||||
|
<!--E: 숨김 메뉴--> |
||||
|
|
||||
|
<!--S: 헤더 영역--> |
||||
|
|
||||
|
<!--E: 헤더 영역--> |
||||
|
|
||||
|
<!--S: 컨텐츠 영역--> |
||||
|
<section id="contents"> |
||||
|
|
||||
|
</section> |
||||
|
<!--E: 컨텐츠 영역--> |
||||
|
|
||||
|
<!--S: 푸터 영역--> |
||||
|
|
||||
|
<!--E: 푸터 영역--> |
||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,113 @@ |
|||||
|
let fs = require('fs'), |
||||
|
gulp = require('gulp'), |
||||
|
concat = require('gulp-concat'), |
||||
|
cleanCSS = require('gulp-clean-css'), |
||||
|
sass = require('gulp-sass'), |
||||
|
minify = require('gulp-minify'), |
||||
|
size = require('gulp-size'), |
||||
|
cached = require('gulp-cached'), |
||||
|
fileInclude = require('gulp-file-include'), |
||||
|
sourcemaps = require('gulp-sourcemaps'), |
||||
|
spritesmith = require('gulp.spritesmith'); |
||||
|
|
||||
|
|
||||
|
let packageFile = JSON.parse(fs.readFileSync('source.info.json')); |
||||
|
let source = packageFile.source; |
||||
|
let destPath = packageFile.destPath; |
||||
|
let watchPath = packageFile.watch; |
||||
|
|
||||
|
function reloadSourceData() |
||||
|
{ |
||||
|
packageFile = JSON.parse(fs.readFileSync('source.info.json')); |
||||
|
source = packageFile.source; |
||||
|
destPath = packageFile.destPath; |
||||
|
watchPath = packageFile.watch; |
||||
|
} |
||||
|
|
||||
|
/********************************************************************************************************** |
||||
|
* TASKS |
||||
|
***********************************************************************************************************/ |
||||
|
gulp.task('html', function(){ |
||||
|
reloadSourceData(); |
||||
|
|
||||
|
let dest = destPath.root + "/"; |
||||
|
|
||||
|
return gulp.src(source.html) |
||||
|
.pipe(fileInclude({ |
||||
|
prefix : '@@', |
||||
|
context : { |
||||
|
ROOT : '.' |
||||
|
} |
||||
|
})) |
||||
|
.pipe(cached('include')) |
||||
|
.pipe(size({ gzip:true, showFiles:true })) |
||||
|
.pipe(gulp.dest(dest)); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
gulp.task('scss:compile', function () { |
||||
|
reloadSourceData(); |
||||
|
|
||||
|
let dest = destPath.root + "/" + destPath.assets + "/" + destPath.css; |
||||
|
let fileName = "style.min.css"; |
||||
|
|
||||
|
return gulp.src( source.css ) |
||||
|
.pipe(sourcemaps.init()) |
||||
|
.pipe( sass({outputStyle: 'compact'}).on('error', sass.logError)) |
||||
|
.pipe( concat(fileName)) //병합하고
|
||||
|
.pipe(cleanCSS().on('error', function(e){console.log(e);})) |
||||
|
.pipe(size({ gzip: true, showFiles: true })) |
||||
|
.pipe(sourcemaps.write('.')) |
||||
|
.pipe(gulp.dest(dest)); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
gulp.task('js:combine', function(){ |
||||
|
reloadSourceData(); |
||||
|
|
||||
|
let dest = destPath.root + "/" + destPath.assets + "/" + destPath.js; |
||||
|
let fileName = "common.js"; |
||||
|
|
||||
|
return gulp.src( source.js ) |
||||
|
.pipe(sourcemaps.init()) |
||||
|
.pipe(concat(fileName)) |
||||
|
.pipe(minify({ext: {min : '.min.js'},noSource:true})) |
||||
|
.pipe(size({ gzip: true, showFiles: true })) |
||||
|
.pipe(sourcemaps.write('.')) |
||||
|
.pipe(gulp.dest(dest)); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
gulp.task('sprite', function () { |
||||
|
reloadSourceData(); |
||||
|
|
||||
|
var spriteData = null; |
||||
|
let dest = destPath.root + "/" + destPath.assets + "/icons"; |
||||
|
|
||||
|
var packages = fs.readdirSync(source.icons); |
||||
|
for(var i in packages) { |
||||
|
spriteData = gulp.src('src/icons/'+packages[i]+'/*.png').pipe(spritesmith({ |
||||
|
imgName: packages[i] + '.png', |
||||
|
cssName: packages[i] +'.css', |
||||
|
padding:2, |
||||
|
cssTemplate: 'src/icons/iconsTemplates.scss.handlebars', |
||||
|
cssHandlebarsHelpers : {'packageName' : packages[i]}, |
||||
|
imgPath : '../icons/' + packages[i] + '.png', |
||||
|
algorithm:'left-right', |
||||
|
algorithmOpts:false |
||||
|
})); |
||||
|
spriteData.img.pipe(gulp.dest(dest)); |
||||
|
spriteData.css.pipe(gulp.dest("src/icons/")); |
||||
|
} |
||||
|
return true; |
||||
|
}); |
||||
|
|
||||
|
gulp.task('watch', function(){ |
||||
|
gulp.watch(watchPath.html, gulp.series(['html'])); |
||||
|
gulp.watch(watchPath.js, gulp.series(['js:combine'])); |
||||
|
gulp.watch(watchPath.css, gulp.series(['scss:compile'])); |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
|
||||
|
gulp.task('default', gulp.series(['html', 'js:combine', 'scss:compile'])); |
||||
@ -0,0 +1,28 @@ |
|||||
|
{ |
||||
|
"name": "wheeparam", |
||||
|
"version": "1.0.0", |
||||
|
"description": "퍼블리싱용 기본 템플릿", |
||||
|
"main": "index.js", |
||||
|
"scripts": { |
||||
|
"test": "echo \"Error: no test specified\" && exit 1" |
||||
|
}, |
||||
|
"repository": { |
||||
|
"type": "git", |
||||
|
"url": "http://git.wheeparam.com/wheeparam/publisingTemplate.git" |
||||
|
}, |
||||
|
"author": "", |
||||
|
"license": "ISC", |
||||
|
"devDependencies": { |
||||
|
"gulp": "^4.0.2", |
||||
|
"gulp-cached": "^1.1.1", |
||||
|
"gulp-clean-css": "^4.3.0", |
||||
|
"gulp-concat": "^2.6.1", |
||||
|
"gulp-file-include": "^2.2.2", |
||||
|
"gulp-minify": "^3.1.0", |
||||
|
"gulp-sass": "^4.1.0", |
||||
|
"gulp-size": "^3.0.0", |
||||
|
"gulp-sourcemaps": "^2.6.5", |
||||
|
"gulp.spritesmith": "^6.11.0" |
||||
|
}, |
||||
|
"dependencies": {} |
||||
|
} |
||||
@ -0,0 +1,29 @@ |
|||||
|
{ |
||||
|
"destPath" : { |
||||
|
"root" : "dist", |
||||
|
"assets" : "assets", |
||||
|
"css" : "css", |
||||
|
"js" : "js" |
||||
|
}, |
||||
|
"source" : { |
||||
|
"html" : [ |
||||
|
"src/html/*.html", |
||||
|
"src/html/**/*.html", |
||||
|
"src/html/**/**/*.html", |
||||
|
"!src/html/include/**" |
||||
|
], |
||||
|
"css" : [ |
||||
|
"src/scss/style.scss" |
||||
|
], |
||||
|
"js" : [ |
||||
|
"src/js/wheeparam.js", |
||||
|
"src/js/common.js" |
||||
|
], |
||||
|
"icons": "src/icons" |
||||
|
}, |
||||
|
"watch" : { |
||||
|
"html" : ["src/html/*.html", "src/html/**/*.html","!src/html/include/*.html","src/html/**/**/*.html"], |
||||
|
"css" : ["src/scss/*.scss","src/scss/**/*.scss"], |
||||
|
"js" : [ "src/js/*.js","src/js/**/*.js"] |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
</section> |
||||
|
<!--E: 컨텐츠 영역--> |
||||
|
|
||||
|
<!--S: 푸터 영역--> |
||||
|
|
||||
|
<!--E: 푸터 영역--> |
||||
@ -0,0 +1,13 @@ |
|||||
|
<!--S: 숨김 메뉴--> |
||||
|
<ul class="sr-only sr-only-focusable"> |
||||
|
<li><a href="#contents">컨텐츠 바로가기</a></li> |
||||
|
<li><a href="#nav">메뉴 바로가기</a></li> |
||||
|
</ul> |
||||
|
<!--E: 숨김 메뉴--> |
||||
|
|
||||
|
<!--S: 헤더 영역--> |
||||
|
|
||||
|
<!--E: 헤더 영역--> |
||||
|
|
||||
|
<!--S: 컨텐츠 영역--> |
||||
|
<section id="contents"> |
||||
@ -0,0 +1,12 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="ko"> |
||||
|
<head> |
||||
|
<meta charset="utf-8"> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> |
||||
|
<title>@@pageTitle</title> |
||||
|
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css"> |
||||
|
<link rel="stylesheet" href="@@ROOT/assets/css/style.min.css"> |
||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
||||
|
<script src="@@ROOT/assets/js/common.min.js"></script> |
||||
|
</head> |
||||
|
<body> |
||||
@ -0,0 +1,2 @@ |
|||||
|
</body> |
||||
|
</html> |
||||
@ -0,0 +1,5 @@ |
|||||
|
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"}) |
||||
|
@@include("./include/header.html") |
||||
|
|
||||
|
@@include("./include/footer.html") |
||||
|
@@include("./include/tail.html") |
||||
@ -0,0 +1,25 @@ |
|||||
|
[class^={{packageName}}-] { |
||||
|
display:inline-block; |
||||
|
vertical-align:middle; |
||||
|
position: relative; |
||||
|
text-indent: -99999px; |
||||
|
overflow: hidden; |
||||
|
background-repeat: no-repeat; |
||||
|
background-image: url('{{{spritesheet.escaped_image}}}'); |
||||
|
|
||||
|
{{#spritesheet}} |
||||
|
$total_width: {{width}}; |
||||
|
$total_height: {{height}}; |
||||
|
{{/spritesheet}} |
||||
|
|
||||
|
{{#block "sprites"}} |
||||
|
{{#each sprites}} |
||||
|
&.{{packageName}}-{{name}} { |
||||
|
background-size: (($total_width / {{width}}) * 100%) (($total_height / {{height}}) * 100%); |
||||
|
background-position: (({{offset_x}} / ($total_width - {{width}})) * -100%) (({{offset_y}} / ($total_height - {{height}})) * -100%); |
||||
|
width: {{px.width}}; |
||||
|
height: {{px.height}}; |
||||
|
} |
||||
|
{{/each}} |
||||
|
{{/block}} |
||||
|
} |
||||
@ -0,0 +1,862 @@ |
|||||
|
var Wheeparam = { |
||||
|
version: '0.0.1' |
||||
|
}; |
||||
|
|
||||
|
Wheeparam.init = function() {}; |
||||
|
Wheeparam.onDocuemntReady = function(fn) { |
||||
|
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){ |
||||
|
fn(); |
||||
|
} else { |
||||
|
document.addEventListener('DOMContentLoaded', fn); |
||||
|
} |
||||
|
}; |
||||
|
Wheeparam.Easing = { |
||||
|
easeInQuad: function (t, b, c, d) { |
||||
|
return c*(t/=d)*t + b; |
||||
|
}, |
||||
|
easeOutQuad: function (t, b, c, d) { |
||||
|
return -c *(t/=d)*(t-2) + b; |
||||
|
}, |
||||
|
easeInOutQuad: function (t, b, c, d) { |
||||
|
if ((t/=d/2) < 1) return c/2*t*t + b; |
||||
|
return -c/2 * ((--t)*(t-2) - 1) + b; |
||||
|
}, |
||||
|
easeInCubic: function (t, b, c, d) { |
||||
|
return c*(t/=d)*t*t + b; |
||||
|
}, |
||||
|
easeOutCubic: function (t, b, c, d) { |
||||
|
return c*((t=t/d-1)*t*t + 1) + b; |
||||
|
}, |
||||
|
easeInOutCubic: function (t, b, c, d) { |
||||
|
if ((t/=d/2) < 1) return c/2*t*t*t + b; |
||||
|
return c/2*((t-=2)*t*t + 2) + b; |
||||
|
}, |
||||
|
easeInQuart: function (t, b, c, d) { |
||||
|
return c*(t/=d)*t*t*t + b; |
||||
|
}, |
||||
|
easeOutQuart: function (t, b, c, d) { |
||||
|
return -c * ((t=t/d-1)*t*t*t - 1) + b; |
||||
|
}, |
||||
|
easeInOutQuart: function (t, b, c, d) { |
||||
|
if ((t/=d/2) < 1) return c/2*t*t*t*t + b; |
||||
|
return -c/2 * ((t-=2)*t*t*t - 2) + b; |
||||
|
}, |
||||
|
easeInQuint: function (t, b, c, d) { |
||||
|
return c*(t/=d)*t*t*t*t + b; |
||||
|
}, |
||||
|
easeOutQuint: function (t, b, c, d) { |
||||
|
return c*((t=t/d-1)*t*t*t*t + 1) + b; |
||||
|
}, |
||||
|
easeInOutQuint: function (t, b, c, d) { |
||||
|
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
||||
|
return c/2*((t-=2)*t*t*t*t + 2) + b; |
||||
|
}, |
||||
|
easeInSine: function (t, b, c, d) { |
||||
|
return -c * Math.cos(t/d * (Math.PI/2)) + c + b; |
||||
|
}, |
||||
|
easeOutSine: function (t, b, c, d) { |
||||
|
return c * Math.sin(t/d * (Math.PI/2)) + b; |
||||
|
}, |
||||
|
easeInOutSine: function (t, b, c, d) { |
||||
|
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
||||
|
}, |
||||
|
easeInExpo: function (t, b, c, d) { |
||||
|
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; |
||||
|
}, |
||||
|
easeOutExpo: function (t, b, c, d) { |
||||
|
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; |
||||
|
}, |
||||
|
easeInOutExpo: function (t, b, c, d) { |
||||
|
if (t==0) return b; |
||||
|
if (t==d) return b+c; |
||||
|
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; |
||||
|
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; |
||||
|
}, |
||||
|
easeInCirc: function (t, b, c, d) { |
||||
|
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; |
||||
|
}, |
||||
|
easeOutCirc: function (t, b, c, d) { |
||||
|
return c * Math.sqrt(1 - (t=t/d-1)*t) + b; |
||||
|
}, |
||||
|
easeInOutCirc: function (t, b, c, d) { |
||||
|
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; |
||||
|
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; |
||||
|
}, |
||||
|
easeInElastic: function (t, b, c, d) { |
||||
|
var s=1.70158;var p=0;var a=c; |
||||
|
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
|
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
|
}, |
||||
|
easeOutElastic: function (t, b, c, d) { |
||||
|
var s=1.70158;var p=0;var a=c; |
||||
|
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
|
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; |
||||
|
}, |
||||
|
easeInOutElastic: function (t, b, c, d) { |
||||
|
var s=1.70158;var p=0;var a=c; |
||||
|
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); |
||||
|
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
|
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
|
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
|
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; |
||||
|
}, |
||||
|
easeInBack: function (t, b, c, d, s) { |
||||
|
if (s == undefined) s = 1.70158; |
||||
|
return c*(t/=d)*t*((s+1)*t - s) + b; |
||||
|
}, |
||||
|
easeOutBack: function (t, b, c, d, s) { |
||||
|
if (s == undefined) s = 1.70158; |
||||
|
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
||||
|
}, |
||||
|
easeInOutBack: function (t, b, c, d, s) { |
||||
|
if (s == undefined) s = 1.70158; |
||||
|
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
||||
|
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
||||
|
}, |
||||
|
easeInBounce: function (t, b, c, d) { |
||||
|
return c - Wheeparam.Easing.easeOutBounce (d-t, 0, c, d) + b; |
||||
|
}, |
||||
|
easeOutBounce: function (t, b, c, d) { |
||||
|
if ((t/=d) < (1/2.75)) { |
||||
|
return c*(7.5625*t*t) + b; |
||||
|
} else if (t < (2/2.75)) { |
||||
|
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; |
||||
|
} else if (t < (2.5/2.75)) { |
||||
|
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; |
||||
|
} else { |
||||
|
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; |
||||
|
} |
||||
|
}, |
||||
|
easeInOutBounce: function (t, b, c, d) { |
||||
|
if (t < d/2) return Wheeparam.Easing.easeInBounce (t*2, 0, c, d) * .5 + b; |
||||
|
return Wheeparam.Easing.easeOutBounce (t*2-d, 0, c, d) * .5 + c*.5 + b; |
||||
|
} |
||||
|
}; |
||||
|
/*! |
||||
|
autosize 4.0.2 |
||||
|
license: MIT |
||||
|
http://www.jacklmoore.com/autosize
|
||||
|
*/ |
||||
|
(function (global, factory) { |
||||
|
if (typeof define === "function" && define.amd) { |
||||
|
define(['module', 'exports'], factory); |
||||
|
} else if (typeof exports !== "undefined") { |
||||
|
factory(module, exports); |
||||
|
} else { |
||||
|
var mod = { |
||||
|
exports: {} |
||||
|
}; |
||||
|
factory(mod, mod.exports); |
||||
|
global.autosize = mod.exports; |
||||
|
} |
||||
|
})(this, function (module, exports) { |
||||
|
'use strict'; |
||||
|
|
||||
|
var map = typeof Map === "function" ? new Map() : function () { |
||||
|
var keys = []; |
||||
|
var values = []; |
||||
|
|
||||
|
return { |
||||
|
has: function has(key) { |
||||
|
return keys.indexOf(key) > -1; |
||||
|
}, |
||||
|
get: function get(key) { |
||||
|
return values[keys.indexOf(key)]; |
||||
|
}, |
||||
|
set: function set(key, value) { |
||||
|
if (keys.indexOf(key) === -1) { |
||||
|
keys.push(key); |
||||
|
values.push(value); |
||||
|
} |
||||
|
}, |
||||
|
delete: function _delete(key) { |
||||
|
var index = keys.indexOf(key); |
||||
|
if (index > -1) { |
||||
|
keys.splice(index, 1); |
||||
|
values.splice(index, 1); |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
}(); |
||||
|
|
||||
|
var createEvent = function createEvent(name) { |
||||
|
return new Event(name, { bubbles: true }); |
||||
|
}; |
||||
|
try { |
||||
|
new Event('test'); |
||||
|
} catch (e) { |
||||
|
// IE does not support `new Event()`
|
||||
|
createEvent = function createEvent(name) { |
||||
|
var evt = document.createEvent('Event'); |
||||
|
evt.initEvent(name, true, false); |
||||
|
return evt; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
function assign(ta) { |
||||
|
if (!ta || !ta.nodeName || ta.nodeName !== 'TEXTAREA' || map.has(ta)) return; |
||||
|
|
||||
|
var heightOffset = null; |
||||
|
var clientWidth = null; |
||||
|
var cachedHeight = null; |
||||
|
|
||||
|
function init() { |
||||
|
var style = window.getComputedStyle(ta, null); |
||||
|
|
||||
|
if (style.resize === 'vertical') { |
||||
|
ta.style.resize = 'none'; |
||||
|
} else if (style.resize === 'both') { |
||||
|
ta.style.resize = 'horizontal'; |
||||
|
} |
||||
|
|
||||
|
if (style.boxSizing === 'content-box') { |
||||
|
heightOffset = -(parseFloat(style.paddingTop) + parseFloat(style.paddingBottom)); |
||||
|
} else { |
||||
|
heightOffset = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth); |
||||
|
} |
||||
|
// Fix when a textarea is not on document body and heightOffset is Not a Number
|
||||
|
if (isNaN(heightOffset)) { |
||||
|
heightOffset = 0; |
||||
|
} |
||||
|
|
||||
|
update(); |
||||
|
} |
||||
|
|
||||
|
function changeOverflow(value) { |
||||
|
{ |
||||
|
// Chrome/Safari-specific fix:
|
||||
|
// When the textarea y-overflow is hidden, Chrome/Safari do not reflow the text to account for the space
|
||||
|
// made available by removing the scrollbar. The following forces the necessary text reflow.
|
||||
|
var width = ta.style.width; |
||||
|
ta.style.width = '0px'; |
||||
|
// Force reflow:
|
||||
|
/* jshint ignore:start */ |
||||
|
ta.offsetWidth; |
||||
|
/* jshint ignore:end */ |
||||
|
ta.style.width = width; |
||||
|
} |
||||
|
|
||||
|
ta.style.overflowY = value; |
||||
|
} |
||||
|
|
||||
|
function getParentOverflows(el) { |
||||
|
var arr = []; |
||||
|
|
||||
|
while (el && el.parentNode && el.parentNode instanceof Element) { |
||||
|
if (el.parentNode.scrollTop) { |
||||
|
arr.push({ |
||||
|
node: el.parentNode, |
||||
|
scrollTop: el.parentNode.scrollTop |
||||
|
}); |
||||
|
} |
||||
|
el = el.parentNode; |
||||
|
} |
||||
|
|
||||
|
return arr; |
||||
|
} |
||||
|
|
||||
|
function resize() { |
||||
|
if (ta.scrollHeight === 0) { |
||||
|
// If the scrollHeight is 0, then the element probably has display:none or is detached from the DOM.
|
||||
|
return; |
||||
|
} |
||||
|
|
||||
|
var overflows = getParentOverflows(ta); |
||||
|
var docTop = document.documentElement && document.documentElement.scrollTop; // Needed for Mobile IE (ticket #240)
|
||||
|
|
||||
|
ta.style.height = ''; |
||||
|
ta.style.height = ta.scrollHeight + heightOffset + 'px'; |
||||
|
|
||||
|
// used to check if an update is actually necessary on window.resize
|
||||
|
clientWidth = ta.clientWidth; |
||||
|
|
||||
|
// prevents scroll-position jumping
|
||||
|
overflows.forEach(function (el) { |
||||
|
el.node.scrollTop = el.scrollTop; |
||||
|
}); |
||||
|
|
||||
|
if (docTop) { |
||||
|
document.documentElement.scrollTop = docTop; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function update() { |
||||
|
resize(); |
||||
|
|
||||
|
var styleHeight = Math.round(parseFloat(ta.style.height)); |
||||
|
var computed = window.getComputedStyle(ta, null); |
||||
|
|
||||
|
// Using offsetHeight as a replacement for computed.height in IE, because IE does not account use of border-box
|
||||
|
var actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(computed.height)) : ta.offsetHeight; |
||||
|
|
||||
|
// The actual height not matching the style height (set via the resize method) indicates that
|
||||
|
// the max-height has been exceeded, in which case the overflow should be allowed.
|
||||
|
if (actualHeight < styleHeight) { |
||||
|
if (computed.overflowY === 'hidden') { |
||||
|
changeOverflow('scroll'); |
||||
|
resize(); |
||||
|
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; |
||||
|
} |
||||
|
} else { |
||||
|
// Normally keep overflow set to hidden, to avoid flash of scrollbar as the textarea expands.
|
||||
|
if (computed.overflowY !== 'hidden') { |
||||
|
changeOverflow('hidden'); |
||||
|
resize(); |
||||
|
actualHeight = computed.boxSizing === 'content-box' ? Math.round(parseFloat(window.getComputedStyle(ta, null).height)) : ta.offsetHeight; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
if (cachedHeight !== actualHeight) { |
||||
|
cachedHeight = actualHeight; |
||||
|
var evt = createEvent('autosize:resized'); |
||||
|
try { |
||||
|
ta.dispatchEvent(evt); |
||||
|
} catch (err) { |
||||
|
// Firefox will throw an error on dispatchEvent for a detached element
|
||||
|
// https://bugzilla.mozilla.org/show_bug.cgi?id=889376
|
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var pageResize = function pageResize() { |
||||
|
if (ta.clientWidth !== clientWidth) { |
||||
|
update(); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var destroy = function (style) { |
||||
|
window.removeEventListener('resize', pageResize, false); |
||||
|
ta.removeEventListener('input', update, false); |
||||
|
ta.removeEventListener('keyup', update, false); |
||||
|
ta.removeEventListener('autosize:destroy', destroy, false); |
||||
|
ta.removeEventListener('autosize:update', update, false); |
||||
|
|
||||
|
Object.keys(style).forEach(function (key) { |
||||
|
ta.style[key] = style[key]; |
||||
|
}); |
||||
|
|
||||
|
map.delete(ta); |
||||
|
}.bind(ta, { |
||||
|
height: ta.style.height, |
||||
|
resize: ta.style.resize, |
||||
|
overflowY: ta.style.overflowY, |
||||
|
overflowX: ta.style.overflowX, |
||||
|
wordWrap: ta.style.wordWrap |
||||
|
}); |
||||
|
|
||||
|
ta.addEventListener('autosize:destroy', destroy, false); |
||||
|
|
||||
|
// IE9 does not fire onpropertychange or oninput for deletions,
|
||||
|
// so binding to onkeyup to catch most of those events.
|
||||
|
// There is no way that I know of to detect something like 'cut' in IE9.
|
||||
|
if ('onpropertychange' in ta && 'oninput' in ta) { |
||||
|
ta.addEventListener('keyup', update, false); |
||||
|
} |
||||
|
|
||||
|
window.addEventListener('resize', pageResize, false); |
||||
|
ta.addEventListener('input', update, false); |
||||
|
ta.addEventListener('autosize:update', update, false); |
||||
|
ta.style.overflowX = 'hidden'; |
||||
|
ta.style.wordWrap = 'break-word'; |
||||
|
|
||||
|
map.set(ta, { |
||||
|
destroy: destroy, |
||||
|
update: update |
||||
|
}); |
||||
|
|
||||
|
init(); |
||||
|
} |
||||
|
|
||||
|
function destroy(ta) { |
||||
|
var methods = map.get(ta); |
||||
|
if (methods) { |
||||
|
methods.destroy(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function update(ta) { |
||||
|
var methods = map.get(ta); |
||||
|
if (methods) { |
||||
|
methods.update(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
var autosize = null; |
||||
|
|
||||
|
// Do nothing in Node.js environment and IE8 (or lower)
|
||||
|
if (typeof window === 'undefined' || typeof window.getComputedStyle !== 'function') { |
||||
|
autosize = function autosize(el) { |
||||
|
return el; |
||||
|
}; |
||||
|
autosize.destroy = function (el) { |
||||
|
return el; |
||||
|
}; |
||||
|
autosize.update = function (el) { |
||||
|
return el; |
||||
|
}; |
||||
|
} else { |
||||
|
autosize = function autosize(el, options) { |
||||
|
if (el) { |
||||
|
Array.prototype.forEach.call(el.length ? el : [el], function (x) { |
||||
|
return assign(x, options); |
||||
|
}); |
||||
|
} |
||||
|
return el; |
||||
|
}; |
||||
|
autosize.destroy = function (el) { |
||||
|
if (el) { |
||||
|
Array.prototype.forEach.call(el.length ? el : [el], destroy); |
||||
|
} |
||||
|
return el; |
||||
|
}; |
||||
|
autosize.update = function (el) { |
||||
|
if (el) { |
||||
|
Array.prototype.forEach.call(el.length ? el : [el], update); |
||||
|
} |
||||
|
return el; |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
exports.default = autosize; |
||||
|
module.exports = exports['default']; |
||||
|
}); |
||||
|
/********************************************************************************************************************** |
||||
|
* 숫자에 컴마를 붙여서 리턴한다 |
||||
|
* @returns {*} |
||||
|
*********************************************************************************************************************/ |
||||
|
Number.prototype.numberFormat = function(){ |
||||
|
if(this==0) return 0; |
||||
|
|
||||
|
var reg = /(^[+-]?\d+)(\d{3})/; |
||||
|
var n = (this + ''); |
||||
|
|
||||
|
while (reg.test(n)) n = n.replace(reg, '$1' + ',' + '$2'); |
||||
|
|
||||
|
return n; |
||||
|
}; |
||||
|
String.prototype.numberFormat = function() { return isNaN( parseFloat(this) ) ? "0" : (parseFloat(this)).numberFormat(); }; |
||||
|
|
||||
|
/********************************************************************************************************************** |
||||
|
* 컴마가 붙어있는 숫자에서 콤마를 삭제하고 숫자로 반환한다. |
||||
|
* @returns {*} |
||||
|
*********************************************************************************************************************/ |
||||
|
String.prototype.unNumberFormat = function() { |
||||
|
var str = this; |
||||
|
if(typeof str == 'number') return str; |
||||
|
str = ("" + str).replace(/,/gi,''); // 콤마 제거
|
||||
|
str = str.replace(/(^\s*)|(\s*$)/g, ""); // trim
|
||||
|
|
||||
|
var returnStr = new Number(str); |
||||
|
return isNaN(returnStr) ? str : returnStr; |
||||
|
}; |
||||
|
Number.prototype.unNumberFormat = function() { |
||||
|
return this; |
||||
|
}; |
||||
|
|
||||
|
/********************************************************************************************************************** |
||||
|
* 날짜를 원하는 포맷 형식으로 출력 |
||||
|
* @param f |
||||
|
* @returns {*} |
||||
|
*********************************************************************************************************************/ |
||||
|
Date.prototype.dateFormat = function(f) { |
||||
|
if (!this.valueOf()) return " "; |
||||
|
if (!f) return this; |
||||
|
|
||||
|
var weekName = ["일요일", "월요일", "화요일", "수요일", "목요일", "금요일", "토요일"], |
||||
|
shortWeekName = ["일", "월", "화", "수", "목", "금", "토"], |
||||
|
d = this; |
||||
|
|
||||
|
return f.replace(/(yyyy|yy|MM|dd|E|hh|mm|ss|a\/p)/gi, function($1) { |
||||
|
switch ($1) { |
||||
|
case "yyyy": return d.getFullYear(); |
||||
|
case "yy": return (d.getFullYear() % 1000).zf(2); |
||||
|
case "MM": return (d.getMonth() + 1).zf(2); |
||||
|
case "dd": return d.getDate().zf(2); |
||||
|
case "E": return weekName[d.getDay()]; |
||||
|
case "e": return shortWeekName[d.getDay()]; |
||||
|
case "HH": return d.getHours().zf(2); |
||||
|
case "hh": return ((h = d.getHours() % 12) ? h : 12).zf(2); |
||||
|
case "mm": return d.getMinutes().zf(2); |
||||
|
case "ss": return d.getSeconds().zf(2); |
||||
|
case "a/p": return d.getHours() < 12 ? "오전" : "오후"; |
||||
|
default: return $1; |
||||
|
} |
||||
|
}); |
||||
|
}; |
||||
|
String.prototype.string = function(len){var s = '', i = 0; while (i++ < len) { s += this; } return s;}; |
||||
|
String.prototype.zf = function(len){return "0".string(len - this.length) + this;}; |
||||
|
Number.prototype.zf = function(len){return this.toString().zf(len);}; |
||||
|
String.prototype.dateFormat = function(f) { |
||||
|
var d = new Date(this); |
||||
|
return ( d == 'Invalid Date') ? '' : d.dateFormat(f); |
||||
|
} |
||||
|
|
||||
|
/********************************************************************************************************************** |
||||
|
* 숫자를 한글명으로 바꿔서 보여줍니다. |
||||
|
*********************************************************************************************************************/ |
||||
|
Number.prototype.toKorean = function() { |
||||
|
var hanA = new Array("","일","이","삼","사","오","육","칠","팔","구","십"), |
||||
|
danA = new Array("","십","백","천","","십","백","천","","십","백","천","","십","백","천"), |
||||
|
num = new String(this), |
||||
|
result = ''; |
||||
|
|
||||
|
for(var i=0; i<num.length; i++) { |
||||
|
var str = "", |
||||
|
han = hanA[num.charAt(num.length-(i+1))]; |
||||
|
|
||||
|
if(han != "") str += han+danA[i]; |
||||
|
|
||||
|
if(i == 4) str += "만"; |
||||
|
if(i == 8) str += "억"; |
||||
|
if(i == 12) str += "조"; |
||||
|
|
||||
|
result = str + result; |
||||
|
} |
||||
|
|
||||
|
return result; |
||||
|
} |
||||
|
String.prototype.toKorean = function() { |
||||
|
return (this.unNumberFormat()).toKorean(); |
||||
|
} |
||||
|
/************************************************************************************************************************ |
||||
|
* 해당 문자열의 regex 검사 |
||||
|
* @param regexType |
||||
|
*************************************************************************************************************************/ |
||||
|
String.prototype.regex = function(regexType) { |
||||
|
var phoneRegex = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})([0-9]{3,4})([0-9]{4})$/, |
||||
|
phoneWithHypenRegex = /^(01[016789]{1}|02|0[3-9]{1}[0-9]{1})-?([0-9]{3,4})-?([0-9]{4})$/, |
||||
|
telRegex = /(^02.{0}|^01.{1}|[0-9]{3})([0-9]{3,4})([0-9]{4})/, |
||||
|
telCheckRegex = /^\d{2,3}-\d{3,4}-\d{4}$/, |
||||
|
emailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, |
||||
|
str = this; |
||||
|
|
||||
|
switch(regexType) { |
||||
|
case "phone" : |
||||
|
var transNum = str.replace(/\s/gi, '').replace(/-/gi,''); |
||||
|
if(transNum.length == 11 || transNum.length == 10) { |
||||
|
if( phoneRegex.test(transNum) ) { |
||||
|
transNum = transNum.replace(phoneWithHypenRegex, '$1-$2-$3'); |
||||
|
return transNum; |
||||
|
} |
||||
|
} |
||||
|
return false; |
||||
|
case "tel": |
||||
|
var transNum = str.replace(/\s/gi, '').replace(/-/gi,''); |
||||
|
transNum = transNum.replace(telRegex, '$1-$2-$3'); |
||||
|
if(telCheckRegex.test(transNum)) { |
||||
|
return transNum; |
||||
|
} |
||||
|
return false; |
||||
|
case "email": |
||||
|
return emailRegex.test(str); |
||||
|
|
||||
|
case "biznum" : |
||||
|
var checkID = new Array(1, 3, 7, 1, 3, 7, 1, 3, 5, 1), |
||||
|
tmpBizID, i, chkSum=0, c2, remander, |
||||
|
bizID = str.replace(/-/gi,''); |
||||
|
|
||||
|
for (i=0; i<=7; i++) chkSum += checkID[i] * bizID.charAt(i); |
||||
|
c2 = "0" + (checkID[8] * bizID.charAt(8)); |
||||
|
c2 = c2.substring(c2.length - 2, c2.length); |
||||
|
chkSum += Math.floor(c2.charAt(0)) + Math.floor(c2.charAt(1)); |
||||
|
remander = (10 - (chkSum % 10)) % 10 ; |
||||
|
|
||||
|
if (Math.floor(bizID.charAt(9)) == remander) return bizID.replace(/(\d{3})(\d{2})(\d{5})/, '$1-$2-$3'); |
||||
|
return false; |
||||
|
} |
||||
|
}; |
||||
|
/************************************************************************************************************ |
||||
|
* 특정 엘리먼트 또는 최상단으로 스크롤을 이동시킵니다. |
||||
|
* @param elementSelector 셀렉터 |
||||
|
* @param animation 애니메이션 효과 |
||||
|
* @param duration 지속시간 |
||||
|
* @constructor |
||||
|
*************************************************************************************************************/ |
||||
|
Wheeparam.ScrollTo = function( elementSelector, animation, duration ) { |
||||
|
elementSelector = typeof elementSelector != 'undefined' && elementSelector ? elementSelector : false; |
||||
|
animation = typeof animation != 'undefined' && animation ? animation : false; |
||||
|
duration = typeof duration != 'undefined' && duration && animation ? duration : 0; |
||||
|
|
||||
|
var start = window.pageYOffset || document.body.scrollTop, |
||||
|
element = elementSelector ? document.querySelector(elementSelector) : document.body, |
||||
|
to = element.offsetTop, |
||||
|
change = to - start, |
||||
|
currentTime = 0, |
||||
|
increment = 20; |
||||
|
|
||||
|
var animateScroll = function() { |
||||
|
currentTime += increment; |
||||
|
var value = animation ? Wheeparam.Easing[animation]( currentTime, start, change, duration ) : to; |
||||
|
|
||||
|
window.scrollTo(0, value); |
||||
|
|
||||
|
if(currentTime < duration) { |
||||
|
setTimeout(animateScroll, increment); |
||||
|
} |
||||
|
} |
||||
|
animateScroll(); |
||||
|
}; |
||||
|
|
||||
|
/************************************************************************************************************ |
||||
|
* 두 배열을 합쳐줍니다. |
||||
|
* @param out 합칠 배열들 |
||||
|
* @returns {*|{}} |
||||
|
************************************************************************************************************/ |
||||
|
Wheeparam.extend = function( out ) { |
||||
|
out = out || {}; |
||||
|
|
||||
|
for (var i = 1; i < arguments.length; i++) { |
||||
|
var obj = arguments[i]; |
||||
|
|
||||
|
if (!obj) |
||||
|
continue; |
||||
|
|
||||
|
for (var key in obj) { |
||||
|
if (obj.hasOwnProperty(key)) { |
||||
|
if (typeof obj[key] === 'object') |
||||
|
out[key] = Wheeparam.extend(out[key], obj[key]); |
||||
|
else |
||||
|
out[key] = obj[key]; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return out; |
||||
|
}; |
||||
|
|
||||
|
/************************************************************************************************************ |
||||
|
* 팝업창을 띄웁니다. |
||||
|
* @param options |
||||
|
************************************************************************************************************/ |
||||
|
Wheeparam.popup = function( options ) { |
||||
|
var defaults={ |
||||
|
title : '_blank', |
||||
|
width : 800, |
||||
|
height : 600, |
||||
|
url : '', |
||||
|
onFailed: function() { |
||||
|
alert("팝업 차단 기능이 설정되어있습니다.\n차단 기능을 해제(팝업허용) 한 후 다시 이용해 주십시오."); |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
var option = Wheeparam.extend({}, defaults, options), |
||||
|
cw = screen.availWidth, |
||||
|
ch = screen.availHeight, |
||||
|
sw = option.width, |
||||
|
sh = option.height, |
||||
|
ml = (cw - sw) / 2, |
||||
|
mt = (ch - sh) / 2, |
||||
|
opt = 'width='+sw+',height='+sh+',top='+mt+',left='+ml+',scrollbars=yes,resizable=no', |
||||
|
win = window.open(options.url, options.title, opt); |
||||
|
|
||||
|
if (win == null || typeof(win) == "undefined" || (win == null && win.outerWidth == 0) || (win != null && win.outerHeight == 0)) |
||||
|
{ |
||||
|
option.onFailed(); |
||||
|
return; |
||||
|
} |
||||
|
}; |
||||
|
|
||||
|
/************************************************************************************************************ |
||||
|
* 소셜 공유 팝업창을 띄우거나 페이지로 이동합니다. |
||||
|
* @param options |
||||
|
************************************************************************************************************/ |
||||
|
Wheeparam.shareSNS = function( options ) { |
||||
|
var defaults = { |
||||
|
title : '', |
||||
|
provider: '', |
||||
|
url: '', |
||||
|
imgSrc: '', |
||||
|
width: 800, |
||||
|
height: 600, |
||||
|
onFailed: function() { |
||||
|
alert("팝업 차단 기능이 설정되어있습니다.\n차단 기능을 해제(팝업허용) 한 후 다시 이용해 주십시오."); |
||||
|
} |
||||
|
}; |
||||
|
var option = Wheeparam.extend({}, defaults, options); |
||||
|
|
||||
|
if(! option.title) { |
||||
|
option.title = document.querySelector('meta[property="og:title"]') |
||||
|
? document.querySelector('meta[property="og:title"]').getAttribute('content') |
||||
|
: (document.querySelector('title') |
||||
|
? document.querySelector('title').innerText |
||||
|
: '' |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
if(! option.url) { |
||||
|
option.url = window.location.href; |
||||
|
} |
||||
|
|
||||
|
if(! option.imgSrc) { |
||||
|
option.imgSrc = document.querySelector('meta[property="og:image"]') |
||||
|
? document.querySelector('meta[property="og:image"]').getAttribute('content') |
||||
|
: (document.querySelector('link[rel="image_src"]') |
||||
|
? document.querySelector('link[rel="image_src"]').innerText |
||||
|
: '' |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
option.url = encodeURIComponent(option.url); |
||||
|
option.title = encodeURIComponent(option.title); |
||||
|
|
||||
|
var loc = ""; |
||||
|
|
||||
|
switch (option.provider) { |
||||
|
case 'facebook' : |
||||
|
loc = '//www.facebook.com/sharer/sharer.php?u='+option.url; |
||||
|
break; |
||||
|
case 'twitter': |
||||
|
loc = '//twitter.com/home?status='+option.title+' '+ option.url; |
||||
|
break; |
||||
|
case 'google': |
||||
|
loc = '//plus.google.com/share?url='+option.url; |
||||
|
break; |
||||
|
case 'pinterest': |
||||
|
loc = '//www.pinterest.com/pin/create/button/?url='+option.url+ ( option.imgSrc ? '&media='+ option.imgSrc : '' )+'&description='+option.title; |
||||
|
break; |
||||
|
case 'kakaostory': |
||||
|
loc = 'https://story.kakao.com/share?url='+option.url; |
||||
|
break; |
||||
|
case 'band': |
||||
|
loc = 'http://www.band.us/plugin/share?body='+option.title+'%0A'+option.url; |
||||
|
break; |
||||
|
case 'naver': |
||||
|
loc = "http://share.naver.com/web/shareView.nhn?url="+option.url+"&title="+option.title; |
||||
|
break; |
||||
|
case 'line': |
||||
|
loc = "http://line.me/R/msg/text/?" + option.title + encodeURIComponent("\n") + option.url; |
||||
|
break; |
||||
|
} |
||||
|
|
||||
|
if( loc ) { |
||||
|
Wheeparam.popup({ url : loc, width: option.width, height: option.height, onFailed:option.onFailed }); |
||||
|
} |
||||
|
|
||||
|
return false; |
||||
|
}; |
||||
|
/*********************************************************************************************************************** |
||||
|
* 전체체크박스 / 체크박스 연동 |
||||
|
***********************************************************************************************************************/ |
||||
|
Wheeparam.onDocuemntReady(function() { |
||||
|
var checkboxs = document.querySelectorAll('[data-checkbox]'); |
||||
|
if(checkboxs.length > 0) { |
||||
|
for( var i = 0; i<checkboxs.length; i++) { |
||||
|
checkboxs[i].addEventListener('change', function(event) { |
||||
|
var $check = this, |
||||
|
is_all = this.getAttribute('data-checkbox-all') != null ? true : false, |
||||
|
name = this.getAttribute('data-checkbox'), |
||||
|
checked = this.checked, |
||||
|
$allCheck = is_all ? $check : (document.querySelectorAll('[data-checkbox="'+name+'"][data-checkbox-all]').length > 0 ? document.querySelectorAll('[data-checkbox="'+name+'"][data-checkbox-all]')[0] : null ), |
||||
|
checks = document.querySelectorAll('[data-checkbox="'+name+'"]'); |
||||
|
|
||||
|
if(! $allCheck) return; |
||||
|
|
||||
|
if( is_all ) { |
||||
|
for(var k =0; k<checks.length; k++) { |
||||
|
checks[k].checked = checked; |
||||
|
} |
||||
|
} |
||||
|
else { |
||||
|
var is_all_check = true; |
||||
|
for(var k =0; k<checks.length; k++) { |
||||
|
if(checks[k].getAttribute('data-checkbox-all') != null) continue; |
||||
|
if(checks[k].checked == false) { |
||||
|
is_all_check = false; |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
$allCheck.checked = is_all_check; |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*********************************************************************************************************************** |
||||
|
* 숫자 3자리마다 Comma 자동 입력 Input |
||||
|
***********************************************************************************************************************/ |
||||
|
Wheeparam.onDocuemntReady(function() { |
||||
|
var $input = document.querySelectorAll('input[data-number-format]'); |
||||
|
if($input.length > 0) { |
||||
|
for(var i=0; i<$input.length; i++) |
||||
|
{ |
||||
|
$input[i].addEventListener('keyup', function() { |
||||
|
var value = this.value.unNumberFormat().numberFormat(); |
||||
|
this.value = value; |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*********************************************************************************************************************** |
||||
|
* 숫자만 입력가능한 Input |
||||
|
***********************************************************************************************************************/ |
||||
|
Wheeparam.onDocuemntReady(function() { |
||||
|
var $input = document.querySelectorAll('[data-number-only]'); |
||||
|
if($input.length <=0 ) return; |
||||
|
|
||||
|
for(var i=0; i<$input.length; i++) { |
||||
|
$input[i].addEventListener('keypress', function(e) { |
||||
|
if (e.which != 8 && e.which != 0 && e.which != 45 && (e.which < 48 || e.which > 57)) { |
||||
|
e.preventDefault(); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*********************************************************************************************************************** |
||||
|
* 높이가 자동 조정되는 textarea |
||||
|
***********************************************************************************************************************/ |
||||
|
Wheeparam.onDocuemntReady(function() { |
||||
|
var $input = document.querySelectorAll('textarea[data-autosize]'); |
||||
|
if($input.length > 0) |
||||
|
{ |
||||
|
for(var i =0; i<$input.length; i++) |
||||
|
{ |
||||
|
$input[i].addEventListener('keyup', function() { |
||||
|
autosize(this); |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
|
||||
|
/*********************************************************************************************************************** |
||||
|
* 소셜 공유 버튼 |
||||
|
***********************************************************************************************************************/ |
||||
|
Wheeparam.onDocuemntReady(function() { |
||||
|
var $socialParentElement = document.querySelectorAll('[data-sns-share]'); |
||||
|
if($socialParentElement.length > 0) |
||||
|
{ |
||||
|
for(var i =0; i<$socialParentElement.length; i++) |
||||
|
{ |
||||
|
var el = $socialParentElement[i], |
||||
|
title = el.getAttribute('data-title') ? el.getAttribute('data-title') : '', |
||||
|
url = el.getAttribute('data-url') ? el.getAttribute('data-url') : '', |
||||
|
imgSrc = el.getAttribute('data-img-src') ? el.getAttribute('data-img-src') : '', |
||||
|
width = el.getAttribute('data-width') ? el.getAttribute('data-width') : 800, |
||||
|
height = el.getAttribute('data-height') ? el.getAttribute('data-height') : 600, |
||||
|
providers = el.querySelectorAll('[data-sns-provider]'); |
||||
|
|
||||
|
for(var k=0; k<providers.length; k ++) |
||||
|
{ |
||||
|
providers[k].addEventListener('click', function() { |
||||
|
var provider = this.getAttribute('data-sns-provider') ? this.getAttribute('data-sns-provider') : ''; |
||||
|
if(! provider) return false; |
||||
|
|
||||
|
Wheeparam.shareSNS({ |
||||
|
title : title, |
||||
|
provider : provider, |
||||
|
url : url, |
||||
|
imgSrc: imgSrc, |
||||
|
width: width, |
||||
|
height: height |
||||
|
}) |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -0,0 +1,29 @@ |
|||||
|
// 색상 변수 |
||||
|
$color-primary : #282828; // 메인 컬러 |
||||
|
$color-secondary : #282828; // 서브 컬러 |
||||
|
|
||||
|
$body-color : #212529; // 기본 텍스트 색상 |
||||
|
$body-bg-color : #FFFFFF; // 기본 배경 색상 |
||||
|
|
||||
|
$link-color : $body-color; // 링크 텍스트 색상 |
||||
|
$link-hover-color : $color-primary; // 링크 오버시 텍스트 색상 |
||||
|
|
||||
|
// 폰트 관련 |
||||
|
$font-family-base : 'Noto Sans KR',sans-serif; // 기본글자에 사용 되는 폰트 |
||||
|
$font-family-heading : $font-family-base; // 헤딩태그에 사용 되는 폰트 |
||||
|
$font-size-base : 16px; |
||||
|
$font-weight-base : 400; |
||||
|
$font-weight-bold : 700; |
||||
|
$line-height-base : 1.5em; |
||||
|
|
||||
|
// 애니메이션 |
||||
|
$default-animation : ease; |
||||
|
|
||||
|
// 반응형 포인트 |
||||
|
$break-lg : 1200px; |
||||
|
$break-md : 992px; |
||||
|
$break-sm : 768px; |
||||
|
|
||||
|
// 테이블 관련 |
||||
|
$table-cell-padding: .75rem !default; |
||||
|
$table-cell-padding-sm: .3rem !default; |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 폰트 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,37 @@ |
|||||
|
// 기본 픽셀 사이즈를 rem 단위 사이즈로 변환 |
||||
|
@function REM($pxSize:16px){ |
||||
|
$remSize : $pxSize / $font-size-base !global; |
||||
|
@return #{$remSize}rem; |
||||
|
} |
||||
|
|
||||
|
@function strip-unit($number) { |
||||
|
@if type-of($number) == 'number' and not unitless($number) { |
||||
|
@return $number / ($number * 0 + 1); |
||||
|
} |
||||
|
|
||||
|
@return $number; |
||||
|
} |
||||
|
|
||||
|
@function VW($pxSize:16px) { |
||||
|
$vwSize: strip-unit($pxSize) / 1080 * 100; |
||||
|
@return #{$vwSize}vw; |
||||
|
} |
||||
|
|
||||
|
// Media Query를 위한 함수 |
||||
|
@function translate-media-condition($c) { |
||||
|
$break-desktop: $break-desktop !global; |
||||
|
$break-tablet : $break-tablet !global; |
||||
|
$break-mobile : $break-mobile !global; |
||||
|
|
||||
|
$condMap: ( |
||||
|
"screen": "only screen", |
||||
|
"print": "only print", |
||||
|
"retina": "(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5), (min-resolution: 120dpi)", |
||||
|
">desktop" : "(min-width: #{$break-desktop + 1})", |
||||
|
'<desktop' : "(max-width: #{$break-desktop})", |
||||
|
">tablet": "(min-width: #{$break-tablet + 1})", |
||||
|
"<tablet": "(max-width: #{$break-tablet})", |
||||
|
">mobile": "(min-width: #{$break-mobile})" |
||||
|
); |
||||
|
@return map-get( $condMap, $c ); |
||||
|
} |
||||
@ -0,0 +1,125 @@ |
|||||
|
// Clear FIX |
||||
|
@mixin clear-fix() { |
||||
|
display:block; |
||||
|
clear:both; |
||||
|
content:""; |
||||
|
} |
||||
|
|
||||
|
@mixin clear-fix-after() { |
||||
|
&:after { |
||||
|
@include clear-fix(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// Button Default Style |
||||
|
@mixin button-default() { |
||||
|
display: inline-block; |
||||
|
margin:0; |
||||
|
font-weight: normal; |
||||
|
text-align: center; |
||||
|
white-space: nowrap; |
||||
|
user-select: none; |
||||
|
text-decoration: none; |
||||
|
outline:0; |
||||
|
vertical-align:middle; |
||||
|
|
||||
|
&:disabled, |
||||
|
&.disabled { |
||||
|
opacity:0.65; |
||||
|
} |
||||
|
|
||||
|
&:not([disabled]):not(.disabled) { |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// background Image |
||||
|
@mixin background-image( $image_url, $bg_color:transparent, $background-repeat:no-repeat, $background-position-x:center, $background-position-y:center ) |
||||
|
{ |
||||
|
background-color:$bg_color; |
||||
|
background-image:url($image_url); |
||||
|
background-repeat: $background-repeat; |
||||
|
background-position-x:$background-position-x; |
||||
|
background-position-y:$background-position-y; |
||||
|
} |
||||
|
|
||||
|
// Global Transition |
||||
|
@mixin transition($second:.3s, $target:all, $animation:$default-animation) |
||||
|
{ |
||||
|
-webkit-transition: $target $second $animation; |
||||
|
-moz-transition: $target $second $animation; |
||||
|
-ms-transition: $target $second $animation; |
||||
|
-o-transition: $target $second $animation; |
||||
|
transition: $target $second $animation; |
||||
|
} |
||||
|
|
||||
|
// Display flex & Prefix |
||||
|
@mixin display-flex() |
||||
|
{ |
||||
|
-webkit-display:flex; |
||||
|
display:-ms-flex; |
||||
|
display:flex; |
||||
|
} |
||||
|
|
||||
|
// Media Query |
||||
|
@mixin media($args...) { |
||||
|
$query: ""; |
||||
|
@each $arg in $args { |
||||
|
$op: ""; |
||||
|
@if ( $query != "" ) { |
||||
|
$op: " and "; |
||||
|
} |
||||
|
$query: $query + $op + translate-media-condition($arg); |
||||
|
} |
||||
|
@media #{$query} { @content; } |
||||
|
} |
||||
|
|
||||
|
@mixin display-lg() { |
||||
|
@media screen and (min-width:$break-lg + 1) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin display-md() { |
||||
|
@media screen and (max-width:$break-lg) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin display-sm() { |
||||
|
@media screen and (max-width:$break-md) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@mixin display-xs() { |
||||
|
@media screen and (max-width:$break-sm) { |
||||
|
@content; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
@mixin background-image-retina($path, $ext: "png", $w: 100%, $h: 100%, $pos-x: center, $pos-y:center, $repeat: no-repeat) { |
||||
|
$at1x_path: "#{$path}.#{$ext}"; |
||||
|
$at2x_path: "#{$path}@2x.#{$ext}"; |
||||
|
$at3x_path: "#{$path}@3x.#{$ext}"; |
||||
|
|
||||
|
background-image: url("#{$at1x_path}"); |
||||
|
background-size: $w $h; |
||||
|
background-position-x: $pos-x; |
||||
|
background-position-y: $pos-y; |
||||
|
background-repeat: $repeat; |
||||
|
|
||||
|
@media all and (-webkit-min-device-pixel-ratio : 1.5), |
||||
|
all and (-o-min-device-pixel-ratio: 3/2), |
||||
|
all and (min--moz-device-pixel-ratio: 1.5), |
||||
|
all and (min-device-pixel-ratio: 1.5) { |
||||
|
background-image: url("#{$at2x_path}"); |
||||
|
} |
||||
|
@media all and (-webkit-min-device-pixel-ratio : 2.5), |
||||
|
all and (-o-min-device-pixel-ratio: 5/2), |
||||
|
all and (min--moz-device-pixel-ratio: 2.5), |
||||
|
all and (min-device-pixel-ratio: 2.5) { |
||||
|
background-image: url("#{$at3x_path}"); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,330 @@ |
|||||
|
/********************************************************************************************************************** |
||||
|
* RESET |
||||
|
***********************************************************************************************************************/ |
||||
|
*, |
||||
|
*::before, |
||||
|
*::after { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
html { |
||||
|
font-family: sans-serif; // 2 |
||||
|
line-height: 1.15; // 3 |
||||
|
-webkit-text-size-adjust: 100%; // 4 |
||||
|
-ms-text-size-adjust: 100%; // 4 |
||||
|
-ms-overflow-style: scrollbar; // 5 |
||||
|
-webkit-tap-highlight-color: rgba(#000, 0); // 6 |
||||
|
} |
||||
|
|
||||
|
// IE10+ 에서 viewport 메타 태그가 먹지않는경우를 대비 |
||||
|
@at-root { |
||||
|
@-ms-viewport { |
||||
|
width: device-width; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section { |
||||
|
display: block; |
||||
|
} |
||||
|
|
||||
|
body { |
||||
|
margin: 0; |
||||
|
font-family: $font-family-base; |
||||
|
font-size: $font-size-base; |
||||
|
font-weight: $font-weight-base; |
||||
|
line-height: $line-height-base; |
||||
|
color: $body-color; |
||||
|
text-align: left; |
||||
|
background-color: $body-bg-color; |
||||
|
} |
||||
|
|
||||
|
[tabindex="-1"]:focus { |
||||
|
outline: 0 !important; |
||||
|
} |
||||
|
|
||||
|
hr { |
||||
|
box-sizing: content-box; |
||||
|
height: 0; |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
h1, h2, h3, h4, h5, h6 { |
||||
|
margin:0; |
||||
|
font-family:$font-family-heading; |
||||
|
line-height:$line-height-base; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
margin:0; |
||||
|
} |
||||
|
|
||||
|
abbr[title], |
||||
|
abbr[data-original-title] { |
||||
|
text-decoration: underline; |
||||
|
text-decoration: underline dotted; |
||||
|
cursor: help; // 3 |
||||
|
border-bottom: 0; // 1 |
||||
|
} |
||||
|
|
||||
|
address { |
||||
|
margin:0; |
||||
|
font-style: normal; |
||||
|
line-height: inherit; |
||||
|
} |
||||
|
|
||||
|
ol, |
||||
|
ul, |
||||
|
dl { |
||||
|
margin:0; |
||||
|
list-style:none; |
||||
|
padding:0; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
ol ol, |
||||
|
ul ul, |
||||
|
ol ul, |
||||
|
ul ol { |
||||
|
margin:0; |
||||
|
} |
||||
|
|
||||
|
dt { |
||||
|
font-weight: $font-weight-base; |
||||
|
} |
||||
|
|
||||
|
dd { |
||||
|
margin:0; |
||||
|
} |
||||
|
|
||||
|
blockquote { |
||||
|
margin:0; |
||||
|
} |
||||
|
|
||||
|
dfn { |
||||
|
font-style: italic; |
||||
|
} |
||||
|
|
||||
|
b, |
||||
|
strong { |
||||
|
font-weight: $font-weight-bold; |
||||
|
} |
||||
|
|
||||
|
small { |
||||
|
font-size: 80%; |
||||
|
} |
||||
|
|
||||
|
sub, |
||||
|
sup { |
||||
|
position: relative; |
||||
|
font-size: 75%; |
||||
|
line-height: 0; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
sub { bottom: -.25em; } |
||||
|
sup { top: -.5em; } |
||||
|
|
||||
|
// 링크 |
||||
|
a { |
||||
|
color: $link-color; |
||||
|
text-decoration: none; |
||||
|
background-color: transparent; |
||||
|
-webkit-text-decoration-skip: objects; |
||||
|
|
||||
|
&:hover { |
||||
|
color: $link-hover-color; |
||||
|
text-decoration:none; |
||||
|
} |
||||
|
|
||||
|
&:not([href]):not([tabindedx]) { |
||||
|
color: inherit; |
||||
|
text-decoration: none; |
||||
|
|
||||
|
&:hover, |
||||
|
&:focus { |
||||
|
color: inherit; |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
&:focus { |
||||
|
outline: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// 코드 관련 |
||||
|
pre, |
||||
|
code, |
||||
|
kbd, |
||||
|
samp { |
||||
|
font-family: $font-family-base; |
||||
|
font-size: 1em; |
||||
|
} |
||||
|
|
||||
|
pre { |
||||
|
margin:0; |
||||
|
overflow: auto; |
||||
|
-ms-overflow-style: scrollbar; |
||||
|
} |
||||
|
|
||||
|
// 이미지 관련 |
||||
|
figure { |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
vertical-align: middle; |
||||
|
border-style: none; |
||||
|
} |
||||
|
|
||||
|
svg:not(:root) { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
// 테이블 관련 |
||||
|
table { |
||||
|
border-collapse: collapse; |
||||
|
} |
||||
|
|
||||
|
caption { |
||||
|
padding-top: $table-cell-padding; |
||||
|
padding-bottom: $table-cell-padding; |
||||
|
color: $body-color; |
||||
|
text-align: left; |
||||
|
caption-side: bottom; |
||||
|
} |
||||
|
|
||||
|
th { |
||||
|
text-align: inherit; |
||||
|
} |
||||
|
|
||||
|
// 폼관련 |
||||
|
label { |
||||
|
display: inline-block; |
||||
|
margin:0; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border-radius: 0; |
||||
|
|
||||
|
&:focus { |
||||
|
outline: 1px dotted; |
||||
|
outline: 5px auto -webkit-focus-ring-color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
input, |
||||
|
button, |
||||
|
select, |
||||
|
optgroup, |
||||
|
textarea { |
||||
|
margin: 0; |
||||
|
font-family: inherit; |
||||
|
font-size: inherit; |
||||
|
line-height: inherit; |
||||
|
} |
||||
|
|
||||
|
button, |
||||
|
input { |
||||
|
overflow: visible; |
||||
|
} |
||||
|
|
||||
|
button, |
||||
|
select { |
||||
|
text-transform: none; |
||||
|
} |
||||
|
|
||||
|
button, |
||||
|
html [type="button"], |
||||
|
[type="reset"], |
||||
|
[type="submit"] { |
||||
|
-webkit-appearance: button; |
||||
|
} |
||||
|
|
||||
|
button::-moz-focus-inner, |
||||
|
[type="button"]::-moz-focus-inner, |
||||
|
[type="reset"]::-moz-focus-inner, |
||||
|
[type="submit"]::-moz-focus-inner { |
||||
|
padding: 0; |
||||
|
border-style: none; |
||||
|
} |
||||
|
|
||||
|
input[type="radio"], |
||||
|
input[type="checkbox"] { |
||||
|
box-sizing: border-box; |
||||
|
padding: 0; |
||||
|
} |
||||
|
|
||||
|
input[type="date"], |
||||
|
input[type="time"], |
||||
|
input[type="datetime-local"], |
||||
|
input[type="month"] { |
||||
|
-webkit-appearance: listbox; |
||||
|
} |
||||
|
|
||||
|
textarea { |
||||
|
overflow: auto; |
||||
|
resize: vertical; |
||||
|
} |
||||
|
|
||||
|
fieldset { |
||||
|
min-width: 0; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
legend { |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
max-width: 100%; |
||||
|
padding: 0; |
||||
|
margin:0; |
||||
|
font-size: 1.5rem; |
||||
|
line-height: inherit; |
||||
|
color: inherit; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
|
||||
|
progress { |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
|
||||
|
[type="number"]::-webkit-inner-spin-button, |
||||
|
[type="number"]::-webkit-outer-spin-button { |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
[type="search"] { |
||||
|
outline-offset: -2px; |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
|
||||
|
[type="search"]::-webkit-search-cancel-button, |
||||
|
[type="search"]::-webkit-search-decoration { |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
::-webkit-file-upload-button { |
||||
|
font: inherit; |
||||
|
-webkit-appearance: button; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
output { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
summary { |
||||
|
display: list-item; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
template { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
[hidden] { |
||||
|
display: none !important; |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 애니메이션 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 레이아웃 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,108 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 유틸리티 |
||||
|
****************************************************************************************/ |
||||
|
.sr-only { |
||||
|
position: absolute; |
||||
|
width: 1px; |
||||
|
height: 1px; |
||||
|
padding: 0; |
||||
|
overflow: hidden; |
||||
|
clip: rect(0, 0, 0, 0); |
||||
|
white-space: nowrap; |
||||
|
border: 0; |
||||
|
|
||||
|
&.sr-only-focusable { |
||||
|
&:active, |
||||
|
&:focus { |
||||
|
position: static; |
||||
|
width: auto; |
||||
|
height: auto; |
||||
|
overflow: visible; |
||||
|
clip: auto; |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.clearfix { |
||||
|
&, |
||||
|
&:before, |
||||
|
&:after { |
||||
|
@include clear-fix(); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 to 100{ |
||||
|
.W#{$i * 5} { |
||||
|
width: 5px * $i !important; |
||||
|
} |
||||
|
.H#{$i * 5} { |
||||
|
height:5px * $i !important; |
||||
|
} |
||||
|
} |
||||
|
@for $i from 0 to 21 { |
||||
|
.M#{$i * 5} { |
||||
|
margin:5px * $i !important; |
||||
|
} |
||||
|
.MT#{$i * 5} { |
||||
|
margin-top:5px * $i !important; |
||||
|
} |
||||
|
.MR#{$i*5} { |
||||
|
margin-right:5px * $i !important; |
||||
|
} |
||||
|
.MB#{$i * 5} { |
||||
|
margin-bottom:5px * $i !important; |
||||
|
} |
||||
|
.ML#{$i * 5} { |
||||
|
margin-left:5px * $i !important; |
||||
|
} |
||||
|
.PT#{$i * 5} { |
||||
|
padding-top:5px * $i !important; |
||||
|
} |
||||
|
.PR#{$i * 5} { |
||||
|
padding-right:5px * $i !important; |
||||
|
} |
||||
|
.PB#{$i * 5} { |
||||
|
padding-bottom:5px * $i !important; |
||||
|
} |
||||
|
.PL#{$i * 5} { |
||||
|
padding-left:5px * $i !important; |
||||
|
} |
||||
|
.P#{$i * 5} { |
||||
|
padding:5px * $i !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 to 21{ |
||||
|
.W#{$i * 5}P { |
||||
|
width: 5% * $i !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.text-left { |
||||
|
text-align: left !important; |
||||
|
} |
||||
|
|
||||
|
.text-right { |
||||
|
text-align:right !important;; |
||||
|
} |
||||
|
|
||||
|
.text-center { |
||||
|
text-align:center !important; |
||||
|
} |
||||
|
|
||||
|
.display-flex { |
||||
|
@include display-flex; |
||||
|
|
||||
|
&.align-center { |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
&.justify-center { |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
&.dir-column { |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 버튼 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 아이콘 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,3 @@ |
|||||
|
/********************************************************************************************************************** |
||||
|
* 메인페이지 |
||||
|
***********************************************************************************************************************/ |
||||
@ -0,0 +1,20 @@ |
|||||
|
// Animated Icons |
||||
|
// -------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-spin { |
||||
|
animation: fa-spin 2s infinite linear; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-pulse { |
||||
|
animation: fa-spin 1s infinite steps(8); |
||||
|
} |
||||
|
|
||||
|
@keyframes fa-spin { |
||||
|
0% { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
100% { |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,20 @@ |
|||||
|
// Bordered & Pulled |
||||
|
// ------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-border { |
||||
|
border: solid .08em $fa-border-color; |
||||
|
border-radius: .1em; |
||||
|
padding: .2em .25em .15em; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-pull-left { float: left; } |
||||
|
.#{$fa-css-prefix}-pull-right { float: right; } |
||||
|
|
||||
|
.#{$fa-css-prefix}, |
||||
|
.fas, |
||||
|
.far, |
||||
|
.fal, |
||||
|
.fab { |
||||
|
&.#{$fa-css-prefix}-pull-left { margin-right: .3em; } |
||||
|
&.#{$fa-css-prefix}-pull-right { margin-left: .3em; } |
||||
|
} |
||||
@ -0,0 +1,21 @@ |
|||||
|
// Base Class Definition |
||||
|
// ------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}, |
||||
|
.fas, |
||||
|
.far, |
||||
|
.fal, |
||||
|
.fad, |
||||
|
.fab { |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
display: inline-block; |
||||
|
font-style: normal; |
||||
|
font-variant: normal; |
||||
|
text-rendering: auto; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
%fa-icon { |
||||
|
@include fa-icon; |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
// Fixed Width Icons |
||||
|
// ------------------------- |
||||
|
.#{$fa-css-prefix}-fw { |
||||
|
text-align: center; |
||||
|
width: $fa-fw-width; |
||||
|
} |
||||
2296
src/scss/plugins/FontAwesome-5.13.0/_icons.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,23 @@ |
|||||
|
// Icon Sizes |
||||
|
// ------------------------- |
||||
|
|
||||
|
// makes the font 33% larger relative to the icon container |
||||
|
.#{$fa-css-prefix}-lg { |
||||
|
font-size: (4em / 3); |
||||
|
line-height: (3em / 4); |
||||
|
vertical-align: -.0667em; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-xs { |
||||
|
font-size: .75em; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-sm { |
||||
|
font-size: .875em; |
||||
|
} |
||||
|
|
||||
|
@for $i from 1 through 10 { |
||||
|
.#{$fa-css-prefix}-#{$i}x { |
||||
|
font-size: $i * 1em; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,18 @@ |
|||||
|
// List Icons |
||||
|
// ------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-ul { |
||||
|
list-style-type: none; |
||||
|
margin-left: $fa-li-width * 5/4; |
||||
|
padding-left: 0; |
||||
|
|
||||
|
> li { position: relative; } |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-li { |
||||
|
left: -$fa-li-width; |
||||
|
position: absolute; |
||||
|
text-align: center; |
||||
|
width: $fa-li-width; |
||||
|
line-height: inherit; |
||||
|
} |
||||
@ -0,0 +1,56 @@ |
|||||
|
// Mixins |
||||
|
// -------------------------- |
||||
|
|
||||
|
@mixin fa-icon { |
||||
|
-webkit-font-smoothing: antialiased; |
||||
|
-moz-osx-font-smoothing: grayscale; |
||||
|
display: inline-block; |
||||
|
font-style: normal; |
||||
|
font-variant: normal; |
||||
|
font-weight: normal; |
||||
|
line-height: 1; |
||||
|
} |
||||
|
|
||||
|
@mixin fa-icon-rotate($degrees, $rotation) { |
||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; |
||||
|
transform: rotate($degrees); |
||||
|
} |
||||
|
|
||||
|
@mixin fa-icon-flip($horiz, $vert, $rotation) { |
||||
|
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)"; |
||||
|
transform: scale($horiz, $vert); |
||||
|
} |
||||
|
|
||||
|
|
||||
|
// Only display content to screen readers. A la Bootstrap 4. |
||||
|
// |
||||
|
// See: http://a11yproject.com/posts/how-to-hide-content/ |
||||
|
|
||||
|
@mixin sr-only { |
||||
|
border: 0; |
||||
|
clip: rect(0, 0, 0, 0); |
||||
|
height: 1px; |
||||
|
margin: -1px; |
||||
|
overflow: hidden; |
||||
|
padding: 0; |
||||
|
position: absolute; |
||||
|
width: 1px; |
||||
|
} |
||||
|
|
||||
|
// Use in conjunction with .sr-only to only display content when it's focused. |
||||
|
// |
||||
|
// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1 |
||||
|
// |
||||
|
// Credit: HTML5 Boilerplate |
||||
|
|
||||
|
@mixin sr-only-focusable { |
||||
|
&:active, |
||||
|
&:focus { |
||||
|
clip: auto; |
||||
|
height: auto; |
||||
|
margin: 0; |
||||
|
overflow: visible; |
||||
|
position: static; |
||||
|
width: auto; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
// Rotated & Flipped Icons |
||||
|
// ------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-rotate-90 { @include fa-icon-rotate(90deg, 1); } |
||||
|
.#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); } |
||||
|
.#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); } |
||||
|
|
||||
|
.#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); } |
||||
|
.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(1, -1, 2); } |
||||
|
.#{$fa-css-prefix}-flip-both, .#{$fa-css-prefix}-flip-horizontal.#{$fa-css-prefix}-flip-vertical { @include fa-icon-flip(-1, -1, 2); } |
||||
|
|
||||
|
// Hook for IE8-9 |
||||
|
// ------------------------- |
||||
|
|
||||
|
:root { |
||||
|
.#{$fa-css-prefix}-rotate-90, |
||||
|
.#{$fa-css-prefix}-rotate-180, |
||||
|
.#{$fa-css-prefix}-rotate-270, |
||||
|
.#{$fa-css-prefix}-flip-horizontal, |
||||
|
.#{$fa-css-prefix}-flip-vertical, |
||||
|
.#{$fa-css-prefix}-flip-both { |
||||
|
filter: none; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,5 @@ |
|||||
|
// Screen Readers |
||||
|
// ------------------------- |
||||
|
|
||||
|
.sr-only { @include sr-only; } |
||||
|
.sr-only-focusable { @include sr-only-focusable; } |
||||
2066
src/scss/plugins/FontAwesome-5.13.0/_shims.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,31 @@ |
|||||
|
// Stacked Icons |
||||
|
// ------------------------- |
||||
|
|
||||
|
.#{$fa-css-prefix}-stack { |
||||
|
display: inline-block; |
||||
|
height: 2em; |
||||
|
line-height: 2em; |
||||
|
position: relative; |
||||
|
vertical-align: middle; |
||||
|
width: ($fa-fw-width*2); |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-stack-1x, |
||||
|
.#{$fa-css-prefix}-stack-2x { |
||||
|
left: 0; |
||||
|
position: absolute; |
||||
|
text-align: center; |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-stack-1x { |
||||
|
line-height: inherit; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-stack-2x { |
||||
|
font-size: 2em; |
||||
|
} |
||||
|
|
||||
|
.#{$fa-css-prefix}-inverse { |
||||
|
color: $fa-inverse; |
||||
|
} |
||||
2313
src/scss/plugins/FontAwesome-5.13.0/_variables.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,23 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'variables'; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Font Awesome 5 Brands'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: $fa-font-display; |
||||
|
src: url('#{$fa-font-path}/fa-brands-400.eot'); |
||||
|
src: url('#{$fa-font-path}/fa-brands-400.eot?#iefix') format('embedded-opentype'), |
||||
|
url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'), |
||||
|
url('#{$fa-font-path}/fa-brands-400.woff') format('woff'), |
||||
|
url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype'), |
||||
|
url('#{$fa-font-path}/fa-brands-400.svg#fontawesome') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.fab { |
||||
|
font-family: 'Font Awesome 5 Brands'; |
||||
|
font-weight: 400; |
||||
|
} |
||||
1916
src/scss/plugins/FontAwesome-5.13.0/duotone.scss
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -0,0 +1,16 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'variables'; |
||||
|
@import 'mixins'; |
||||
|
@import 'core'; |
||||
|
@import 'larger'; |
||||
|
@import 'fixed-width'; |
||||
|
@import 'list'; |
||||
|
@import 'bordered-pulled'; |
||||
|
@import 'animated'; |
||||
|
@import 'rotated-flipped'; |
||||
|
@import 'stacked'; |
||||
|
@import 'icons'; |
||||
|
@import 'screen-reader'; |
||||
@ -0,0 +1,23 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'variables'; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-style: normal; |
||||
|
font-weight: 300; |
||||
|
font-display: $fa-font-display; |
||||
|
src: url('#{$fa-font-path}/fa-light-300.eot'); |
||||
|
src: url('#{$fa-font-path}/fa-light-300.eot?#iefix') format('embedded-opentype'), |
||||
|
url('#{$fa-font-path}/fa-light-300.woff2') format('woff2'), |
||||
|
url('#{$fa-font-path}/fa-light-300.woff') format('woff'), |
||||
|
url('#{$fa-font-path}/fa-light-300.ttf') format('truetype'), |
||||
|
url('#{$fa-font-path}/fa-light-300.svg#fontawesome') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.fal { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-weight: 300; |
||||
|
} |
||||
@ -0,0 +1,23 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'variables'; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
font-display: $fa-font-display; |
||||
|
src: url('#{$fa-font-path}/fa-regular-400.eot'); |
||||
|
src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'), |
||||
|
url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'), |
||||
|
url('#{$fa-font-path}/fa-regular-400.woff') format('woff'), |
||||
|
url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'), |
||||
|
url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.far { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-weight: 400; |
||||
|
} |
||||
@ -0,0 +1,24 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'variables'; |
||||
|
|
||||
|
@font-face { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-style: normal; |
||||
|
font-weight: 900; |
||||
|
font-display: $fa-font-display; |
||||
|
src: url('#{$fa-font-path}/fa-solid-900.eot'); |
||||
|
src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'), |
||||
|
url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'), |
||||
|
url('#{$fa-font-path}/fa-solid-900.woff') format('woff'), |
||||
|
url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'), |
||||
|
url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg'); |
||||
|
} |
||||
|
|
||||
|
.fa, |
||||
|
.fas { |
||||
|
font-family: 'Font Awesome 5 Pro'; |
||||
|
font-weight: 900; |
||||
|
} |
||||
@ -0,0 +1,6 @@ |
|||||
|
/*! |
||||
|
* Font Awesome Pro 5.13.0 by @fontawesome - https://fontawesome.com |
||||
|
* License - https://fontawesome.com/license (Commercial License) |
||||
|
*/ |
||||
|
@import 'FontAwesome-5.13.0/variables'; |
||||
|
@import 'FontAwesome-5.13.0/shims'; |
||||
@ -0,0 +1,3 @@ |
|||||
|
/*************************************************************************************** |
||||
|
* 플러그인 커스텀 |
||||
|
****************************************************************************************/ |
||||
@ -0,0 +1,28 @@ |
|||||
|
// 기본 |
||||
|
@import "boot/fonts"; |
||||
|
@import "boot/mixins"; |
||||
|
@import "boot/function"; |
||||
|
@import "variables"; |
||||
|
@import "boot/reset"; |
||||
|
|
||||
|
// FontAwesome |
||||
|
@import "plugins/FontAwesome-5.13.0/fontawesome"; |
||||
|
@import "plugins/FontAwesome-5.13.0/regular"; |
||||
|
@import "plugins/FontAwesome-5.13.0/light"; |
||||
|
@import "plugins/FontAwesome-5.13.0/solid"; |
||||
|
@import "plugins/FontAwesome-5.13.0/brands"; |
||||
|
|
||||
|
// 애니메이션,레이아웃,유틸리티,컴포넌트 |
||||
|
@import "common/animation"; |
||||
|
@import "common/layout"; |
||||
|
@import "common/utility"; |
||||
|
|
||||
|
// 각종 컴포넌트 |
||||
|
@import "components/icons"; |
||||
|
@import "components/button"; |
||||
|
|
||||
|
// 각종 플러그인 SCSS 및 플러그인 커스텀 |
||||
|
@import "plugins/custom"; |
||||
|
|
||||
|
// 레이아웃 및 각 페이지 SCSS 파일 |
||||
|
@import 'pages/main'; |
||||
3873
yarn.lock
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue