DO-SOPT-WEB · Yeonseo-Jo · Mar 15, 2024 · Oct 24, 2023 · Oct 24, 2023 · Oct 24, 2023
diff --git a/week2/aissgn1/assets/icon/icon_top.png b/week2/aissgn1/assets/icon/icon_top.png
diff --git a/week2/aissgn1/assets/image/Busan/busan_1.jpg b/week2/aissgn1/assets/image/Busan/busan_1.jpg
diff --git a/week2/aissgn1/assets/image/Busan/busan_2.jpg b/week2/aissgn1/assets/image/Busan/busan_2.jpg
diff --git a/week2/aissgn1/assets/image/Busan/busan_3.jpg b/week2/aissgn1/assets/image/Busan/busan_3.jpg
diff --git a/week2/aissgn1/assets/image/Busan/busan_4.jpg b/week2/aissgn1/assets/image/Busan/busan_4.jpg
diff --git a/week2/aissgn1/assets/image/Busan/busan_5.jpg b/week2/aissgn1/assets/image/Busan/busan_5.jpg
diff --git a/week2/aissgn1/assets/image/Busan/busan_6.jpg b/week2/aissgn1/assets/image/Busan/busan_6.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_1.jpg b/week2/aissgn1/assets/image/Jeju/jeju_1.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_2.jpg b/week2/aissgn1/assets/image/Jeju/jeju_2.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_3.jpg b/week2/aissgn1/assets/image/Jeju/jeju_3.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_4.jpg b/week2/aissgn1/assets/image/Jeju/jeju_4.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_5.jpg b/week2/aissgn1/assets/image/Jeju/jeju_5.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_6.jpg b/week2/aissgn1/assets/image/Jeju/jeju_6.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_7.jpg b/week2/aissgn1/assets/image/Jeju/jeju_7.jpg
diff --git a/week2/aissgn1/assets/image/Jeju/jeju_8.jpg b/week2/aissgn1/assets/image/Jeju/jeju_8.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_1.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_1.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_2.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_2.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_3.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_3.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_4.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_4.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_5.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_5.jpg
diff --git a/week2/aissgn1/assets/image/Tokyo/tokyo_6.jpg b/week2/aissgn1/assets/image/Tokyo/tokyo_6.jpg
diff --git a/week2/aissgn1/index.html b/week2/aissgn1/index.html
@@ -0,0 +1,179 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="style.css" />
+    <title>연서의 갤러리</title>
+  </head>
+  <body>
+    <header class="header">
+      <h1 class="header__title">📸 연서의 갤러리 📸</h1>
+    </header>
+
+    <main>
+      <!-- 미리보기 섹션 -->
+      <section class="preview-section">
+        <button type="button" class="preview__left-btn">&lt;</button>
+        <img src="./assets/image/Jeju/jeju_1.jpg" alt="제주_여행_사진_1" />
+        <img src="./assets/image/Jeju/jeju_2.jpg" alt="제주_여행_사진_2" />
+        <img src="./assets/image/Jeju/jeju_3.jpg" alt="제주_여행_사진_3" />
+        <img src="./assets/image/Tokyo/tokyo_1.jpg" alt="도쿄_여행_사진_1" />
+        <img src="./assets/image/Tokyo/tokyo_2.jpg" alt="도쿄_여행_사진_2" />
+        <img src="./assets/image/Tokyo/tokyo_3.jpg" alt="도쿄_여행_사진_3" />
+        <img src="./assets/image/Busan/busan_1.jpg" alt="부산_여행_사진_1" />
+        <img src="./assets/image/Busan/busan_2.jpg" alt="부산_여행_사진_2" />
+        <img src="./assets/image/Busan/busan_3.jpg" alt="부산_여행_사진_3" />
+        <button type="button" class="preview__right-btn">&gt;</button>
+      </section>
+
+      <!-- 목차 -->
+      <nav class="nav-section">
+        <p class="nav-section__detail">✨ 클릭하면 이동해요! ✨</p>
+        <ul class="nav-section__items">
+          <li><a href="#jeju-section">In Jeju</a></li>
+          <li><a href="#tokyo-section">In Tokyo</a></li>
+          <li><a href="#busan-section">In Busan</a></li>
+        </ul>
+      </nav>
+
+      <!--목차 별 이미지-->
+      <section id="jeju-section">
+        <header class="jeju-section__header">
+          <h2>In JeJu</h2>
+        </header>
+        <article class="jeju-section__img-container">
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_1.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">⛰금오름⛰</h3>
+              <p class="description__detail">
+                둘째 날에 갔던 금오름에서 찍은 사진입니다!
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_2.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🌊판포포구🌊</h3>
+              <p class="description__detail">
+                둘째 날에 갔던 판포포구에서 찍은 사진입니다!
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_3.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">✨윤슬✨</h3>
+              <p class="description__detail">
+                윤슬이 예뻐서 찍은 제주 바다 사진입니다!
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_4.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🐑새별프렌즈🐑</h3>
+              <p class="description__detail">
+                귀여운 양을 보러 갔던 새별프렌즈 목장에서 찍은 사진입니다!
+                얼굴이 까만 양이었는데 너무 귀여워요🖤
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_5.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🏖이호테우 해변🏖</h3>
+              <p class="description__detail">
+                이호테우 해변에서 찍은 사진입니다!
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_6.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🏍스쿠터🏍</h3>
+              <p class="description__detail">스쿠터 탈 때 찍었던 사진입니다!</p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_7.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🍊제주 공항🍊</h3>
+              <p class="description__detail">
+                제주 가면 꼭 찍는..! 공항에서 내리면 제일 먼저 보이는 제주
+                공항의 풍경 사진입니다! 제주 또 가고 싶네요🥹
+              </p>
+            </div>
+          </div>
+          <div class="jeju-section__img-card">
+            <img src="./assets/image/Jeju/jeju_8.jpg" alt="제주_여행_사진_1" />
+            <div class="img-card__description">
+              <h3 class="description__title">🏠숙소🏠</h3>
+              <p class="description__detail">
+                숙소 사진입니다! 너무 좋았어서 또 가고 싶네요..🥹
+              </p>
+            </div>
+          </div>
+        </article>
+      </section>
+
+      <section id="tokyo-section">
+        <header class="tokyo-section__header">
+          <h2>In Tokyo</h2>
+        </header>
+        <article class="tokyo-section__img-container">
+          <div class="img-container__left">
+            <img
+              src="./assets/image/Tokyo/tokyo_1.jpg"
+              alt="도쿄_여행_사진_1"
+            />
+          </div>
+          <div class="img-container__right">
+            <img
+              src="./assets/image/Tokyo/tokyo_6.jpg"
+              alt="도쿄_여행_사진_2"
+            />
+            <img
+              src="./assets/image/Tokyo/tokyo_3.jpg"
+              alt="도쿄_여행_사진_3"
+            />
+            <img
+              src="./assets/image/Tokyo/tokyo_4.jpg"
+              alt="도쿄_여행_사진_4"
+            />
+            <img
+              src="./assets/image/Tokyo/tokyo_5.jpg"
+              alt="도쿄_여행_사진_5"
+            />
+          </div>
+        </article>
+      </section>
+
+      <section id="busan-section">
+        <header class="busan-section__header">
+          <h2>In Busan</h2>
+        </header>
+
+        <article class="busan-section__img-container">
+          <img src="./assets/image/Busan/busan_1.jpg" alt="부산_여행_사진_1" />
+          <img src="./assets/image/Busan/busan_2.jpg" alt="부산_여행_사진_2" />
+          <img src="./assets/image/Busan/busan_3.jpg" alt="부산_여행_사진_3" />
+          <img src="./assets/image/Busan/busan_4.jpg" alt="부산_여행_사진_4" />
+          <img src="./assets/image/Busan/busan_5.jpg" alt="부산_여행_사진_5" />
+        </article>
+      </section>
+    </main>
+
+    <a class="to-top" href="#"><img src="./assets//icon/icon_top.png" /></a>
+
+    <footer class="Info-footer">
+      <p>📷 Pic by Yeonseo</p>
+      <p class="Info-footer__more">
+        <span> 🎞 More Pics : </span>
+        <a href="https://www.instagram.com/ooesny/">@ooesny</a>
+      </p>
+    </footer>
+    <script src="./script.js"></script>
+  </body>
+</html>
diff --git a/week2/aissgn1/reset.css b/week2/aissgn1/reset.css
@@ -0,0 +1,133 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  /* font: inherit; */
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}