no message

.gitignore

@@ -0,0 +1,9 @@
+*.zip
+*.psd
+*.pptx
+*.docx
+**/00_plan/
+**/ori/
+_ing/
+_form/
+**/node_modules/

README.md

@@ -1,2 +1,45 @@
-# JadeKorea
-22.04.18 ~ 05.11 / 제이드코리아 / 외주. 기업 소개 홈페이지
+# 🎁 제이드코리아
+> 22.04.18 ~ 05.10 / 제이드코리아 / 외주. 기업 소개 홈페이지  
+> 팀 구성원: 나슬기
+<br/>
+
+## 📖 주제: 주제
+<div align="center">
+
+<img alt="제이드코리아 소개 이미지" src=""/>
+
+</div>
+
+### 프로젝트 목적
++ 목적
+<br/>
+
+## 🛠 사용언어 및 개발 환경
+<div align="center">
+<img alt="Html5" src ="https://img.shields.io/badge/HTML5-E34F26?&style=for-the-badge&logo=HTML5&logoColor=white"/> <img alt="Css3" src ="https://img.shields.io/badge/CSS3-1572B6?&style=for-the-badge&logo=CSS3&logoColor=white"/> <img alt="Javascript" src ="https://img.shields.io/badge/JavaScript ES6-F7DF1E?&style=for-the-badge&logo=JavaScript&logoColor=black"/> <img alt="jQuery" src ="https://img.shields.io/badge/jQuery 3-0769AD?&style=for-the-badge&logo=jQuery&logoColor=white"/>
+<img alt="Visual Studio Code" src ="https://img.shields.io/badge/Visual Studio Code-007ACC?&style=for-the-badge&logo=Visual Studio Code&logoColor=white"/>
+<img alt="CAFE24" src ="https://img.shields.io/badge/CAFE24-0969da?&style=for-the-badge">
+</div>
+<br/>
+
+## 🖥 미리보기
+<table>
+    <tr>
+        <th colspan="2" width="50%">메인 페이지</th>
+        <th width="50%">모바일 페이지</th>
+    </tr>
+    <tr>
+        <td colspan="2"><img alt="메인 이미지" src=""/></td>
+        <td><img alt="모바일 이미지" src=""/></td>
+    </tr>
+    <tr>
+        <th width="33.33%">연락 페이지</th>
+        <th width="33.33%">개인정보취급방침 페이지</th>
+        <th width="33.33%">이용약관 페이지</th>
+    </tr>
+    <tr>
+        <td><img alt="연락 이미지" src="https://user-images.githubusercontent.com/73747247/215312665-20e1a088-e6d7-4b5d-941b-e335c1b4c0e0.jpg"/></td>
+        <td><img alt="개인정보취급방침 이미지" src="https://user-images.githubusercontent.com/73747247/215312617-c87ef988-5999-479f-bf1d-98db2d335309.jpg"/></td>
+        <td><img alt="이용약관 이미지" src="https://user-images.githubusercontent.com/73747247/215312618-c2b3b678-17be-4fa5-860a-72e5c25dc69e.jpg"/></td>
+    </tr>
+</table>

agreement.html

@@ -0,0 +1,10 @@
+<!--@layout(/pList/jk/import/layout.html)-->
+<!--@css(/pList/jk/css/agreement.css)-->
+<section class="agreeWrap layoutCenter">
+    <h1>이용약관</h1>
+    <div module="mall_term" class="txtBox">
+        <div class="agree">
+            {$mall_agreement}
+        </div>
+    </div>
+</section>

contact.html

@@ -0,0 +1,23 @@
+<!--@layout(/pList/jk/import/layout.html)-->
+<section class="contact layoutCenter">
+    <h2 class="title">CONTACT</h2>
+    <div class="mapWrap">
+        <div id="daumRoughmapContainer1651825543258" class="root_daum_roughmap root_daum_roughmap_landing"></div>
+        <script charset="UTF-8" class="daum_roughmap_loader_script" src="https://ssl.daumcdn.net/dmaps/map_js_init/roughmapLoader.js"></script>
+        <script charset="UTF-8">
+            new daum.roughmap.Lander({
+                "timestamp" : "1651825543258",
+                "key" : "2a5hi",
+                "mapWidth" : "100%",
+                "mapHeight" : "360"
+            }).render();
+        </script>
+        <ul class="contactInfo">
+            <li><img src="/pList/jk/logo_k.jpg" alt="제이드코리아"></li>
+            <li><dl><dt>ADDRESS</dt><dd>서울시 종로구 자하문로 33길61 B 101</dd></dl></li>
+            <li><dl><dt>MAIL</dt><dd><a href="mailto:Jadekorea5@naver.com">Jadekorea5@naver.com</a></dd></dl></li>
+            <li><dl><dt>TEL</dt><dd><a href="tel:02-722-7221">02. 722. 7221</a></dd></dl></li>
+            <li><dl><dt>HP</dt><dd><a href="tel:010-2226-7221">010. 2226. 7221</a></dd></dl></li>
+        </ul>
+    </div>
+</section>

