diff --git a/README.md b/README.md index 598dc30f..36a60029 100644 --- a/README.md +++ b/README.md @@ -1,45 +1,28 @@ -# ๐Ÿ‘€ ์ž์‹ ์ด ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ๋ ˆ์ด์•„์›ƒ ํด๋ก  - -์›ํ•˜๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์„ ํƒํ•˜๊ณ  ๋ ˆ์ด์•„์›ƒ์„ ํด๋ก  ์ฝ”๋”ฉํ•˜์„ธ์š”. -ํ‰์†Œ์— ๋„์ „ํ•ด ๋ณด๊ณ  ์‹ถ์—ˆ๊ฑฐ๋‚˜ ํ˜น์€ ์ž์‹ ์˜ ์ˆ˜์ค€์— ๋งž๋Š” ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)๋ฅผ ์„ ํƒํ•˜์„ธ์š”. -๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ๋ฆฌ๋ทฐ ๊ธฐ๊ฐ„์€ ๋ณ„๋„ ๊ณต์ง€๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”! - -## ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๋ฐฉ๋ฒ• - -1. ํ˜„์žฌ ์ €์žฅ์†Œ๋ฅผ ๋กœ์ปฌ์— ํด๋ก (Clone)ํ•ฉ๋‹ˆ๋‹ค. -1. ์ž์‹ ์˜ ๋ณธ๋ช…์œผ๋กœ ๋ธŒ๋žœ์น˜๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.(๊ตฌ๋ถ„ ๊ฐ€๋Šฅํ•˜๋„๋ก ๋ณธ๋ช…์„ ๊ผญ ํŒŒ์Šค์นผ์ผ€์ด์Šค๋กœ ํ‘œ์‹œํ•˜์„ธ์š”, `git branch KDT0_ParkYoungWoong`) -1. ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜์—์„œ ๊ณผ์ œ๋ฅผ ์ˆ˜ํ–‰ํ•ฉ๋‹ˆ๋‹ค. -1. ๊ณผ์ œ ์ˆ˜ํ–‰์ด ์™„๋ฃŒ๋˜๋ฉด, ์ž์‹ ์˜ ๋ณธ๋ช… ๋ธŒ๋žœ์น˜๋ฅผ ์›๊ฒฉ ์ €์žฅ์†Œ์— ํ‘ธ์‹œ(Push)ํ•ฉ๋‹ˆ๋‹ค.(`main` ๋ธŒ๋žœ์น˜์— ํ‘ธ์‹œํ•˜์ง€ ์•Š๋„๋ก ๊ผญ ์ฃผ์˜ํ•˜์„ธ์š”, `git push origin KDT0_ParkYoungWoong`) -1. ์ €์žฅ์†Œ์—์„œ `main` ๋ธŒ๋žœ์น˜๋ฅผ ๋Œ€์ƒ์œผ๋กœ Pull Request ์ƒ์„ฑํ•˜๋ฉด, ๊ณผ์ œ ์ œ์ถœ์ด ์™„๋ฃŒ๋ฉ๋‹ˆ๋‹ค!(E.g, `main` <== `KDT0_ParkYoungWoong`) - -- `main` ํ˜น์€ ๋‹ค๋ฅธ ์‚ฌ๋žŒ์˜ ๋ธŒ๋žœ์น˜๋กœ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- Pull Request์—์„œ ๋ณด์ด๋Š” ์„ค๋ช…์„ ๋‹ค๋ฅธ ์‚ฌ๋žŒ๋“ค์ด ์ดํ•ดํ•˜๊ธฐ ์‰ฝ๋„๋ก ๊ผผ๊ผผํ•˜๊ฒŒ ์ž‘์„ฑํ•˜์„ธ์š”! -- Pull Request์—์„œ ๊ณผ์ œ ์ œ์ถœ ํ›„ ์ ˆ๋Œ€ ๋ณ‘ํ•ฉ(Merge)ํ•˜์ง€ ์•Š๋„๋ก ์ฃผ์˜ํ•˜์„ธ์š”! -- ๊ณผ์ œ ์ˆ˜ํ–‰ ๋ฐ ์ œ์ถœ ๊ณผ์ •์—์„œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ ๊ฒฝ์šฐ, ๋ฐ”๋กœ ๋‹ด๋‹น ๋ฉ˜ํ† ๋‚˜ ๊ฐ•์‚ฌ์—์„œ ์–˜๊ธฐํ•˜์„ธ์š”! - -## ํ•„์ˆ˜ ์š”๊ตฌ์‚ฌํ•ญ - -- [ ] ๊ณผ์ œ์— ๋Œ€ํ•œ ์„ค๋ช…์„ ํฌํ•จํ•œ `README.md` ํŒŒ์ผ์„ ์ œ๊ณตํ•˜์„ธ์š”! -- [ ] ๊ณผ์ œ ๊ฒฐ๊ณผ์™€ ๋น„๊ตํ•  ์ˆ˜ ์žˆ๋Š” ์‹ค์ œ ์‚ฌ์ดํŠธ(ํŽ˜์ด์ง€)์˜ ์ฃผ์†Œ๋ฅผ ๋ช…์‹œํ•˜์„ธ์š”! -- [ ] ๊ณผ์ •์—์„œ ์‚ฌ์šฉํ•œ ํ”„๋กœ์ ํŠธ ํด๋”/ํŒŒ์ผ์ด ๋ชจ๋‘ ํฌํ•จ๋ผ์•ผ ํ•ฉ๋‹ˆ๋‹ค, ์ผ๋ถ€ ํŒŒ์ผ๋งŒ ์ œ์ถœํ•˜์ง€ ๋งˆ์„ธ์š”! -- [ ] ์‹ค์ œ ์„œ๋น„์Šค๋กœ ๋ฐฐํฌํ•˜๊ณ  ์ ‘๊ทผ ๊ฐ€๋Šฅํ•œ ๋งํฌ๋ฅผ ์ถ”๊ฐ€ํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค. - -## ์„ ํƒ ์š”๊ตฌ์‚ฌํ•ญ - -- [ ] `
`, `
` ๋“ฑ ์‹œ๋ฉ˜ํ‹ฑ ํƒœ๊ทธ๋ฅผ ์ตœ๋Œ€ํ•œ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- [ ] ์‹ค์ œ ์‚ฌ์ดํŠธ์˜ ๋ ˆ๊ฑฐ์‹œ ์ฝ”๋“œ ํ™œ์šฉ๋ณด๋‹จ ์ตœ์‹ ์˜ CSS Flex ํ˜น์€ Grid ๋“ฑ์„ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. -- [ ] ๋ถ€๋ถ„์ ์œผ๋กœ BEM ๋ฐฉ๋ฒ•๋ก ์„ ๋„์ž…ํ•ด๋ณด์„ธ์š”. -- [ ] JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„์€ ๋˜๋„๋ก ์ƒ๋žตํ•˜๋˜ ์ด์œ ๋ฅผ ๋ช…์‹œํ•ด๋ณด์„ธ์š”.(CSS๋กœ ๋Œ€์ฒด ๊ฐ€๋Šฅํ•œ์ง€ ํ”ผ๋“œ๋ฐฑ์ด ์žˆ์„ ์ˆ˜ ์žˆ๊ฒ ์ฃ ?!) -- [ ] JS๊ฐ€ ํ•„์š”ํ•œ ๋ถ€๋ถ„ ์ค‘ ๊ตฌํ˜„ํ•  ๋ถ€๋ถ„์ด ์žˆ๋‹ค๋ฉด ์ž์œ ๋กญ๊ฒŒ ๊ตฌํ˜„ํ•ด๋ณด์„ธ์š”.(JS ๊ณผ์ œ๊ฐ€ ์•„๋‹ˆ๋‹ˆ๊นŒ ๊ฐ€๋ณ๊ฒŒ ๊ตฌํ˜„ํ•˜์‹œ๊ธธ ์ถ”์ฒœํ•ด์š”) -- [ ] SCSS ๋“ฑ์˜ CSS ์ „์ฒ˜๋ฆฌ๋„๊ตฌ๋ฅผ ๋„์ž…ํ•ด๋ณด์„ธ์š”. -- [ ] SCSS ์ปดํŒŒ์ผ์— Webpack์ด๋‚˜ Parcel ๊ฐ™์€ ๋ฒˆ๋“ค๋Ÿฌ๋ฅผ ํ™œ์šฉํ•ด๋ณด์„ธ์š”. - -## ์†์‰ฌ์šด ์ด๋ฏธ์ง€ ์ถ”์ถœ ๋ฐฉ๋ฒ• - -์‚ฌ์ดํŠธ ํด๋ก ์— ํ•„์š”ํ•œ ์ด๋ฏธ์ง€๋ฅผ ์ข€ ๋” ์‰ฝ๊ฒŒ ์ถ”์ถœํ•˜๊ธฐ ์œ„ํ•ด์„œ Chrome ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์ธ [Image Downloader](https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ko)๋ฅผ ์‚ฌ์šฉํ•˜์„ธ์š”. - -1. ์›ํ•˜๋Š” ์‚ฌ์ดํŠธ ์ ‘์† -1. Image Downloader ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ ์‹คํ–‰ -1. ๋‹ค์šด๋กœ๋“œ ์›ํ•˜๋Š” ์ด๋ฏธ์ง€ ์„ ํƒ -1. ์„œ๋ธŒ ํด๋” ์ด๋ฆ„(Save to subfolder) ๋ช…์‹œ -1. ๋‹ค์šด๋กœ๋“œ! +## ์›๋ž˜ ์‚ฌ์ดํŠธ : [์˜์นด](https://www.socar.kr/) +## ๊ณผ์ œ : [๊ณผ์ œ์˜์นด](https://genuine-palmier-371aa9.netlify.app) + +
+ +# ์„ค๋ช… +### - ์›๋ž˜ ํŽ˜์ด์ง€๊ฐ€ ๋ฐ˜์‘ํ˜• ํŽ˜์ด์ง€๋ผ์„œ ๋ฐ˜์‘ํ˜•์œผ๋กœ ๊ตฌํ˜„ํ•ด๋ดค์Šต๋‹ˆ๋‹ค. ์›๋ž˜ ํŽ˜์ด์ง€๊ฐ€ 770px๋ฅผ ๊ธฐ์ค€์œผ๋กœ ๋ณ€ํ™”ํ•ด์„œ 770px๋ฅผ ๊ธฐ์ค€์œผ๋กœ pc์™€ mobile๋กœ ๋‚˜๋ˆ ์„œ ์ž‘์—…ํ–ˆ์Šต๋‹ˆ๋‹ค. +### - ์‚ฐ๋Œ๊ณ ๋”• ํฐํŠธ๋Š” ์œ ๋ฃŒ๋ผ ๋น„์Šทํ•ด๋ณด์ด๋Š” ๋‚˜๋ˆ”์Šคํ€˜์–ด ๋„ค์˜ค๋กœ ๋Œ€์ฒดํ–ˆ์Šต๋‹ˆ๋‹ค. +### - GRID๋ณด๋‹ค๋Š” FLEX๋ฅผ ํ™œ์šฉํ•ด์„œ ๊ตฌํ˜„ํ–ˆ์Šต๋‹ˆ๋‹ค. +
+ +# ๊ตฌ์กฐ +### main-visual +### info +### guide +### member +### guide +### footer + +
+ +### header๋Š” main-visual ์•ˆ์— ๋ฐฐ์น˜ํ–ˆ์Šต๋‹ˆ๋‹ค. +### guide๋Š” 770px ์ด์ƒ์—์„œ๋Š” ์‚ฌ๋ผ์ง€๊ฒŒ ํ–ˆ์Šต๋‹ˆ๋‹ค. +
+ +# ์•„์‰ฌ์šด ์  + 1. SCSS์— ๋Œ€ํ•œ ์ง€์‹์ด ์•„์ง์€ ์—†์–ด์„œ SCSS๋ฅผ ํ™œ์šฉํ•˜์ง€ ๋ชปํ–ˆ์Šต๋‹ˆ๋‹ค. + 1. ํด๋ž˜์Šค ๋ช…์„ ์ž…๋ ฅํ•  ๋•Œ, BEM์„ ์ž˜ ํ™œ์šฉํ•˜์ง€ ๋ชปํ•œ ๊ฒƒ ๊ฐ™์•„์„œ ์•„์‰ฌ์› ์Šต๋‹ˆ๋‹ค. diff --git a/css/common.css b/css/common.css new file mode 100644 index 00000000..4f1e9877 --- /dev/null +++ b/css/common.css @@ -0,0 +1,34 @@ +/* common */ +body{ + font-family: 'NanumSquareNeo','Black Han Sans', sans-serif; +} +a{ + text-decoration: none; +} +.back-to-position{ + opacity:0; + transition: 1s; +} +.back-to-position.to-left{ + transform: translateX(100px); +} +.back-to-position.to-up{ + transform: translateY(100px); +} +.show .back-to-position{ + opacity:1; + transform: translateX(0) translateY(0); +} + +.show .back-to-position.delay-0{ + transition-delay: 0s; +} +.show .back-to-position.delay-1{ + transition-delay: .2s; +} +.show .back-to-position.delay-2{ + transition-delay: .4s; +} +.show .back-to-position.delay-3{ + transition-delay: .6s; +} diff --git a/css/mobile.css b/css/mobile.css new file mode 100644 index 00000000..18eda09e --- /dev/null +++ b/css/mobile.css @@ -0,0 +1,354 @@ +/* MAIN-VISUAL */ +.main-visual{ + width:100%; + height:100vh; + background-image:url('../images/main_visual_mobile.jpg'); + background-repeat: no-repeat; + background-size:cover; + background-position: center -10px; + position: relative; +} +header{ + width:100%; + height:52px; + position: relative; + transition:background-color .5s; +} +header.show{ + background-color: #374553; +} +header #logo{ + width:100px; + height:auto; + position: absolute; + top:15px; + left:20px; +} +header .menubar{ + width:36px; + height:14px; + position: absolute; + right:20px; + top:20px; + z-index: 9; + cursor: pointer; +} +header span{ + width:26px; + height:3px; + background-color: #fff; + position:absolute; + transition:all .2s; +} +header .upbar{ + top:0; + left:0; +} +header .downbar{ + bottom:0; + right:0; +} +.menubar .upbar.close{ + transform:translate(5px ,3px) rotate(45deg); + background-color:#00b8ff; +} +.menubar .downbar.close{ + transform:translate(-6px, -8px) rotate(-45deg); + background-color:#00b8ff; +} +.main-visual .slog{ + width:auto; + height:100px; + position:absolute; + top:calc(50% - 50px); + left:0; + right:0; + margin:auto; +} +.main-visual p{ + color:#fff; + font-size:40px; + font-weight:800; + text-align:center; + line-height:1.4; + text-shadow:1px 1px 3px rgba(0,0,0,0.3); +} +.menu{ + width:70%; + height:953px; + background-color:#28323c; + position:fixed; + top:0; + right:-70%; + z-index:3; + transition:right .3s; +} +.menu .gnb hr{ + width:80%; + margin:30px auto 10px; + border:1px solid #3b4a55; +} +.menu .gnb li{ + padding:30px 35px 0px; +} +.menu .gnb .sub{ + padding-left:20px; +} +.menu .gnb li a{ + color:#fff; + font-size:17px; + font-weight: 600; + transition:color .2s; +} +.menu .gnb li:hover a{ + color:#00b8ff; +} +.menu.show{ + right:0; +} +.menu-bg{ + width:100%; + height:901px; + background-color:rgba(0,0,0,0.8); + display:none; + position:fixed; + top:50px; + left:0; + z-index:1; +} +.menu-bg.show{ + display:block; +} + +/* INFO */ +.info{ + padding:100px 20px 0px; + overflow: hidden; +} +.info h1{ + font-size:40px; + font-weight:700; + color:#374553; + padding:15px 0; + position:relative; + display:inline-block; +} +.info h1::after{ + content:""; + width:10px; + height:10px; + border-radius: 50%; + background-color:#0BB8FF; + position:absolute; + bottom:18px; + right:-15px; +} +.info h1 span{ + font-weight:900; +} +.info p{ + font-weight: 700; + color:#aaaaaa; + line-height:1.6; +} +.info img{ + width:100%; + height:auto; + padding:40px 0; +} + +/* MEMBERS */ +.members{ + width:auto; + height:304px; + background-color: #F7F8F9; + position:relative; + overflow:hidden; +} +.members .fact{ + width:100%; + text-align: center; + line-height:1.6; + padding-top:70px; + font-size:25px; + font-weight:700; + color:#888; +} +.members p #counter{ + color:#00b8ff; +} +.members .fact #blue{ + color:#00b8ff; +} +.members .tri{ + width:40%; + height:304px; + background-color: #00b8ff; + transform:skew(-30deg); + position:absolute; + bottom:0; + right:-150px; +} + +/* GUIDE */ +.guide{ + overflow:hidden; +} +.guide ul li{ + width:100%; + height:40px; + line-height:40px; + padding:5px 50px; + border-top: 1px solid #999; +} +.guide ul li a{ + color:#555; + font-weight:600; + font-size:15px; + position:relative; +} +.guide li:nth-child(1) a::before{ + content:""; + width:10px; + height:10px; + background-color: #00b8ff; + border-radius:50%; + position: absolute; + top:calc(50% - 5px); + left:-30px; +} +.guide li:nth-child(2) a::before{ + content:""; + width:10px; + height:10px; + background-color: #00469d; + border-radius:50%; + position: absolute; + top:calc(50% - 5px); + left:-30px; +} +.guide li:nth-child(3) a::before{ + content:""; + width:10px; + height:10px; + background-color: #FFC400; + border-radius:50%; + position: absolute; + top:calc(50% - 5px); + left:-30px; +} +.guide li:nth-child(4) a::before{ + content:""; + width:10px; + height:10px; + background-color: #FF6F61; + border-radius:50%; + position: absolute; + top:calc(50% - 5px); + left:-30px; +} +.guide .arrow::before{ + content:""; + width:32px; + height:20px; + background-image: url('https://www.socar.kr/images/arrow-01.svg'); + position: absolute; + top:calc(50% - 15px); + left:-40px; +} + +/* FOOTER */ +footer{ + width:100%; + background-color:#28323c; + padding: 45px 0px 60px; +} +footer .inner{ + width:90%; + margin:auto; +} +footer .foot-link{ + display:flex; +} +footer .foot-link li{ + margin-right:10px; +} +footer .foot-link li a img{ + width:30px; + height:30px; +} +footer .foot-menu{ + display:flex; + flex-wrap:wrap; + padding:20px 0; +} +footer .foot-menu li{ + margin-right: 20px; +} +footer .foot-menu li a{ + font-size:13px; + color:#c5c8ce; +} +footer .foot-menu li .policy{ + color:#fff; +} +footer .foot-info{ + color:#646f7c; + font-size: 11px; +} +footer .foot-info p{ + line-height:1.6; + margin-bottom:15px; +} +footer .foot-info p a{ + color:#c5c8ce; + text-decoration: underline; +} + +/* DOWNLOAD */ +.download{ + width:100%; + height:56px; + position:fixed; + bottom:0; + right:-800px; + opacity: 0; + z-index:9; + transition:all .5s; +} +.download .banner{ + width:100%; + height:56px; + background-color:#00b8ff; + transform:skew(-20deg) translate(40px,0); +} +.download img{ + width:40px; + height:40px; + border-radius:20%; + box-shadow:2px 2px 5px rgba(0,0,0,0.8); + position:absolute; + top:calc(50% - 20px); + left:30px; +} +.download span{ + width:150px; + height:56px; + text-align: center; + line-height: 56px; + color:#fff; + font-size:20px; + font-weight: 700; + position:absolute; + top:0; + left:calc(50% - 60px); +} +.download span::after{ + content:""; + width:20px; + height:20px; + background-image:url('https://www.socar.kr/images/arrow-down.svg'); + position:absolute; + top:calc(50% - 10px); + right:-20px; +} diff --git a/css/pc.css b/css/pc.css new file mode 100644 index 00000000..95e855e7 --- /dev/null +++ b/css/pc.css @@ -0,0 +1,97 @@ +.main-visual{ + background-image: url('../images/main_visual.jpg'); + background-size:cover; + background-position:center; +} +.main-visual p{ + font-size:60px; +} +header{ + height:60px; +} +header #logo{ + width:112px; + height:auto; + top:18px; + left:30px; +} +header .menubar{ + top:25px; + right:40px; +} +.menu{ + width:30%; +} +.menu-bg{ + height:891px; + top:60px; +} +/* INFO */ +.wrapper{ + margin-bottom:100px; +} +.info{ + width:800px; + margin:auto; +} +.info img{ + width:800px; + height:600px; +} + +/* MEMBERS */ +.members{ + height:444px; +} +.members .fact{ + padding-top:110px; + font-size:35px; +} +.members .tri{ + height:444px; + right:-200px; +} + +/* GUIDE */ +.guide{ + display:none; +} + +/* footer */ +footer .inner{ + width:980px; +} +footer .foot-menu li a{ + font-size: 16px; +} +footer .foot-info{ + display:flex; + justify-content: space-between; + font-size:12px; +} +footer .foot-info > div{ + padding-right:100px; +} + +/* DOWNLOAD */ +.download{ + width:390px; + height:90px; +} +.download .banner{ + height:90px; +} +.download img{ + width:60px; + height:60px; + top:calc(50% - 30px); + left:20px; +} +.download span{ + height:90px; + font-size:20px; + line-height:90px; +} +.download span::after{ + right:-30px; +} \ No newline at end of file diff --git a/images/logo-blue.svg b/images/logo-blue.svg new file mode 100644 index 00000000..506579af --- /dev/null +++ b/images/logo-blue.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + diff --git a/images/logo-w.svg b/images/logo-w.svg new file mode 100644 index 00000000..cc747528 --- /dev/null +++ b/images/logo-w.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + diff --git a/images/main_visual.jpg b/images/main_visual.jpg new file mode 100644 index 00000000..84105268 Binary files /dev/null and b/images/main_visual.jpg differ diff --git a/images/main_visual_mobile.jpg b/images/main_visual_mobile.jpg new file mode 100644 index 00000000..c5b1ee7b Binary files /dev/null and b/images/main_visual_mobile.jpg differ diff --git a/images/usp_a.jpg b/images/usp_a.jpg new file mode 100644 index 00000000..6482dc59 Binary files /dev/null and b/images/usp_a.jpg differ diff --git a/images/usp_b.jpg b/images/usp_b.jpg new file mode 100644 index 00000000..3643589e Binary files /dev/null and b/images/usp_b.jpg differ diff --git a/images/usp_c.jpg b/images/usp_c.jpg new file mode 100644 index 00000000..a0de8c55 Binary files /dev/null and b/images/usp_c.jpg differ diff --git a/images/usp_d.jpg b/images/usp_d.jpg new file mode 100644 index 00000000..6bd469e0 Binary files /dev/null and b/images/usp_d.jpg differ diff --git a/index.html b/index.html new file mode 100644 index 00000000..747736f7 --- /dev/null +++ b/index.html @@ -0,0 +1,204 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + ์ฐจ๊ฐ€ ํ•„์š”ํ•œ ๋ชจ๋“  ์ˆœ๊ฐ„,์˜์นด + + + + +
+
+ +
+ + +
+
+
+ +
+
+ +
+

+ ์ฐจ๊ฐ€ ํ•„์š”ํ•œ
+ ๋ชจ๋“  ์ˆœ๊ฐ„, ์˜์นด
+

+
+
+ + +
+
+

24์‹œ๊ฐ„ ์–ธ์ œ๋‚˜

+

+ ํ•œ๋ฐค์ค‘์ด๋‚˜ ์ฃผ๋ง์—๋„ ์Šค๋งˆํŠธํฐ์œผ๋กœ
+ ์‹œ๊ฐ„์— ๊ตฌ์• ๋ฐ›์ง€ ์•Š๊ณ 
+ ์˜์นด์™€ ํ•จ๊ป˜ ์ด๋™ํ•˜์„ธ์š”. +

+ usp_a +
+ +
+

์›ํ•˜๋Š” ๊ณณ์—์„œ

+

+ ๋‚ด ์ฃผ๋ณ€ 3๋ถ„ ๊ฑฐ๋ฆฌ ์˜์นด์กด์—์„œ
+ ํ˜น์€ ๋‚ด๊ฐ€ ์žˆ๋Š” ๊ณณ์œผ๋กœ ์˜์นด๋ฅผ ๋ถˆ๋Ÿฌ
+ ์–ด๋””์„œ๋‚˜ ํŽธํ•˜๊ฒŒ ์ถœ๋ฐœํ•˜์„ธ์š”. +

+ usp_a +
+ +
+

ํ•„์š”ํ•œ ์‹œ๊ฐ„๋งŒํผ

+

+ ๊ฐ„๋‹จํ•œ ์žฅ๋ณด๊ธฐ๋ถ€ํ„ฐ ์ฃผ๋ง์—ฌํ–‰๊นŒ์ง€
+ 10๋ถ„ ๋‹จ์œ„๋กœ ์›ํ•˜๋Š” ๋งŒํผ๋งŒ ์ด์šฉํ•˜์„ธ์š”. +

+ usp_a +
+ +
+

๋‹ค์–‘ํ•œ ์ฐจ์ข…์„

+

+ ์—ฐ์ธ๊ณผ์˜ ๋“œ๋ผ์ด๋ธŒ๋ถ€ํ„ฐ ๊ฐ€์กฑ ์บ ํ•‘๊นŒ์ง€
+ ์ƒํ™ฉ์— ๋งž๊ฒŒ 50์—ฌ ์ข…์˜ ์ฐจ๋Ÿ‰์„
+ ์„ ํƒํ•ด์„œ ์ด์šฉํ•˜์„ธ์š”. +

+ usp_a +
+
+ + +
+

+ ๋ช…์˜ ํšŒ์›์ด ์˜์นด์™€
+ ํ•จ๊ป˜ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
+ ์ง€๊ธˆ ๋ฐ”๋กœ ์˜์นด ๋“œ๋ผ์ด๋ธŒ๋ฅผ
+ ์‹œ์ž‘ํ•˜์„ธ์š”. +

+
+
+ + +
+ +
+ + + + + +
+ + + download + ์˜์นด ์•ฑ ๋‹ค์šด๋กœ๋“œ + +
+ + + \ No newline at end of file diff --git a/js/main.js b/js/main.js new file mode 100644 index 00000000..4e90b12c --- /dev/null +++ b/js/main.js @@ -0,0 +1,89 @@ +const menuBar = document.querySelector('.main-visual .menubar'); +const stick1 = document.querySelector('.menubar .upbar'); +const stick2 = document.querySelector('.menubar .downbar'); +const header = document.querySelector('header'); +const menu = document.querySelector('.menu'); +const menuBg = document.querySelector('.menu-bg'); +const change = document.querySelector('#logo'); +let i = 1; + +menuBar.addEventListener('click',function(){ + console.log(i); + if(i === 1){ + stick1.classList.add('close'); + stick2.classList.add('close'); + header.classList.add('show'); + menu.classList.add('show'); + menuBg.classList.add('show'); + change.setAttribute("src","./images/logo-blue.svg"); + i = 0; + }else{ + stick1.classList.remove('close'); + stick2.classList.remove('close'); + header.classList.remove('show'); + menu.classList.remove('show'); + menuBg.classList.remove('show'); + change.setAttribute("src","./images/logo-w.svg"); + i = 1; + } +}); + + +const spyEls = document.querySelectorAll('section.scroll-spy'); +spyEls.forEach(function(spyEl){ + new ScrollMagic + .Scene({ + triggerElement: spyEl, // ๋ณด์—ฌ์ง์˜ ์—ฌ๋ถ€๋ฅผ ๊ฐ์‹œํ•  ์š”์†Œ๋ฅผ ์ง€์ • + triggerHook: .8 + }) + .setClassToggle(spyEl, 'show') + .addTo(new ScrollMagic.Controller()); +}); + +// members ์˜์—ญ ์ˆซ์ž ์˜ฌ๋ผ๊ฐ€๋Š” ํšจ๊ณผ + +function numberCounter(target_frame, target_number) { + this.count = 0; this.diff = 0; + this.target_count = parseInt(target_number); + this.target_frame = document.getElementById(target_frame); + this.timer = null; + this.counter(); +}; + numberCounter.prototype.counter = function() { + const self = this; + this.diff = this.target_count - this.count; + + if(this.diff > 0) { + self.count += Math.ceil(this.diff / 5); + } + + this.target_frame.innerHTML = this.count.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','); + + if(this.count < this.target_count) { + this.timer = setTimeout(function() { self.counter(); }, 30); + } else { + clearTimeout(this.timer); + } + }; + +let f = true; +window.addEventListener('scroll', _.throttle(function(){ + if(window.scrollY > 2800){ + if(f == true){ + new numberCounter("counter", 8651684); + f = false; + } + } +})); + +//๋ฐฐ๋„ˆ ๋‚˜ํƒ€๋‚˜๊ธฐ + +const fixBanner = document.querySelector('.download'); + +gsap.to(fixBanner, .2,{ + opacity:'1', + right:'0px', + delay:1 +}); + +