[이태경] Sprint1

assets/css/common.css

@@ -0,0 +1,161 @@
+/* ====== common ====== */
+#wrap {
+  background: #fcfcfc;
+}
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 5px;
+  color: var(--white);
+  font-weight: 600;
+  background: var(--btn-default-bg);
+  transition: background 0.2s ease;
+}
+.btn:not(.white):hover {
+  background: var(--btn-hover-bg);
+}
+.btn:not(.white):active {
+  background: var(--btn-active-bg);
+}
+.btn:not(.white):disabled {
+  background: var(--btn-disabled-bg);
+  cursor: default;
+}
+
+.btn.white {
+  border: 1px solid var(--btn-white-color);
+  color: var(--btn-white-color);
+  background: var(--btn-white-bg);
+}
+
+/* small */
+.btn.sm {
+  min-width: 88px;
+  height: 48px;
+  font-size: 16px;
+  border-radius: 8px;
+}
+
+/* medium */
+.btn.md {
+  min-width: 240px;
+  height: 48px;
+  font-size: 18px;
+  border-radius: 40px;
+}
+
+/* large */
+.btn.lg {
+  min-width: 357px;
+  height: 56px;
+  font-size: 18px;
+  border-radius: 40px;
+}
+
+.btn.h40 {
+  height: 40px;
+}
+
+.inner {
+  max-width: 1120px;
+  width: calc(100% - 32px);
+  margin: 0 auto;
+}
+
+/* header */
+#header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 70px;
+  background: var(--white);
+  padding: 0 200px;
+}
+#header .inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: auto;
+  flex: 1;
+}
+#header .logo a {
+  display: block;
+  width: 153px;
+}
+
+/* footer */
+#footer {
+  padding: 32px 0 108px;
+  background: var(--footer-bg);
+}
+#footer .inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+#footer .copy {
+  color: #9ca3af;
+}
+#footer .foot_link ul {
+  display: flex;
+  align-items: center;
+}
+#footer .foot_link ul a {
+  display: block;
+  padding: 0 15px;
+  color: #e5e7eb;
+}
+#footer .sns_link ul {
+  display: flex;
+  align-items: center;
+}
+#footer .sns_link ul a {
+  display: block;
+  padding: 0 6px;
+}
+
+@media screen and (max-width: 1200px) {
+  #header {
+    padding: 0 50px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #header {
+    padding: 0 16px;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .btn.sm {
+    min-width: 128px;
+    font-size: 16px;
+  }
+  .btn.lg {
+    min-width: 240px;
+    height: 48px;
+    font-size: 18px;
+  }
+  #footer {
+    padding: 32px 0 65px;
+  }
+  #footer .inner {
+    position: relative;
+    align-items: flex-start;
+    flex-direction: column-reverse;
+    gap: 25px;
+  }
+  #footer .foot_link ul {
+    gap: 30px;
+  }
+  #footer .foot_link ul a {
+    padding: 0;
+  }
+  #footer .sns_link {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+}

assets/css/reset.css