css/agreement.css

@@ -0,0 +1,5 @@
+/* 약관 */
+.agreeWrap h1 { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--subGray_30); }
+.agreeWrap .txtBox,
+.agreeWrap .txtBox .agree { width: 100%; padding: 20px; border: 1px solid var(--subGray_30); box-sizing: border-box; background-color: #fff; font-size: 16px; }
+.agreeWrap .txtBox { background-color: var(--subGray_5); }

css/common.css

@@ -0,0 +1,166 @@
+@charset "utf-8";
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/variable/pretendardvariable-dynamic-subset.css");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&family=Open+Sans:wght@300;400;500;600;700;800&display=swap');
+/* common.css */
+/* ======변수====== */
+:root {
+    /* 시간 */
+    --speed_q: 0.1s; --speed_n: 0.5s; --speed_s: 1s;
+    /* 컬러 */
+    --mainTxtColor: #1b1b1b; --subTxtColor: #757575;
+    --subGray_5: #f2f4f5; --subGray_10: #e6e8eb; --subGray_20: #d1d5d9; --subGray_30: #b8bfc4; --subGray_40: #9ea7ad; --subGray_50: #808991; --subGray_60: #636c73; --subGray_70: #525a61; --subGray_80: #40474d; --subGray_90: #303538;
+}
+
+/* ======form====== */
+/* 공통 */
+select,
+input[type="checkbox"],
+input[type="radio"],
+input[type="text"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+input[type="tel"],
+textarea { max-width: 100%; height: 30px; padding: 0 7px; border: 1px solid var(--subGray_30); outline-style: none; appearance: none; -webkit-appearance: none; -moz-appearance: none; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; color: var(--subTxtColor); }
+select:focus,
+input[type="checkbox"]:focus,
+input[type="radio"]:focus,
+input[type="text"]:focus,
+input[type="email"]:focus,
+input[type="password"]:focus,
+input[type="number"]:focus,
+input[type="tel"]:focus,
+textarea:focus { border-color: var(--subGray_60); }
+
+/* 텍스트 입력 박스 */
+textarea { height: auto; padding: 5px 7px; }
+
+/* 파일 첨부 박스 */
+input[type="file"] { overflow: hidden; max-width: 100%; }
+
+/* 라디오/체크박스 */
+input[type="checkbox"],
+input[type="radio"] { width: 25px; height: 25px; margin-right: 4px; cursor: pointer; }
+input[type="checkbox"]:hover,
+input[type="radio"]:hover,
+input[type="checkbox"]:hover + label,
+input[type="radio"]:hover + label,
+label:hover { opacity: 0.7; }
+input:checked[type="checkbox"] { border-color: var(--mainColor); background: var(--mainColor) url("../images/icon/ico_check.png") no-repeat 0 0; background-size: cover;; }
+input[type="radio"] { padding: 4px; border-radius: 50%; }
+input:checked[type="radio"] { border-color: var(--mainColor); }
+input:checked[type="radio"]::before { display: block; content: ""; width: 100%; height: 100%; border-radius: 50%; background-color: var(--mainColor); }
+
+/* 선택박스 */
+select { margin: 0; padding: 0 30px 0 10px; background: url(../images/icon/ico_option_down.png) no-repeat calc(100% - 5px) center; background-size: 20px 20px; cursor: pointer; }
+
+/* 비활성화 */
+button[disabled], button:disabled, button[disabled],
+input:disabled, input:disabled, input[disabled],
+select.disabled, select:disabled, select[disabled],
+textarea.disabled, textarea:disabled, textarea[disabled] { background-color: var(--subGray_20); color: var(--subGray_70); cursor: default; pointer-events: none; }
+select.disabled, select:disabled, select[disabled] { background: var(--subGray_20) url(../images/icon/ico_option_disable.png) no-repeat 90% center; background-size: 20px 20px; }
+
+/* ======폰트====== */
+html { font-family: 'Pretendard Variable', 'Noto Sans KR', '돋움', Dotum, Tahoma, Geneva, sans-serif; font-feature-settings: 'case', 'ccmp', 'tnum', 'ss01', 'ss02', 'ss03', 'ss07', 'ss08'; -webkit-font-feature-settings: 'case', 'ccmp', 'tnum', 'ss01', 'ss02', 'ss03', 'ss07', 'ss08'; -moz-font-feature-settings: 'case', 'ccmp', 'tnum', 'ss01', 'ss02', 'ss03', 'ss07', 'ss08'; } /* Pretendard 기준 대문자에 맞춘 숫자, 합성문자, 고정폭 숫자, 곧은 69, 열린4, 가운데 맞춤 :, 단층 a, 직선 3 */
+.serif { font-family: 'Noto Serif KR', serif; }
+.eng { font-family: 'Open Sans'; }
+.frac { font-feature-settings: 'frac'; -webkit-font-feature-settings: 'frac'; -moz-font-feature-settings: 'frac'; } /* Pretendard 기준 분수 */
+.sups { font-feature-settings: 'sups'; -webkit-font-feature-settings: 'sups'; -moz-font-feature-settings: 'sups'; } /* Pretendard 기준 윗첨자 */
+.subs { font-feature-settings: 'subs'; -webkit-font-feature-settings: 'subs'; -moz-font-feature-settings: 'subs'; } /* Pretendard 기준 아래첨자 */
+.zero { font-feature-settings: 'zero'; -webkit-font-feature-settings: 'zero'; -moz-font-feature-settings: 'zero'; } /* Pretendard 기준 슬래쉬 0 */
+.middleDot { font-feature-settings: 'ss05'; -webkit-font-feature-settings: 'ss05'; -moz-font-feature-settings: 'ss05'; } /* Pretendard 기준 가운데 말줄임표 */
+
+/* 굵기 */
+.light { font-weight: 300 }
+.normal { font-weight: 400 }
+.bold { font-weight: 700 }
+.bolder { font-weight: 800 }
+
+/* 정렬 */
+.txtLeft { text-align: left; }
+.txtCenter { text-align: center; }
+.txtRight { text-align: right; }
+
+/* ======레이아웃====== */
+/* 공통 레이아웃 */
+::selection { background-color: var(--mainColor); color: #fff; }
+::-moz-selection { background-color: var(--mainColor); color: #fff; }
+.bgColor::selection { background-color: #fff; color: var(--mainColor); }
+.bgColor::-moz-selection { background-color: #fff; color: var(--mainColor); }
+
+html { width: 100%; scroll-behavior: smooth; color: var(--mainTxtColor); line-height: 1.5; word-break: keep-all; }
+body#popup { min-width: 0; }
+
+/* 반응형 클래스 */
+.mobileShow { display: none; }
+.layoutCenter { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
+/* 탭 */
+@media (max-width: 1024px) and (min-width: 768px){ .layoutCenter { max-width: auto; padding-left: 20px; padding-right: 20px; } }
+/* 모바일 */
+@media (max-width: 768px){ #main { min-width: 360px; } .layoutCenter { width: 90%; } .pcShow { display: none; } .mobileShow { display: block !important; } }
+
+/* flex 관련 */
+.displayFlex { display: -ms-flexbox; display: -webkit-box; display: flex; }
+.displayFlex.flexWrap { -ms-flex-wrap: wrap; -webkit-box-lines: multiple; flex-wrap: wrap; }
+.displayFlex.directionRow { -ms-flex-direction: row; -webkit-box-orient: horizontal; flex-direction: row; }
+.displayFlex.directionColumn { -ms-flex-direction: column; -webkit-box-orient: vertical; flex-direction: column; }
+.displayFlex.directionRowR { -ms-flex-direction: row-reverse; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; flex-direction: row-reverse; }
+.displayFlex.directionColumnR { -ms-flex-direction: column-reverse; -webkit-box-orient: vertical; -webkit-box-direction: reverse; flex-direction: column-reverse; }
+.displayFlex.contentCenter { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; }
+.displayFlex.contentStart { -ms-flex-pack: start; -webkit-box-pack: start; justify-content: flex-start; }
+.displayFlex.contentEnd { -ms-flex-pack: end; -webkit-box-pack: end; justify-content: flex-end; }
+.displayFlex.contentBetween { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; }
+.displayFlex.contentAround { justify-content: space-around; }
+.displayFlex.contentEvenly { justify-content: space-evenly; }
+.displayFlex.alignCenter { -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
+.displayFlex.alignStart { -ms-flex-align: start; -webkit-box-align: start; align-items: flex-start; }
+.displayFlex.alignEnd { -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; }
+.displayFlex.alignStretch { -ms-flex-align: stretch; -webkit-box-align: stretch; align-items: stretch; }
+.displayFlex.flexCenter { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
+.displayFlex .flex1 { width: 100%; flex: 1; }
+.displayFlex .flex2 { width: 100%; flex: 2; }
+.displayFlex .flex3 { width: 100%; flex: 3; }
+.displayFlex .flex4 { width: 100%; flex: 4; }
+.displayFlex .flex5 { width: 100%; flex: 5; }
+
+/* 비노출 처리 */
+hr.layout { display: none; }
+.displaynone { display: none; }
+.objHidden { visibility: hidden; width: 0; height: 0; position: absolute; left: -1000px; top: -1000px; }
+
+/* 탐색경로바 */
+.path span { display: none; }
+.path ol { color: var(--subGray_20); font-size: 16px; }
+.path li::after { display: inline; content: ">"; padding: 0 10px; }
+.path li:last-child::after { display: none; }
+.path li strong { color: var(--subGray_30); }
+
+/* 글쓰기 웹에디터 */
+pre { width: 100%; margin: 15px 0; padding: 5px; border: 1px solid #e4eeff; border-radius: 2px; box-sizing: border-box; overflow: auto; background-color: #f6f9ff; font-size: 12px; text-align: left; }
+pre samp { color: #3777e4; }
+#content_CONTAINER table, #bi_inquire_content_CONTAINER table { table-layout:auto; border:0; margin:0 0 -1px; }
+#content_CONTAINER table:before, #bi_inquire_content_CONTAINER table:before { display:none; }
+#content_CONTAINER td, #bi_inquire_content_CONTAINER td { width:auto !important; padding:0; }
+table.nneditor-table { width:auto !important; }
+.nnContents table { table-layout:auto; }
+.nnContents select { background:none; -webkit-appearance:menulist; }
+
+/* 퀵뷰 모달 */
+#modalBackpanel { display:none; position:absolute; top:0; left:0; z-index:10000; width:100%; height:100%; background:#000; }
+#modalContainer { display:none; position:absolute; top:100px; left:100px; z-index:10001; width:975px; height:720px; border:1px solid #333; background:#fff; }
+#modalContainer #modalContent { width:100%; height:100%; }
+
+/* 영상 */
+.videoBg{ width:100%; position: relative; padding-bottom: 56.25%; }
+.videoBg iframe,
+.videoBg object,
+.videoBg embed { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
+.videoBg > img,
+.videoBg .posterImg { width: 100%; position: absolute; top:0; left:0; }
+video { display: block; width: 100%; }/* 하단 여백 제거용 */
+video[poster]{ width:100%; height:100%; }/* 포스터 이미지의 크기를 비디오 영상에 꽉차도록 */
+
+/* 이미지 */
+.imgWrap img { width:100%; }
+img.need { width: 5px; height: 5px; }/* 필수 표기 이미지 */

css/layout.css

@@ -0,0 +1,85 @@
+/* 레이아웃 */
+html { --mainColor: #a87dff; --mainColor_5: #f2e5ff; --mainColor_20: #e4bbff; --mainColor_40: #bb99ff; --mainColor_80: #330f55; font-size: 20px; }
+a:hover,
+.color { color: var(--mainColor); }
+.bgColor { background-color: var(--mainColor); color: #fff; }
+.underline { display: inline-block; background: url(../images/underscore_puple.png) center bottom no-repeat; background-size: contain; }
+.color.underline { background-image: url(../images/underscore_yellow.png); }
+
+/* 폰트 */
+h1 { font-size: 70px; }
+h2 { font-size: 38px; }
+h3 { font-size: 24px; }
+
+/* 헤더 */
+header { display: block; width: 100%; padding: 20px 0; position: fixed; top: 0; left: 0; z-index: 99; transition: 0.5s; color: var(--subGray_60); font-size: 16px; }
+header.on { background-color: #ffffffcc; -webkit-box-shadow: 0 0 35px #0003; box-shadow: 0 0 35px #0003; }
+header .headerWrap .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+header .headerWrap .logo img { height: 40px; transform: translateX(-10px) scale(1.5); }
+header .headerWrap,
+header .headerWrap ul { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
+header .headerWrap { -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; }
+header .headerWrap ul li { margin-right: 10px; }
+header .headerWrap .leftWrap li { margin-right: 40px; }
+header .headerWrap ul li:last-child { margin-right: 0; }
+header .headerWrap .rightWrap svg { display: block; width: 20px; height: 20px; fill: none; stroke: var(--subTxtColor); stroke-linecap: round; stroke-linejoin: round; stroke-width: 7px; }
+header .headerWrap .rightWrap .cart { position: relative; }
+header .headerWrap .rightWrap .cart .cart_num { display: block; width: 10px; height: 10px; padding: 2px; border-radius: 50%; position: absolute; top: -2px; right: -2px; font-size: 10px; line-height: 10px; }
+
+/* footer */
+footer { padding: 50px 0; background-color: var(--subGray_5); color: var(--subGray_70); font-size: 16px; word-break: break-all; }
+footer .info .mallName { margin-bottom: 10px; }
+footer .linkWrap { margin-top: 30px; color: var(--subGray_50); }
+footer .linkWrap .layoutCenter ul li { padding: 0 20px; border-left: 1px solid var(--subGray_20); }
+footer .linkWrap .layoutCenter ul li:first-child { padding-left: 0; border: none; }
+footer .linkWrap .layoutCenter ul li:last-child { padding-right: 0; }
+
+/* 섹션 */
+main section { width: 100%; overflow: hidden; }
+main section .title { font-weight: 300; }
+main section .title + p { margin-top: 20px; word-break: break-all; }
+
+/* 플로팅 효과 */
+main section .scroll { transform: translateY(100px); opacity: 0; }
+main section .scroll.scrollAction { animation: showUp 1s forwards; }
+@keyframes showUp { 100% { transform: translateY(0); opacity: 1 } }
+
+@media (min-width: 768px) {
+    /* 레이아웃 */
+    .chageOrder { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center; }
+    .chageOrder > *:first-child { order: 1; }
+
+    /* footer */
+    footer .layoutCenter { display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-pack: justify; -webkit-box-pack: justify; justify-content: space-between; -ms-flex-align: end; -webkit-box-align: end; align-items: flex-end; }
+}
+@media (max-width: 1200px) and (min-width: 768px){
+    /* 레이아웃 */
+    .layoutCenter { max-width: auto; padding-left: 20px; padding-right: 20px; }
+}
+@media (max-width: 768px){
+    /* 레이아웃 */
+    #main { min-width: 360px; font-size: 18px; }
+    .layoutCenter { width: 90%; }
+
+    /* 폰트 */
+    h1 { font-size: 40px; }
+    h2 { font-size: 22px; }
+    h3 { font-size: 18px; }
+
+    /* 헤더 */
+    header { padding: 15px 0; }
+    header .headerWrap img { height: 27px; transform: scale(1.5); }
+    header .headerWrap .menu svg { display: block; width: 20px; height: 20px; fill: var(--subTxtColor); }
+    header .headerWrap .menu svg rect { transition: 0.5s; }
+    header .headerWrap .leftWrap { -ms-flex-direction: column; -webkit-box-orient: vertical; flex-direction: column; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; width: 100%; height: 0; overflow: hidden; position: absolute; top: 100%; left: 0; -webkit-box-shadow: 0 15px 35px #0003; box-shadow: 0 15px 35px #0003; background-color: #ffffffcc; transition: 0.5s; }
+    header .headerWrap .leftWrap li { width: 100%; margin: 0; padding: 10px 0; }
+    header .headerWrap .leftWrap.on { height: 176px; }
+    header .headerWrap .rightWrap .log { display: none; }
+
+    /* footer */
+    footer { font-size: 14px; }
+    footer .csCenter { margin-top: 30px; }
+    footer .linkWrap .layoutCenter { display: block; }
+    footer .linkWrap .layoutCenter ul { -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; }
+    footer .linkWrap .layoutCenter ul:last-child { margin-top: 10px; }
+}