css 정리

jhkimwoowa · jhkimwoowa · commit 0760994aabaf · 2020-01-10T12:31:41.000+09:00
diff --git a/src/app.scss b/src/app.scss
@@ -1,13 +1,23 @@
-@import 'http://github.com/normalize.scss';
+@import 'http://github.com/scss/normalize.scss';
+@import 'http://github.com/scss/variables.scss';
+
+#app {
+  min-width: 320px; // iphone5
+  max-width: 768px; // tablet
+  margin-left: auto;
+  margin-right: auto;
+}
 
 .container {
-  margin: 0 15px 0 15px;
+  margin-left: $span * 2;
+  margin-right: $span * 2;
 }
+
 header {
-  border-bottom: 1px #ccc solid;
-  padding: 15px 0 15px 0;
+  border-bottom: 1px  solid $border-color;
+  margin: 0;
   text-align: center;
 }
 .content {
-  border: 1px solid #ccc;
+  border: 1px solid $border-color;;
 }
diff --git a/src/index.html b/src/index.html
@@ -2,24 +2,27 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>검색<%= env %></title>
   </head>
   <body>
-    <header>
-      <h2 class="container">검색</h2>
-    </header>
-
-    <div class="container">
-      <form class="FormView">
-        <input type="text" placeholder="검색어를 입력하세요" autofocus>
-        <button type="reset" class="btn-reset"></button>
-      </form>
-
-      <div class="content">
-        <div id="tabs"></div>
-        <div id="search-keyword"></div>
-        <div id="search-history"></div>
-        <div id="search-result"></div>
+    <div id="app">
+      <header>
+        <h2 class="container">검색</h2>
+      </header>
+  
+      <div class="container">
+        <form class="FormView">
+          <input type="text" placeholder="검색어를 입력하세요" autofocus>
+          <button type="reset" class="btn-reset"></button>
+        </form>
+  
+        <div class="content">
+          <div id="tabs"></div>
+          <div id="search-keyword"></div>
+          <div id="search-history"></div>
+          <div id="search-result"></div>
+        </div>
       </div>
     </div>
 
diff --git a/src/scss/mixins.scss b/src/scss/mixins.scss
@@ -1,10 +1,4 @@
-$brand-color: #2ac1bc;
-$brand-color-light: lighten($brand-color, 30);
-$grey-color: #eee;
-$grey-color-light: lighten($grey-color, 30);
-$grey-color-dark: darken($grey-color, 30);
-$white-color: #fff;
-$span: 4px;
+@import 'http://github.com/variables.scss';
 
 @mixin btn-close {
   $width: 20px;
diff --git a/src/scss/normalize.scss b/src/scss/normalize.scss
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
@@ -0,0 +1,9 @@
+$brand-color: #2ac1bc;
+$primary-color: blue;
+$secondary-color: #aaa;
+$white-color: #fff;
+
+$border-color: lighten($secondary-color, 20);
+
+$span: 4px;
+
diff --git a/src/views/FormView.scss b/src/views/FormView.scss
@@ -1,4 +1,4 @@
-@import 'http://github.com/variables.scss';
+@import 'http://github.com/scss/mixins.scss';
 
 
 .FormView {
diff --git a/src/views/HistoryView.scss b/src/views/HistoryView.scss
@@ -1,4 +1,4 @@
-@import 'http://github.com/variables.scss';
+@import 'http://github.com/scss/mixins.scss';
 
 .HistoryView {
   @include list();
diff --git a/src/views/KeywordView.scss b/src/views/KeywordView.scss
@@ -1,4 +1,4 @@
-@import 'http://github.com/variables.scss';
+@import 'http://github.com/scss/mixins.scss';
 
 .KeywordView {
   @include list();
diff --git a/src/views/ResultView.scss b/src/views/ResultView.scss
@@ -1,4 +1,4 @@
-@import 'http://github.com/variables.scss';
+@import 'http://github.com/scss/variables.scss';
 
 .ResultView {
   ul {
diff --git a/src/views/TabView.scss b/src/views/TabView.scss
@@ -1,4 +1,4 @@
-@import 'http://github.com/variables.scss';
+@import 'http://github.com/scss/variables.scss';
 
 .TabView {
   display: flex;
@@ -10,9 +10,9 @@
     padding: 15px;
     text-align: center;
     box-sizing: border-box;
-    border-bottom: 1px solid $grey-color-light;
-    background-color: $grey-color;
-    color: $grey-color-dark;
+    border-bottom: 1px solid $border-color;
+    background-color: $white-color;
+    color: $secondary-color;
     &:hover {
       cursor: pointer;
     }

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import 'variables.scss';`
	`1`	`+@import '../scss/mixins.scss';`
`2`	`2`
`3`	`3`
`4`	`4`	`.FormView {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import 'variables.scss';`
	`1`	`+@import '../scss/variables.scss';`
`2`	`2`
`3`	`3`	`.ResultView {`
`4`	`4`	`ul {`