@@ -0,0 +1,31 @@
+/* ====== reset ====== */
+* {
+  margin: 0;
+  padding: 0;
+  font: inherit;
+  box-sizing: border-box;
+  word-break: keep-all;
+}
+
+html,
+body {
+  font-family: "Pretendard Variable", Pretendard, sans-serif;
+  color: #374151;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+}
+
+ul,
+ol {
+  list-style: none;
+}

assets/css/style.css

@@ -0,0 +1,193 @@
+@import "reset.css";
+@import "variables.css";
+@import "common.css";
+
+/* ====== main ====== */
+#main .inner {
+  padding: 0 5px;
+}
+#main .main_title {
+  font-size: 40px;
+  font-weight: 700;
+}
+
+/* main_visual_sec */
+#main .main_visual_sec {
+  background: var(--main-banner-bg);
+}
+#main .main_visual_sec .inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  height: 540px;
+}
+#main .main_visual_sec .text_box {
+  padding-bottom: 100px;
+  flex: 0 0 auto;
+}
+#main .main_visual_sec .text_box .btn {
+  margin-top: 32px;
+}
+
+/* service_sec */
+#main .service_sec {
+  background: var(--white);
+}
+#main .service_article {
+  padding: 138px 0;
+}
+#main .service_cont {
+  display: flex;
+  align-items: center;
+  gap: 64px;
+  max-width: 988px;
+  margin: 0 auto;
+  background: #fcfcfc;
+  border-radius: 12px;
+  overflow: hidden;
+}
+#main .service_cont .category {
+  display: block;
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--service-cat-color);
+}
+#main .service_cont .desc {
+  margin-top: 24px;
+  font-size: 24px;
+  font-weight: 500;
+}
+
+#main .service_article:nth-of-type(even) .service_cont {
+  flex-direction: row-reverse;
+}
+#main .service_article:nth-of-type(even) .text_box {
+  text-align: right;
+}
+
+#main .service_article:nth-of-type(1) .service_cont {
+  padding-left: 24px;
+}
+
+#main .service_article:nth-of-type(2) .service_cont {
+  padding-right: 14px;
+}
+
+/* banner_sec */
+#main .banner_sec {
+  margin-top: 138px;
+  background: var(--main-banner-bg);
+}
+#main .banner_sec .inner {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  height: 540px;
+}
+#main .banner_sec .main_title {
+  padding-bottom: 172px;
+  flex: 0 0 auto;
+}
+
+@media screen and (max-width: 1200px) {
+  #main .main_title {
+    font-size: 36px;
+  }
+  #main .main_visual_sec .inner {
+    height: 400px;
+  }
+  #main .service_article {
+    padding: 80px 0;
+  }
+  #main .service_cont {
+    gap: 40px;
+  }
+  #main .service_cont .service_img,
+  #main .service_cont .text_box {
+    flex: 1;
+  }
+  #main .service_article:nth-of-type(1) .service_cont {
+    padding-left: 0;
+  }
+  #main .service_article:nth-of-type(2) .service_cont {
+    padding-right: 0;
+  }
+  #main .banner_sec {
+    margin-top: 100px;
+  }
+  #main .banner_sec .inner {
+    height: 400px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  #main .main_title {
+    font-size: 32px;
+  }
+  #main .main_visual_sec .inner {
+    display: block;
+    height: auto;
+  }
+  #main .main_visual_sec .text_box {
+    padding: 84px 0 210px;
+    text-align: center;
+  }
+  #main .service_article {
+    padding: 50px 0;
+  }
+  #main .service_cont {
+    display: block;
+    border-radius: 0;
+  }
+  #main .service_cont .service_img img {
+    width: 100%;
+    border-radius: 14px;
+  }
+  #main .service_cont .text_box {
+    margin-top: 24px;
+  }
+  #main .service_cont .desc {
+    font-size: 18px;
+  }
+  #main .banner_sec .inner {
+    display: block;
+    height: auto;
+  }
+  #main .banner_sec .main_title {
+    padding: 200px 0 216px;
+    text-align: center;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  #main .main_visual_sec .text_box {
+    padding: 48px 0 132px;
+  }
+  #main .main_visual_sec .text_box .btn {
+    margin-top: 18px;
+  }
+  #main .service_article {
+    padding: 30px 0;
+  }
+  #main .service_cont .service_img img {
+    border-radius: 7px;
+  }
+  #main .service_cont .category {
+    margin-bottom: 8px;
+    font-size: 16px;
+  }
+  #main .service_cont .text_box .main_title {
+    font-size: 24px;
+  }
+  #main .service_cont .desc {
+    margin-top: 16px;
+    font-size: 16px;
+  }
+  #main .banner_sec {
+    margin-top: 30px;
+  }
+  #main .banner_sec .main_title {
+    padding: 120px 0 130px;
+  }
+}