반응형 웹 작업 1단계

모바일 작업 진행중
leeduyoung · Dec 11, 2019 · 481cd3c · 481cd3c
1 parent 88fe81e
commit 481cd3c
Show file tree

Hide file tree

Showing 9 changed files with 89,343 additions and 45 deletions.
diff --git a/assets/js/bundle.min.js b/assets/js/bundle.min.js
diff --git a/assets/js/bundle.min.js.map b/assets/js/bundle.min.js.map
diff --git a/assets/js/career.min.js b/assets/js/career.min.js
diff --git a/assets/js/career.min.js.map b/assets/js/career.min.js.map
diff --git a/src/Application.scss b/src/Application.scss
@@ -25,7 +25,11 @@ footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 html {
-	font-size: 10px;
+    font-size: 10px;
+
+    @media (max-width: 375px) {
+        font-size: 7px;
+    }
 }
 body {
 	line-height: 1;

diff --git a/src/Contents.scss b/src/Contents.scss
@@ -12,6 +12,10 @@
         height: 100vh;
         background-color: #fafafa;
 
+        @media (max-width: 375px) {
+            min-height: 950px;
+        }
+
         .inner {
             position: absolute;
             top: 50%;
@@ -20,9 +24,13 @@
             text-align: center;
             width: 100%;
 
+            @media (max-width: 375px) {
+                padding: 1.2rem;
+                box-sizing: border-box;
+            }            
+
             .title {
-                font-size: 94px;
-                // color: #8cddeb;
+                font-size: 9.4rem;
                 color: black;
             }
             .sub-title {
@@ -66,8 +74,6 @@
                         height: 3rem;
                         margin-left: 1.5rem;
                         border-radius: 50%;
-                        // background-color: #ffe079;
-                        // box-shadow: 0 0 0 5px #ffe079;
                         background-color: black;
                         box-shadow: 0 0 0 5px black;
                         position: relative;
@@ -119,8 +125,7 @@
             padding-top: 7.8rem;
 
             .title {
-                font-size: 94px;
-                // color: #8cddeb;
+                font-size: 9.4rem;
                 color: black;
             }
             .sub-title {
@@ -136,16 +141,19 @@
                 padding: 11rem 7.7rem;
                 box-sizing: border-box;
 
+                @media (max-width: 375px) {
+                    padding: 4rem 1rem;
+                }
+
                 .left, .right {
                     float: left;
                     padding: 0 1.1rem;
                     box-sizing: border-box;
-                }
-                .left {
-                    width: 50%;
-                }
-                .right {
                     width: 50%;
+
+                    @media (max-width: 375px) {
+                        width: 100%;
+                    }
                 }
 
                 .left .work-item:hover, .right .work-item:hover {
@@ -181,6 +189,10 @@
                         display: block;
                         width: 100%;
                         height: auto;
+
+                        @media (max-width: 375px) {
+                            opacity: 0.3;
+                        }                        
                     }
 
                     figcaption {
@@ -233,6 +245,10 @@
                         top: 50%;
                         transform: translate(-50%,-50%);
 
+                        @media (max-width: 375px) {
+                            display: inherit;
+                        }
+
                         .caption-title {
                             font-size: 3.6rem;
                         }

diff --git a/src/Contents.tsx b/src/Contents.tsx
@@ -27,6 +27,11 @@ export class Contents extends React.Component
                         <p className="description03">
 
                             <p className="simple-career">
+                                {/* <span>아이지넷</span> / 하이브리드 앱, 웹 개발 / 2018.07 ~ 2019.09\
+                                <span>에이치앤비라이프</span> / 하이브리드 앱, 웹 개발 / 2017.03 ~ 2018.07
+                                <span>LEESET(창업)</span> / 전체 서비스 개발 (앱, 웹, 서버) / 2016.04 ~ 2017.03
+                                <span>오픈베이스</span> / 보안 솔루션 연구 및 개발 (백엔드) / 2015.03 ~ 2016.03 */}
+
                                 <span>아이지넷</span> / 하이브리드 앱, 웹 개발 / 2018.07 ~ 2019.09
 
                                 <br />

diff --git a/src/Footer.scss b/src/Footer.scss
@@ -20,10 +20,23 @@
             padding-bottom: 7.2rem;
             border-bottom: 1px solid #ddd;
 
+            @media (max-width: 375px) {
+                padding: 1rem 6rem 4rem;
+                text-align: left;
+            }
+
             ul li {
                 display: inline-block;
                 padding-right: 2.2rem;
                 position: relative;
+
+                &:last-child {
+                    margin-top: 2rem;
+                }
+
+                @media (max-width: 375px) {
+                    padding-right: 0;
+                }                
 
                 a {
                     text-decoration: none;

diff --git a/src/Visual.scss b/src/Visual.scss
@@ -10,6 +10,11 @@
     margin: 0 auto;
     background-position: 0 80%;
 
+    @media (max-width: 375px) {
+        min-height: auto;
+        background-position: 45% 0;
+    }
+
     .inner {
         position: relative;
         width: 100%;
@@ -96,6 +101,7 @@
             opacity: 0.6;
             font-size: 1.5rem;
             transition: all 0.5s;
+            -webkit-tap-highlight-color: transparent;
 
             .text {
                 font-weight: 500;