장선근
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 |
|||
|
|||
퍼블리싱용 기본 템플릿 |
|||
### 초기 세팅 |
|||
초기 세팅시 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