diff --git "a/3\352\270\260/KimTaeYoung/week2/css/style.css" "b/3\352\270\260/KimTaeYoung/week2/css/style.css"
new file mode 100644
index 0000000..6d592c8
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/css/style.css"
@@ -0,0 +1,943 @@
+/* common */
+*, ::before, ::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', 'Pretendard', sans-serif;
+  font-size: 16px;
+  line-height: 160%;
+  color: #2D3436;
+}
+
+button {
+  color: inherit;
+}
+
+.screen-reader-text {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+  word-wrap: normal !important;
+}
+
+.container {
+  margin: 0 auto;
+  padding: 0 32px;
+  max-width: calc(1200px + 32px + 32px);
+  width: 100%;
+}
+
+@media (max-width: 767px) {
+  .container {
+    padding-left: 16px;
+    padding-right: 16px;
+    max-width: calc(1200px + 16px + 16px);
+  }
+}
+
+html.scroll-lock,
+html.scroll-lock body {
+  overflow: hidden;
+}
+
+
+/* wrap */
+#wrap {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #fafafa;
+}
+
+
+/* header */
+#header {
+  flex: 0 0 auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  width: 100%;
+  background-color: #fff;
+  backdrop-filter: blur(5px);
+}
+
+#header .container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 100px;
+}
+
+#header .title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 20px;
+  line-height: 160%;
+  color: #2D3436;
+  text-transform: uppercase;
+}
+
+#header .navigation {
+  display: flex;
+  align-items: center;
+}
+#header .navigation .toggle-sidebar {
+  position: relative;
+  right: -10px;
+  z-index: 11;
+  display: none;
+  width: 44px;
+  height: 44px;
+  background: transparent url('../svgs/menu.svg') no-repeat center center;
+  border: 0;
+  cursor: pointer;
+}
+#header .navigation ul {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  gap: 20px;
+}
+#header .navigation ul::after {
+  content: '';
+  display: none;
+  position: absolute;
+  top: 0;
+  right: 100%;
+  width: 100vw;
+  height: 100%;
+  background-color: #2d3436;
+  opacity: 0.8;
+}
+#header .navigation li button {
+  padding: 20px 10px;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 160%;
+  text-transform: uppercase;
+  cursor: pointer;
+  color: #2D3436;
+  background-color: transparent;
+  border: 0;
+}
+#header .navigation li.active button {
+  font-weight: 900;
+}
+
+@media (max-width: 1023px) {
+  #header .container {
+    height: 70px;
+  }
+
+  #header .title {
+    font-size: 18px;
+  }
+
+  #header .navigation .toggle-sidebar {
+    display: block;
+  }
+
+  #header .navigation ul {
+    position: fixed;
+    top: 0;
+    left: 100%;
+    z-index: 10;
+    flex-direction: column;
+    padding: 100px 0;
+    gap: 0;
+    width: 250px;
+    height: 100vh;
+    background-color: #fff;
+    transform: translate3d(0, 0, 0);
+    transition: transform 0.3s;
+  }
+
+  #header .navigation li button {
+    display: block;
+    width: 100%;
+    text-align: left;
+    border-bottom: 1px solid #DFE4EA;
+  }
+
+  /* sidebar active */
+  html.sidebar-active,
+  html.sidebar-active body {
+    overflow: hidden;
+  }
+
+  html.sidebar-active #header .navigation ul {
+    transform: translate3d(-100%, 0, 0);
+  }
+  html.sidebar-active #header .navigation ul::after {
+    display: block;
+  }
+
+  html.sidebar-active #header .navigation .toggle-sidebar {
+    background-image: url('../svgs/close.svg');
+  }
+}
+
+@media (max-width: 767px) {
+  #header .container {
+    height: 50px;
+  }
+
+  #header .title {
+    font-size: 12px;
+  }
+}
+
+/* main */
+#main {
+  flex: 1 1 auto;
+  display: flex;
+  flex-direction: column;
+  margin-top: 100px;
+}
+
+@media (max-width: 1023px) {
+  #main {
+    margin-top: 70px;
+  }
+}
+
+@media (max-width: 767px) {
+  #main {
+    margin-top: 50px;
+  }
+}
+
+/* tab content */
+.tab-content {
+  flex: 1 1 auto;
+  display: none;
+}
+
+.tab-content.active {
+  display: flex;
+  flex-direction: column;
+}
+
+/* about */
+.about {
+  position: relative;
+  z-index: 2;
+  justify-content: center;
+}
+
+.about::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  background: transparent url('../images/about-background.png') no-repeat center center / cover;
+  opacity: 0.05;
+}
+
+.about .container {
+  display: flex;
+  padding-top: 100px;
+  padding-bottom: 100px;
+}
+
+.about .content {
+  flex: 1 1 0;
+}
+.about .content .title {
+  margin: 0;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 160%;
+}
+.about .content .title span {
+  display: block;
+}
+.about .content .title strong {
+  font-weight: 700;
+  color: #ff7f50;
+}
+.about .content .description {
+  margin: 16px 0 0;
+  font-size: 16px;
+  line-height: 160%;
+}
+
+.about .languages {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 16px;
+}
+.about .languages .row {
+  display: flex;
+  gap: 16px;
+}
+.about .languages .row img {
+  width: 35px;
+}
+
+@media (max-width: 1023px) {
+  .about .content {
+    flex-basis: auto;
+  }
+
+  .about .content .title {
+    font-size: 24px;
+  }
+
+  .about .languages {
+    flex: 0 0 auto;
+    width: 250px;
+  }
+}
+
+@media (max-width: 767px) {
+  .about .container {
+    display: block;
+  }
+
+  .about .content .title {
+    font-size: 20px;
+  }
+
+  .about .content .description {
+    margin-top: 8px;
+    font-size: 14px;
+  }
+
+  .about .languages {
+    margin-top: 64px;
+    flex-direction: row;
+    justify-content: flex-start;
+    width: initial;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .about .languages .row {
+    gap: 8px;
+  }
+
+  .about .languages .row img {
+    width: 32px;
+  }
+}
+
+
+/* timeline */
+.timeline {
+  padding: 100px 0;
+}
+
+.timeline .container {
+  display: flex;
+  gap: 16px;
+}
+
+.timeline .title-block {
+  flex: 1 1 0;
+}
+.timeline .title-block .subtitle {
+  font-weight: 700;
+  font-size: 16px;
+  color: #FF7F50;
+  line-height: 160%;
+  text-transform: uppercase;
+}
+.timeline .title-block .title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 160%;
+}
+
+.timeline .content-block {
+  flex: 1 1 0;
+}
+
+.timeline .content-block ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.timeline .content-block li {
+  display: flex;
+  gap: 16px;
+}
+.timeline .content-block li:not(:first-child) {
+  margin-top: 32px;
+}
+.timeline .content-block .date {
+  flex: 0 0 auto;
+  padding: 4px 0;
+  width: 150px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 160%;
+  letter-spacing: -0.02em;
+  border-right: 1px solid #636E72;
+  white-space: pre-line;
+}
+.timeline .content-block .content {
+  padding: 4px 0;
+}
+.timeline .content-block .title {
+  margin: 0;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 160%;
+  letter-spacing: -0.02em;
+}
+.timeline .content-block .description {
+  margin: 0;
+  font-size: 16px;
+  line-height: 160%;
+  letter-spacing: -0.02em;
+  color: #636E72;
+  white-space: pre-line;
+}
+
+@media (max-width: 1023px) {
+  .timeline {
+    padding-top: 82px;
+  }
+
+  .timeline .container {
+    display: block;
+  }
+
+  .timeline .title-block .subtitle {
+    font-size: 14px;
+  }
+
+  .timeline .title-block .title {
+    font-size: 24px;
+  }
+
+  .timeline .content-block {
+    margin-top: 32px;
+  }
+}
+
+@media (max-width: 767px) {
+  .timeline .content-block li {
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .timeline .content-block li:not(:first-child) {
+    padding-top: 32px;
+    border-top: 1px solid #DFE4EA;
+  }
+
+  .timeline .content-block .date {
+    padding: 0;
+    width: initial;
+    border-right: none;
+    white-space: normal;
+  }
+
+  .timeline .content-block .date br {
+    display: none;
+  }
+
+  .timeline .content-block .content {
+    padding: 0;
+  }
+}
+
+
+/* portfolio */
+.portfolio {
+  padding: 100px 0;
+}
+
+.portfolio .title-block .subtitle {
+  font-weight: 700;
+  font-size: 16px;
+  color: #FF7F50;
+  line-height: 160%;
+  text-transform: uppercase;
+}
+
+.portfolio .title-block .title {
+  margin: 0;
+  padding: 0;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 160%;
+}
+
+.portfolio .content-block {
+  margin-top: 32px;
+}
+.portfolio .content-block ul {
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+
+  display: grid;
+  max-width: 932px;
+  grid-template-columns: repeat(3, 1fr);
+  grid-auto-rows: 300px;
+  gap: 16px;
+}
+.portfolio .content-block .button {
+  position: relative;
+  z-index: 2;
+  margin: 0;
+  padding: 16px;
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.portfolio .content-block .button:hover .overlay {
+  opacity: 0.95;
+}
+
+.portfolio .content-block .thumbnail {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top;
+}
+
+.portfolio .content-block .overlay {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 8px;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  backdrop-filter: blur(5px);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+.portfolio .content-block .overlay .title {
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 160%;
+  text-transform: uppercase;
+}
+.portfolio .content-block .overlay .arrow {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 24px;
+  height: 24px;
+}
+
+@media (max-width: 1023px) {
+  .portfolio {
+    padding-top: 82px;
+  }
+
+  .portfolio .title-block .subtitle {
+    font-size: 14px;
+  }
+
+  .portfolio .title-block .title {
+    font-size: 24px;
+  }
+
+  .portfolio .content-block ul {
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-rows: 344px;
+  }
+}
+@media (max-width: 767px) {
+  .portfolio .content-block ul {
+    grid-template-columns: repeat(1, 1fr);
+    grid-auto-rows: 288px;
+  }
+}
+
+
+/* contact */
+.contact {
+  padding: 100px 0;
+}
+
+.contact .title-block .subtitle {
+  font-weight: 700;
+  font-size: 16px;
+  color: #FF7F50;
+  line-height: 160%;
+  text-transform: uppercase;
+}
+
+.contact .title-block .title {
+  margin: 0;
+  padding: 0;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 160%;
+}
+
+.contact .content-block {
+  margin-top: 32px;
+}
+
+.contact .content-block .infomation {
+  display: flex;
+  gap: 10px;
+}
+.contact .content-block .infomation .item {
+  flex: 1 1 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 10px;
+  height: 150px;
+  text-align: center;
+  background-color: #fff;
+}
+.contact .content-block .infomation .icon {}
+.contact .content-block .infomation .icon img {
+  vertical-align: middle;
+}
+.contact .content-block .infomation .value {
+  padding: 0 12px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 160%;
+  color: #636e72;
+  word-break: break-all;;
+}
+.contact .content-block .infomation .value a {
+  color: inherit;
+}
+
+.contact .content-block .form {
+  display: flex;
+  margin-top: 32px;
+}
+.contact .content-block .form form {
+  flex: 1 1 auto;
+}
+.contact .content-block .form .row {
+}
+.contact .content-block .form .row:not(:first-child) {
+  margin-top: 16px;
+}
+.contact .content-block .form .row .comm {
+  padding: 16px;
+  width: 100%;
+  min-height: 60px;
+  font: inherit;
+  font-size: 16px;
+  line-height: 160%;
+  background-color: #fff;
+  border: 1px solid #DFE4EA;
+  vertical-align: middle;
+  outline: none;
+}
+.contact .content-block .form .row .comm::placeholder {
+  color: #636E72;
+  letter-spacing: -0.02em;
+  text-transform: uppercase;
+  opacity: 0.5;
+}
+.contact .content-block .form .row .comm:valid,
+.contact .content-block .form .row .comm:focus,
+.contact .content-block .form .row .comm:active {
+  border-color: #2D3436;
+}
+
+.contact .content-block .validation-detect .row .comm:invalid {
+  background-image: url('../svgs/report.svg');
+  background-repeat: no-repeat;
+  background-position: right 16px center;
+  border-color: #E74C3C;
+}
+.contact .content-block .validation-detect .row .comm:invalid::placeholder {
+  color: #E74C3C;
+}
+.contact .content-block .validation-detect .message-row .comm:invalid {
+  background-image: none;
+}
+
+.contact .content-block .form .row input {}
+.contact .content-block .form .row button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin: 0%;
+  width: 100%;
+  height: 60px;
+  font-weight: 700;
+  font-size: 18px;
+  color: #FAFAFA;
+  gap: 8px;
+  text-transform: uppercase;
+  background-color: #636E72;
+  border: 0;
+  cursor: pointer;
+}
+.contact .content-block .form .row button img {}
+
+.contact .content-block .form .message-row .comm {
+  min-height: 228px;
+  resize: vertical;
+}
+.contact .content-block .form .button-row {
+  margin-top: 10px;
+}
+
+.contact .content-block .form .icon {
+  flex: 0 0 450px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+@media (max-width: 1023px) {
+  .contact {
+    padding-top: 82px;
+  }
+
+  .contact .title-block .subtitle {
+    font-size: 14px;
+  }
+
+  .contact .title-block .title {
+    font-size: 24px;
+  }
+
+  .contact .content-block .infomation {
+    flex-wrap: wrap;
+  }
+
+  .contact .content-block .infomation .item {
+    flex-basis: calc(50% - 10px);
+  }
+
+  .contact .content-block .form {
+    margin-top: 16px;
+  }
+
+  .contact .content-block .form .icon {
+    display: none;
+  }
+}
+@media (max-width: 767px) {
+  .contact .content-block .infomation {
+    display: block;
+  }
+
+  .contact .content-block .infomation .item {
+    height: 100px;
+  }
+
+  .contact .content-block .infomation .item:not(:first-child) {
+    margin-top: 16px;
+  }
+
+  .contact .content-block .infomation .icon img {
+    width: 20px;
+  }
+
+  .contact .content-block .infomation .value {
+    font-size: 14px;
+  }
+
+  .contact .content-block .form .row button {
+    font-size: 16px;
+  }
+
+  .contact .content-block .form .row button img {
+    width: 16px;
+  }
+}
+
+/* footer */
+#footer {
+  flex: 0 0 auto;
+  background-color: #2d3436;
+}
+
+#footer .container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100px;
+  color: #DFE4EA;
+  font-size: 14px;
+  line-height: 160%;
+}
+
+#footer .mobile {
+  display: none;
+}
+
+#footer .copy {
+  color: #fff;
+}
+
+@media (max-width: 767px) {
+  #footer .container {
+    height: 50px;
+  }
+
+  #footer .desktop {
+    display: none;
+  }
+
+  #footer .mobile {
+    display: block;
+  }
+}
+
+
+/* modal */
+#modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 200;
+  display: none;
+  justify-content: center;
+  padding: 60px 32px;
+  width: 100%;
+  height: 100%;
+  background: rgba(45, 52, 54, 0.5);
+  overflow: hidden auto;
+}
+
+#modal .inner {
+  flex: 0 0 auto;
+  position: relative;
+  display: flex;
+  gap: 16px;
+  margin-top: auto;
+  margin-bottom: auto;
+  padding: 32px;
+  max-width: 800px;
+  width: 100%;
+  background-color: #fff;
+}
+
+#modal .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+  line-height: 0;
+  cursor: pointer;
+}
+
+#modal .close img {
+  width: 26px;
+  height: 26px;
+}
+
+#modal .thumbnail {
+  flex: 0 0 auto;
+  width: 300px;
+}
+#modal .thumbnail img {
+  width: 100%;
+  vertical-align: middle;
+}
+
+#modal .content {
+  flex-grow: 1;
+}
+#modal .content .head {
+  padding: 16px;
+  background-color: #fafafa;
+}
+#modal .content .head .title {
+  padding-bottom: 8px;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 160%;
+}
+#modal .content .head .info {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 700;
+  font-size: 12px;
+  line-height: 160%;
+  color: #636E72;
+}
+#modal .content .head .languages {}
+#modal .content .head .date {
+  margin-top: 4px;
+}
+
+#modal .content .body {
+  padding: 16px;
+  font-size: 14px;
+  line-height: 160%;
+  white-space: pre-line;
+}
+
+@media (max-width: 1023px) {
+  #modal .thumbnail {
+    width: 250px;
+  }
+}
+
+@media (max-width: 767px) {
+  #modal {
+    padding: 30px 16px;
+  }
+
+  #modal .inner {
+    padding: 0;
+  }
+
+  #modal .close {
+    top: 16px;
+    right: 16px;
+  }
+
+  #modal .close img {
+    width: 24px;
+    height: 24px;
+  }
+
+  #modal .thumbnail {
+    display: none;
+  }
+
+  #modal .content .head .title {
+    padding-right: 40px;
+  }
+
+  #modal .content .body {
+    padding-bottom: 32px;
+  }
+}
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/pretendard.css" "b/3\352\270\260/KimTaeYoung/week2/fonts/pretendard.css"
new file mode 100644
index 0000000..e4dd01d
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/fonts/pretendard.css"
@@ -0,0 +1,71 @@
+/*
+Copyright (c) 2021 Kil Hyung-jin, with Reserved Font Name Pretendard.
+https://github.com/orioncactus/pretendard
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+*/
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 900;
+	font-display: swap;
+	src: local('Pretendard Black'), url('./woff2/Pretendard-Black.woff2') format('woff2'), url('./woff/Pretendard-Black.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 800;
+	font-display: swap;
+	src: local('Pretendard ExtraBold'), url('./woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('./woff/Pretendard-ExtraBold.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 700;
+	font-display: swap;
+	src: local('Pretendard Bold'), url('./woff2/Pretendard-Bold.woff2') format('woff2'), url('./woff/Pretendard-Bold.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 600;
+	font-display: swap;
+	src: local('Pretendard SemiBold'), url('./woff2/Pretendard-SemiBold.woff2') format('woff2'), url('./woff/Pretendard-SemiBold.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 500;
+	font-display: swap;
+	src: local('Pretendard Medium'), url('./woff2/Pretendard-Medium.woff2') format('woff2'), url('./woff/Pretendard-Medium.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 400;
+	font-display: swap;
+	src: local('Pretendard Regular'), url('./woff2/Pretendard-Regular.woff2') format('woff2'), url('./woff/Pretendard-Regular.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 300;
+	font-display: swap;
+	src: local('Pretendard Light'), url('./woff2/Pretendard-Light.woff2') format('woff2'), url('./woff/Pretendard-Light.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 200;
+	font-display: swap;
+	src: local('Pretendard ExtraLight'), url('./woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('./woff/Pretendard-ExtraLight.woff') format('woff');
+}
+
+@font-face {
+	font-family: 'Pretendard';
+	font-weight: 100;
+	font-display: swap;
+	src: local('Pretendard Thin'), url('./woff2/Pretendard-Thin.woff2') format('woff2'), url('./woff/Pretendard-Thin.woff') format('woff');
+}
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Black.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Black.woff"
new file mode 100644
index 0000000..20b0641
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Black.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Bold.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Bold.woff"
new file mode 100644
index 0000000..bfc573c
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Bold.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraBold.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraBold.woff"
new file mode 100644
index 0000000..14a61ab
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraBold.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraLight.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraLight.woff"
new file mode 100644
index 0000000..a7af8a2
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-ExtraLight.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Light.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Light.woff"
new file mode 100644
index 0000000..6e00ad2
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Light.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Medium.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Medium.woff"
new file mode 100644
index 0000000..71b13eb
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Medium.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Regular.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Regular.woff"
new file mode 100644
index 0000000..741be57
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Regular.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-SemiBold.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-SemiBold.woff"
new file mode 100644
index 0000000..7bf2860
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-SemiBold.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Thin.woff" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Thin.woff"
new file mode 100644
index 0000000..665fe44
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff/Pretendard-Thin.woff" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Black.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Black.woff2"
new file mode 100644
index 0000000..306697c
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Black.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Bold.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Bold.woff2"
new file mode 100644
index 0000000..d99618c
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Bold.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraBold.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraBold.woff2"
new file mode 100644
index 0000000..d7a908e
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraBold.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraLight.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraLight.woff2"
new file mode 100644
index 0000000..0c41886
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-ExtraLight.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Light.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Light.woff2"
new file mode 100644
index 0000000..805d10c
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Light.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Medium.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Medium.woff2"
new file mode 100644
index 0000000..a96e69b
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Medium.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Regular.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Regular.woff2"
new file mode 100644
index 0000000..a5d5aea
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Regular.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-SemiBold.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-SemiBold.woff2"
new file mode 100644
index 0000000..d5a7717
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-SemiBold.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Thin.woff2" "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Thin.woff2"
new file mode 100644
index 0000000..8ce8ee2
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/fonts/woff2/Pretendard-Thin.woff2" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/CSS3.png" "b/3\352\270\260/KimTaeYoung/week2/images/CSS3.png"
new file mode 100644
index 0000000..aafbc1e
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/CSS3.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/Figma.png" "b/3\352\270\260/KimTaeYoung/week2/images/Figma.png"
new file mode 100644
index 0000000..8c1c7c0
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/Figma.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/HTML5.png" "b/3\352\270\260/KimTaeYoung/week2/images/HTML5.png"
new file mode 100644
index 0000000..386bf9a
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/HTML5.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/JavaScript.png" "b/3\352\270\260/KimTaeYoung/week2/images/JavaScript.png"
new file mode 100644
index 0000000..bd223a8
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/JavaScript.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/about-background.png" "b/3\352\270\260/KimTaeYoung/week2/images/about-background.png"
new file mode 100644
index 0000000..2e47e4d
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/about-background.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/sample.jpg" "b/3\352\270\260/KimTaeYoung/week2/images/sample.jpg"
new file mode 100644
index 0000000..fd358aa
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/sample.jpg" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/images/sample2.png" "b/3\352\270\260/KimTaeYoung/week2/images/sample2.png"
new file mode 100644
index 0000000..b79c5e8
Binary files /dev/null and "b/3\352\270\260/KimTaeYoung/week2/images/sample2.png" differ
diff --git "a/3\352\270\260/KimTaeYoung/week2/index.html" "b/3\352\270\260/KimTaeYoung/week2/index.html"
new file mode 100644
index 0000000..0a3faeb
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/index.html"
@@ -0,0 +1,200 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>Mission01</title>
+
+  <!-- fonts -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./fonts/pretendard.css">
+
+  <!-- core -->
+  <link rel="stylesheet" href="./css/style.css">
+</head>
+
+<body>
+  <div id="wrap">
+    <header id="header">
+      <div class="container">
+        <h1 class="title">Casper</h1>
+
+        <div class="navigation">
+          <button class="toggle-sidebar" aria-hidden="true" aria-label="모바일 메뉴 열기"></button>
+
+          <ul>
+            <li><button class="tab-button" data-tab="about" type="button">About</button></li>
+            <li><button class="tab-button" data-tab="timeline" type="button">Timeline</button></li>
+            <li><button class="tab-button" data-tab="portfolio" type="button">Portfolio</button></li>
+            <li class="active"><button class="tab-button" data-tab="contact" type="button">Contact</button></li>
+          </ul>
+        </div>
+      </div>
+    </header>
+
+    <main id="main">
+      <section class="tab-content about">
+        <div class="container">
+          <div class="content">
+            <h2 class="title">
+              <span>👋🏻</span>
+              I’m <strong>Frontend Developer</strong>
+            </h2>
+
+            <p class="description">
+              안녕하세요.
+              <br>프론트엔트 개발자 캐스퍼입니다.
+            </p>
+          </div>
+
+          <div class="languages">
+            <div class="row">
+              <img src="./images/HTML5.png" alt="HTML5 아이콘">
+              <img src="./images/CSS3.png" alt="CSS3 아이콘">
+              <img src="./images/JavaScript.png" alt="JavaScript 아이콘">
+              <img src="./images/Figma.png" alt="Figma 아이콘">
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="tab-content timeline">
+        <div class="container">
+          <div class="title-block">
+            <small class="subtitle">Timeline</small>
+            <h2 class="title">수상 및 활동</h2>
+          </div>
+
+          <div class="content-block">
+            <ul id="fetch-timeline"></ul>
+          </div>
+        </div>
+      </section>
+
+      <section class="tab-content portfolio">
+        <div class="container">
+          <div class="title-block">
+            <small class="subtitle">Portfilio</small>
+            <h2 class="title">포트폴리오</h2>
+          </div>
+
+          <div class="content-block">
+            <ul id="fetch-portfolio"></ul>
+          </div>
+        </div>
+      </section>
+
+      <section class="tab-content contact active">
+        <div class="container">
+          <div class="title-block">
+            <small class="subtitle">Get in Touch</small>
+            <h2 class="title">연락하기</h2>
+          </div>
+
+          <div class="content-block">
+            <div class="infomation">
+              <div class="item">
+                <div class="icon">
+                  <img src="./svgs/mail.svg" alt="이메일 아이콘">
+                </div>
+                <div class="value"><a href="mailto:kty0529@gmail.com">kty0529@gmail.com</a></div>
+              </div>
+
+              <div class="item">
+                <div class="icon">
+                  <img src="./svgs/phone_enabled.svg" alt="전화기 아이콘">
+                </div>
+                <div class="value"><a href="tel:010-6512-5882">010-6512-5882</a></div>
+              </div>
+
+              <div class="item">
+                <div class="icon">
+                  <img src="./svgs/github.svg" alt="Github 아이콘">
+                </div>
+                <div class="value"><a href="https://github.com/kty0529" target="_blank">https://github.com/kty0529</a></div>
+              </div>
+
+              <div class="item">
+                <div class="icon">
+                  <img src="./svgs/location_on.svg" alt="위치 아이콘">
+                </div>
+                <div class="value">서울시 관악구</div>
+              </div>
+            </div>
+
+            <div class="form">
+              <form novalidate onsubmit="return sendEmail(this);">
+                <div class="row name-row">
+                  <input class="comm" name="Name" type="text" placeholder="Name" required>
+                </div>
+
+                <div class="row email-row">
+                  <input class="comm" name="Email" type="email" placeholder="Email" required>
+                </div>
+
+                <div class="row message-row">
+                  <textarea class="comm" name="Message" placeholder="Message" required></textarea>
+                </div>
+
+                <div class="row button-row">
+                  <button type="submit">
+                    Submit
+                    <img src="./svgs/arrow_forward.svg" alt="화살표 아이콘" aria-hidden="true">
+                  </button>
+                </div>
+              </form>
+
+              <div class="icon">
+                <img src="./svgs/local_post_office.svg" alt="우체통 아이콘" aria-hidden="true">
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+
+    <footer id="footer">
+      <h2 class="screen-reader-text">사이트 푸터</h2>
+
+      <div class="container">
+        <span class="desktop">Copyright 2023 <strong class="copy">Casper</strong> Allrights Reserved.</span>
+        <span class="mobile">© <b class="copy">Casper</b></span>
+      </div>
+    </footer>
+  </div>
+
+  <div id="modal" aria-hidden="true">
+    <div class="inner">
+      <button class="close" type="button" aria-label="모달 닫기" onclick="modalClose();" autofocus>
+        <img src="./svgs/close.svg" alt="닫기 아이콘">
+      </button>
+
+      <div class="thumbnail"></div>
+
+      <div class="content">
+        <div class="head">
+          <div class="title"></div>
+
+          <div class="info languages">
+            <img src="./svgs/terminal.svg" alt="터미널 아이콘">
+            <span></span>
+          </div>
+
+          <div class="info date">
+            <img src="./svgs/calendar_today.svg" alt="날짜 아이콘">
+            <span></span>
+          </div>
+        </div>
+
+        <div class="body"></div>
+      </div>
+    </div>
+  </div>
+
+  <script src="./javascript/core-footer.js"></script>
+</body>
+</html>
diff --git "a/3\352\270\260/KimTaeYoung/week2/javascript/core-footer.js" "b/3\352\270\260/KimTaeYoung/week2/javascript/core-footer.js"
new file mode 100644
index 0000000..ab89762
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/javascript/core-footer.js"
@@ -0,0 +1,133 @@
+// 모바일 사이드바 토글
+document.querySelector('.toggle-sidebar').addEventListener('click', () => {
+  document.documentElement.classList.toggle('sidebar-active');
+});
+
+// 탭 기능
+const wrap = document.querySelector('#wrap');
+const tabButtons = wrap.querySelectorAll('.navigation [data-tab]');
+
+tabButtons.forEach((button, index) => {
+  button.addEventListener('click', () => {
+    // 불필요한 실행 방지를 위한 active 체크
+    if ( ! button.parentNode.classList.contains('active') ) {
+      const tabId = button.dataset.tab;
+
+      button.parentNode.parentNode.querySelector('.active').classList.remove('active');
+      button.parentNode.classList.add('active');
+
+      wrap.querySelector('#main .tab-content.active').classList.remove('active');
+      wrap.querySelector(`#main .${tabId}`).classList.add('active');
+    }
+
+    if ( document.documentElement.classList.contains('sidebar-active') ) {
+      document.documentElement.classList.remove('sidebar-active')
+    }
+  })
+});
+
+// 타임라인 통신
+fetch('./json/timeline.json')
+  .then(response => response.json())
+  .then(data => {
+    const timelineLists = document.querySelector('#fetch-timeline');
+    const item = data.map((item) => {
+      return `<li>
+                <div class="date">${item.period}</div>
+                <div class="content">
+                  <h3 class="title">${item.title}</h3>
+                  <p class="description">${item.description}</p>
+                </div>
+              </li>`
+    }).join('');
+    timelineLists.innerHTML = item;
+  });
+
+// 포트폴리오 통신
+fetch('./json/portfolio.json')
+  .then(response => response.json())
+  .then(data => {
+    const timelineLists = document.querySelector('#fetch-portfolio');
+    const item = data.map((item) => {
+      return `<li>
+                <button class="button" type="button" data-item-detail='${JSON.stringify(item)}'
+                  onclick="modalOpen(this);">
+                  <img class="thumbnail" src="${item.thumbnail}" alt="${item.title} 포트폴리오 대표 이미지">
+
+                  <span class="overlay">
+                    <span class="title">${item.title}</span>
+
+                    <img class="arrow" src="./svgs/arrow_outward.svg" alt="화살표 아이콘" aria-hidden="true">
+                  </span>
+                </button>
+              </li>`
+    }).join('');
+    timelineLists.innerHTML = item;
+  });
+
+// 모달 액션
+function modalOpen(button) {
+  // 모달 영역 가져오기
+  const modal = document.querySelector('#modal');
+  const thumbnail = modal.querySelector('.thumbnail');
+  const title = modal.querySelector('.title');
+  const languages = modal.querySelector('.languages span');
+  const date = modal.querySelector('.date span');
+  const body = modal.querySelector('.body');
+
+  // 포트폴리오 데이터 가져오기
+  const item = JSON.parse(button.dataset.itemDetail);
+
+  // 부모 스크롤 잠그기
+  document.documentElement.classList.add('scroll-lock');
+
+  // 모달에 데이터 넣기
+  thumbnail.innerHTML = `<img src="${item.thumbnail}" alt="${item.title} 포트폴리오 대표 이미지">`;
+  title.innerHTML = item.title;
+  languages.innerHTML = item.languages.map(item => item).join(', ');
+  date.innerHTML = item.date;
+  body.innerHTML = item.description;
+
+  // 모달 보이기
+  modal.style.display = 'flex';
+
+  // 포커스 이동
+  modal.querySelector('[autofocus]').focus();
+}
+
+function modalClose() {
+  // 모달 영역 가져오기
+  const modal = document.querySelector('#modal');
+
+  // 모달 닫기
+  modal.style.display = 'none';
+
+  // 부모 스크롤 허용
+  document.documentElement.classList.remove('scroll-lock');
+}
+
+
+// 폼 유효성 검사
+const form = document.querySelector('form');
+const requiredItems = form.querySelectorAll('[required]');
+
+function sendEmail(form) {
+  let detectValidationItems = [];
+
+  // Array.from()을 사용해 NodeList를 Array로 변환
+  Array.from(requiredItems, (item) => {
+
+    if ( ! item.checkValidity() ) {
+      detectValidationItems.push(item);
+      form.classList.add('validation-detect');
+    }
+  });
+
+  if ( detectValidationItems.length > 0 ) {
+    console.log(detectValidationItems);
+  } else {
+    alert('submit!');
+  }
+
+  return false;
+}
diff --git "a/3\352\270\260/KimTaeYoung/week2/json/portfolio.json" "b/3\352\270\260/KimTaeYoung/week2/json/portfolio.json"
new file mode 100644
index 0000000..c30b3e2
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/json/portfolio.json"
@@ -0,0 +1,20 @@
+[
+  {
+    "title": "만들면서 배우는 실전 퍼블리싱",
+    "thumbnail": "../images/sample.jpg",
+    "date": "2019.01 ~ 2019.02",
+    "languages": [
+      "HTML", "CSS", "JavaScript", "jQuery", "PHP", "MySQL"
+    ],
+    "description": "프로젝트 설명\n줄바꿈은?"
+  },
+  {
+    "title": "주니어 Java 개발자를 위한 코스",
+    "thumbnail": "../images/sample2.png",
+    "date": "2019.01 ~ 2019.02",
+    "languages": [
+      "HTML", "CSS", "Java"
+    ],
+    "description": "프로젝트 설명"
+  }
+]
diff --git "a/3\352\270\260/KimTaeYoung/week2/json/timeline.json" "b/3\352\270\260/KimTaeYoung/week2/json/timeline.json"
new file mode 100644
index 0000000..6c6e24f
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/json/timeline.json"
@@ -0,0 +1,12 @@
+[
+  {
+    "period": "2015",
+    "title": "티스토리 반응형 웹 스킨 공모전 대상",
+    "description": "https://notice.tistory.com/2256\n디자인부터 스킨 개발까지 단독으로 진행했습니다."
+  },
+  {
+    "period": "2019-12 ~\n2021-12",
+    "title": "에스제이더블유인터네셔널",
+    "description": "1. 개발자와 협업하여 공통 모듈 통합, 수강생 강의실 리뉴얼 등 전사 웹서비스 내의 다양한 UI를 개발했습니다.\n2. 제2외국어 중 9개 언어의 사이트 유지보수를 담당했습니다.(스페인어, 프랑스어, 독일어, 러시아어, 아랍어, 이탈리아어, 히브리어, 한국어능력시험, 한국어)"
+  }
+]
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/arrow_forward.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/arrow_forward.svg"
new file mode 100644
index 0000000..e6a3bd2
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/arrow_forward.svg"
@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_624" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="20">
+<rect x="0.5" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_301_624)">
+<path d="M10.5 16.6668L9.31248 15.5002L13.9791 10.8335H3.83331V9.16683H13.9791L9.31248 4.50016L10.5 3.3335L17.1666 10.0002L10.5 16.6668Z" fill="#FAFAFA"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/arrow_outward.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/arrow_outward.svg"
new file mode 100644
index 0000000..c652628
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/arrow_outward.svg"
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_528_217" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_528_217)">
+<path d="M6.4 17.9999L5 16.5999L14.6 6.99988H6V4.99988H18V16.9999H16V8.39988L6.4 17.9999Z" fill="#2D3436"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/calendar_today.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/calendar_today.svg"
new file mode 100644
index 0000000..da89109
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/calendar_today.svg"
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_528_164" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#636E72"/>
+</mask>
+<g mask="url(#mask0_528_164)">
+<path d="M3.33333 14.6667C2.96667 14.6667 2.65267 14.5363 2.39133 14.2754C2.13044 14.014 2 13.7 2 13.3334V4.00004C2 3.63337 2.13044 3.3196 2.39133 3.05871C2.65267 2.79737 2.96667 2.66671 3.33333 2.66671H4V1.33337H5.33333V2.66671H10.6667V1.33337H12V2.66671H12.6667C13.0333 2.66671 13.3473 2.79737 13.6087 3.05871C13.8696 3.3196 14 3.63337 14 4.00004V13.3334C14 13.7 13.8696 14.014 13.6087 14.2754C13.3473 14.5363 13.0333 14.6667 12.6667 14.6667H3.33333ZM3.33333 13.3334H12.6667V6.66671H3.33333V13.3334ZM3.33333 5.33337H12.6667V4.00004H3.33333V5.33337Z" fill="#636E72"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/close.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/close.svg"
new file mode 100644
index 0000000..0560536
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/close.svg"
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_940_264" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_940_264)">
+<path d="M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z" fill="#1C1B1F"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/github.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/github.svg"
new file mode 100644
index 0000000..6d2ec97
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/github.svg"
@@ -0,0 +1,10 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_301_605)">
+<path d="M15.25 0.871094C6.9625 0.871094 0.25 7.58734 0.25 15.8711C0.25 22.4998 4.5475 28.1211 10.5063 30.1023C11.2563 30.2436 11.5312 29.7798 11.5312 29.3811C11.5312 29.0248 11.5188 28.0811 11.5125 26.8311C7.34 27.7361 6.46 24.8186 6.46 24.8186C5.7775 23.0873 4.79125 22.6248 4.79125 22.6248C3.4325 21.6948 4.89625 21.7136 4.89625 21.7136C6.4025 21.8186 7.19375 23.2586 7.19375 23.2586C8.53125 25.5523 10.705 24.8898 11.5625 24.5061C11.6975 23.5361 12.0838 22.8748 12.5125 22.4998C9.18125 22.1248 5.68 20.8348 5.68 15.0873C5.68 13.4498 6.26125 12.1123 7.22375 11.0623C7.055 10.6836 6.54875 9.15859 7.355 7.09234C7.355 7.09234 8.61125 6.68984 11.48 8.62984C12.68 8.29609 13.955 8.13109 15.23 8.12359C16.505 8.13109 17.78 8.29609 18.98 8.62984C21.83 6.68984 23.0862 7.09234 23.0862 7.09234C23.8925 9.15859 23.3862 10.6836 23.2362 11.0623C24.1925 12.1123 24.7738 13.4498 24.7738 15.0873C24.7738 20.8498 21.2675 22.1186 17.93 22.4873C18.455 22.9373 18.9425 23.8573 18.9425 25.2623C18.9425 27.2698 18.9237 28.8823 18.9237 29.3698C18.9237 29.7636 19.1863 30.2323 19.955 30.0823C25.9562 28.1148 30.25 22.4898 30.25 15.8711C30.25 7.58734 23.5338 0.871094 15.25 0.871094Z" fill="#2D3436"/>
+</g>
+<defs>
+<clipPath id="clip0_301_605">
+<rect width="30" height="30" fill="white" transform="translate(0.25 0.5)"/>
+</clipPath>
+</defs>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/local_post_office.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/local_post_office.svg"
new file mode 100644
index 0000000..ab6077e
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/local_post_office.svg"
@@ -0,0 +1,8 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_628" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="80" height="80">
+<rect width="80" height="80" fill="#FAFAFA"/>
+</mask>
+<g mask="url(#mask0_301_628)">
+<path d="M53.3334 63.3337V70.0003C53.3334 70.9448 53.0145 71.7359 52.3768 72.3737C51.7368 73.0137 50.9445 73.3337 50.0001 73.3337H10.0001C9.05564 73.3337 8.26453 73.0137 7.62675 72.3737C6.98675 71.7359 6.66675 70.9448 6.66675 70.0003V43.3337C6.66675 42.3892 6.98675 41.597 7.62675 40.957C8.26453 40.3192 9.05564 40.0003 10.0001 40.0003H20.0001V26.667C20.0001 21.1114 21.9445 16.3892 25.8334 12.5003C29.7223 8.61144 34.4445 6.66699 40.0001 6.66699H53.3334C58.889 6.66699 63.6112 8.61144 67.5001 12.5003C71.389 16.3892 73.3334 21.1114 73.3334 26.667V73.3337H66.6668V63.3337H53.3334ZM53.3334 56.667H66.6668V26.667C66.6668 23.0003 65.3612 19.8614 62.7501 17.2503C60.139 14.6392 57.0001 13.3337 53.3334 13.3337H40.0001C36.3334 13.3337 33.1945 14.6392 30.5834 17.2503C27.9723 19.8614 26.6667 23.0003 26.6667 26.667V40.0003H50.0001C50.9445 40.0003 51.7368 40.3192 52.3768 40.957C53.0145 41.597 53.3334 42.3892 53.3334 43.3337V56.667ZM33.3334 33.3337V26.667H60.0001V33.3337H33.3334ZM30.0001 56.167L46.6667 46.667H13.3334L30.0001 56.167ZM30.0001 62.0003L13.3334 52.5003V66.667H46.6667V52.5003L30.0001 62.0003Z" fill="#636E72"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/location_on.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/location_on.svg"
new file mode 100644
index 0000000..8222b0f
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/location_on.svg"
@@ -0,0 +1,8 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_609" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="31">
+<rect x="0.75" y="0.5" width="30" height="30" fill="#FF7F50"/>
+</mask>
+<g mask="url(#mask0_301_609)">
+<path d="M15.75 15.5C16.4375 15.5 17.0262 15.255 17.5163 14.765C18.0054 14.2758 18.25 13.6875 18.25 13C18.25 12.3125 18.0054 11.7238 17.5163 11.2337C17.0262 10.7446 16.4375 10.5 15.75 10.5C15.0625 10.5 14.4742 10.7446 13.985 11.2337C13.495 11.7238 13.25 12.3125 13.25 13C13.25 13.6875 13.495 14.2758 13.985 14.765C14.4742 15.255 15.0625 15.5 15.75 15.5ZM15.75 24.6875C18.2917 22.3542 20.1771 20.2342 21.4062 18.3275C22.6354 16.4217 23.25 14.7292 23.25 13.25C23.25 10.9792 22.5258 9.11958 21.0775 7.67125C19.63 6.22375 17.8542 5.5 15.75 5.5C13.6458 5.5 11.8696 6.22375 10.4212 7.67125C8.97375 9.11958 8.25 10.9792 8.25 13.25C8.25 14.7292 8.86458 16.4217 10.0938 18.3275C11.3229 20.2342 13.2083 22.3542 15.75 24.6875ZM15.75 28C12.3958 25.1458 9.89083 22.4946 8.235 20.0462C6.57833 17.5988 5.75 15.3333 5.75 13.25C5.75 10.125 6.75542 7.63542 8.76625 5.78125C10.7763 3.92708 13.1042 3 15.75 3C18.3958 3 20.7238 3.92708 22.7337 5.78125C24.7446 7.63542 25.75 10.125 25.75 13.25C25.75 15.3333 24.9221 17.5988 23.2663 20.0462C21.6096 22.4946 19.1042 25.1458 15.75 28Z" fill="#2D3436"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/mail.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/mail.svg"
new file mode 100644
index 0000000..c43686f
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/mail.svg"
@@ -0,0 +1,8 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_595" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="31">
+<rect x="0.25" y="0.5" width="30" height="30" fill="#FF7F50"/>
+</mask>
+<g mask="url(#mask0_301_595)">
+<path d="M5.24995 25.5C4.56245 25.5 3.97412 25.2554 3.48495 24.7663C2.99495 24.2763 2.74995 23.6875 2.74995 23V8C2.74995 7.3125 2.99495 6.72417 3.48495 6.235C3.97412 5.745 4.56245 5.5 5.24995 5.5H25.25C25.9375 5.5 26.5262 5.745 27.0162 6.235C27.5054 6.72417 27.75 7.3125 27.75 8V23C27.75 23.6875 27.5054 24.2763 27.0162 24.7663C26.5262 25.2554 25.9375 25.5 25.25 25.5H5.24995ZM15.25 16.75L5.24995 10.5V23H25.25V10.5L15.25 16.75ZM15.25 14.25L25.25 8H5.24995L15.25 14.25ZM5.24995 10.5V8V23V10.5Z" fill="#2D3436"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/menu.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/menu.svg"
new file mode 100644
index 0000000..7b9f805
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/menu.svg"
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_939_695" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_939_695)">
+<path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#2D3436"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/phone_enabled.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/phone_enabled.svg"
new file mode 100644
index 0000000..60cc967
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/phone_enabled.svg"
@@ -0,0 +1,8 @@
+<svg width="31" height="31" viewBox="0 0 31 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_600" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="31">
+<rect x="0.75" y="0.5" width="30" height="30" fill="#FF7F50"/>
+</mask>
+<g mask="url(#mask0_301_600)">
+<path d="M5.8125 26.75C5.4375 26.75 5.125 26.625 4.875 26.375C4.625 26.125 4.5 25.8125 4.5 25.4375V20.375C4.5 20.0833 4.59375 19.8279 4.78125 19.6087C4.96875 19.3904 5.20833 19.25 5.5 19.1875L9.8125 18.3125C10.1042 18.2708 10.4012 18.2967 10.7037 18.39C11.0054 18.4842 11.25 18.625 11.4375 18.8125L14.375 21.75C15.9583 20.7917 17.4117 19.6562 18.735 18.3438C20.0575 17.0312 21.1562 15.625 22.0312 14.125L19 11.0625C18.8125 10.875 18.6925 10.6612 18.64 10.4212C18.5883 10.1821 18.5833 9.91667 18.625 9.625L19.4375 5.25C19.4792 4.95833 19.6146 4.71875 19.8438 4.53125C20.0729 4.34375 20.3333 4.25 20.625 4.25H25.6875C26.0625 4.25 26.375 4.375 26.625 4.625C26.875 4.875 27 5.1875 27 5.5625C27 8.25 26.4008 10.8696 25.2025 13.4212C24.005 15.9738 22.4217 18.2342 20.4525 20.2025C18.4842 22.1717 16.2242 23.755 13.6725 24.9525C11.12 26.1508 8.5 26.75 5.8125 26.75ZM23.2188 11.75C23.5729 10.9375 23.8438 10.1146 24.0312 9.28125C24.2188 8.44792 24.3646 7.60417 24.4688 6.75H21.6875L21.1562 9.6875L23.2188 11.75ZM12.0312 22.9375L9.9375 20.8438L7 21.4375V24.1875C7.85417 24.125 8.70333 23.9896 9.5475 23.7812C10.3908 23.5729 11.2187 23.2917 12.0312 22.9375Z" fill="#2D3436"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/report.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/report.svg"
new file mode 100644
index 0000000..4f56ffb
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/report.svg"
@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_301_731" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#E74C3C"/>
+</mask>
+<g mask="url(#mask0_301_731)">
+<path d="M12 17C12.2833 17 12.521 16.904 12.713 16.712C12.9043 16.5207 13 16.2833 13 16C13 15.7167 12.9043 15.479 12.713 15.287C12.521 15.0957 12.2833 15 12 15C11.7167 15 11.4793 15.0957 11.288 15.287C11.096 15.479 11 15.7167 11 16C11 16.2833 11.096 16.5207 11.288 16.712C11.4793 16.904 11.7167 17 12 17ZM11 13H13V7H11V13ZM8.25 21L3 15.75V8.25L8.25 3H15.75L21 8.25V15.75L15.75 21H8.25ZM9.1 19H14.9L19 14.9V9.1L14.9 5H9.1L5 9.1V14.9L9.1 19Z" fill="#E74C3C"/>
+</g>
+</svg>
diff --git "a/3\352\270\260/KimTaeYoung/week2/svgs/terminal.svg" "b/3\352\270\260/KimTaeYoung/week2/svgs/terminal.svg"
new file mode 100644
index 0000000..aa9eb53
--- /dev/null
+++ "b/3\352\270\260/KimTaeYoung/week2/svgs/terminal.svg"
@@ -0,0 +1,8 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_528_159" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="16" height="16">
+<rect width="16" height="16" fill="#636E72"/>
+</mask>
+<g mask="url(#mask0_528_159)">
+<path d="M2.66659 13.3333C2.29992 13.3333 1.98614 13.2028 1.72525 12.942C1.46392 12.6806 1.33325 12.3666 1.33325 12V3.99996C1.33325 3.63329 1.46392 3.31951 1.72525 3.05863C1.98614 2.79729 2.29992 2.66663 2.66659 2.66663H13.3333C13.6999 2.66663 14.0139 2.79729 14.2753 3.05863C14.5361 3.31951 14.6666 3.63329 14.6666 3.99996V12C14.6666 12.3666 14.5361 12.6806 14.2753 12.942C14.0139 13.2028 13.6999 13.3333 13.3333 13.3333H2.66659ZM2.66659 12H13.3333V5.33329H2.66659V12ZM4.99992 11.3333L4.06659 10.4L5.78325 8.66663L4.04992 6.93329L4.99992 5.99996L7.66658 8.66663L4.99992 11.3333ZM7.99992 11.3333V9.99996H11.9999V11.3333H7.99992Z" fill="#636E72"/>
+</g>
+</svg>