제품추천까지 CSS 완성

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

juhee/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 120,
+  "trailingComma": "all",
+  "bracketSameLine": true,
+  "singleQuote": true
+}

juhee/styles/common.css

@@ -1,15 +1,53 @@
 /* 공통으로 쓰는 칭구들입니당 */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-body{
-    margin: auto;
-    max-width: 1728px;
-    width: 100%;
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
+  src: local('Material Icons'), local('MaterialIcons-Regular'),
+    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
+    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
+    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
 }
 
-li{
-    list-style: none;
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+body {
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 1920px;
+}
+
+li {
+  list-style: none;
 }

juhee/styles/footer.css

@@ -0,0 +1,34 @@
+/* header영역 스타일시트입니다 */
+
+.footer {
+  width: 100%;
+  height: 483px;
+  background-color: #eeeeee;
+}
+
+.footer_contents {
+  width: 1020px;
+  margin: 80px auto auto auto;
+}
+
+.footer_contents_list {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.footer_first_column {
+  color: #333333;
+  width: 248px;
+}
+
+.footer_second_column > p {
+  color: #333333;
+  font-size: 16px;
+  align-items: center;
+}
+
+.footer_last_column > li {
+  display: flex;
+  flex-direction: column;
+}

juhee/styles/header.css

@@ -0,0 +1,147 @@
+/* header영역 스타일시트입니다 */
+
+.header {
+  width: 1020px;
+  height: 192px;
+  margin: 0 100px;
+  display: inline-block;
+  justify-content: center;
+}
+
+.top_menu{
+  width: 100%;
+  }
+
+.menu_list {
+  list-style: none;
+  margin: 0px;
+  padding:0px;
+  float: right;
+  height: 30px;
+  width: 297px;
+  display: flex;
+  align-items: center;
+  justify-content: right;
+}
+
+.menu_list > li {
+  margin: 0 0 0 10px;
+  font-size: 12px;
+}
+
+
+.header_inner {
+  width: 1021px;
+  height: 40px;
+  display: inline-block;
+}
+
+.header_first {
+  width: 100%;
+  margin-top:33px;
+  display: flex;
+  justify-content: space-between;
+}
+
+.logo {
+  width: 248px;
+  height: 42px;
+}
+
+.search_bar {
+  position: relative;
+  width: 540px;
+  height: 40px;
+  border: 2px solid #a6cd48;
+  border-radius: 20px;
+}
+
+.search_btn {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+}
+
+.customer_info {
+  font-size: 15px;
+  margin: 3px 0 0 0;
+}
+
+.header_second {
+  width: 100%;
+  display: flex;
+  margin-top: 19px;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.second_left {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: left;
+}
+
+.second_left > li {
+  margin: 0 10px 0 0;
+}
+
+.second_right {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  display: flex;
+  justify-content: right;
+}
+
+.second_right > li {
+  margin: 0 0 0 15px;
+}
+
+.nav_sub {
+  width: 1020px;
+  height: 20px;
+  margin-top: 30px;
+  display: flex;
+}
+
+.sub_left {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  display: left;
+}
+
+.sub_left > li {
+  margin: 0 8px 0 0;
+  font-size: 16px;
+}
+
+.sub_right {
+  list-style: none;
+  margin: 0px;
+  padding: 0px;
+  width: 100%;
+  height: 20px;
+  display: flex;
+  justify-content: right;
+}
+
+.sub_right > li {
+  margin: 0 0 0 8px;
+  font-size: 16px;
+}
+
+.member_level {
+  color: #a6cd48;
+}
+
+.mypage_variable {
+  color: #ee7d6c;
+}