DO-SOPT-WEB · simeunseo · Feb 13, 2024 · Oct 11, 2023 · Oct 11, 2023 · Oct 11, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/week1/.DS_Store b/week1/.DS_Store
diff --git a/week1/assign3/images/.DS_Store b/week1/assign3/images/.DS_Store
diff --git a/week1/assign3/images/assign3-favicon.png b/week1/assign3/images/assign3-favicon.png
diff --git a/week1/assign3/images/onboarding/1.png b/week1/assign3/images/onboarding/1.png
diff --git a/week1/assign3/images/onboarding/10.png b/week1/assign3/images/onboarding/10.png
diff --git a/week1/assign3/images/onboarding/2.png b/week1/assign3/images/onboarding/2.png
diff --git a/week1/assign3/images/onboarding/3.png b/week1/assign3/images/onboarding/3.png
diff --git a/week1/assign3/images/onboarding/4.png b/week1/assign3/images/onboarding/4.png
diff --git a/week1/assign3/images/onboarding/5.png b/week1/assign3/images/onboarding/5.png
diff --git a/week1/assign3/images/onboarding/6.png b/week1/assign3/images/onboarding/6.png
diff --git a/week1/assign3/images/onboarding/7.png b/week1/assign3/images/onboarding/7.png
diff --git a/week1/assign3/images/onboarding/8.png b/week1/assign3/images/onboarding/8.png
diff --git a/week1/assign3/images/onboarding/9.png b/week1/assign3/images/onboarding/9.png
diff --git a/week1/assign3/images/section1/.DS_Store b/week1/assign3/images/section1/.DS_Store
diff --git a/week1/assign3/images/section1/1.png b/week1/assign3/images/section1/1.png
diff --git a/week1/assign3/images/section1/10.png b/week1/assign3/images/section1/10.png
diff --git a/week1/assign3/images/section1/2.png b/week1/assign3/images/section1/2.png
diff --git a/week1/assign3/images/section1/3.png b/week1/assign3/images/section1/3.png
diff --git a/week1/assign3/images/section1/4.png b/week1/assign3/images/section1/4.png
diff --git a/week1/assign3/images/section1/5.png b/week1/assign3/images/section1/5.png
diff --git a/week1/assign3/images/section1/6.png b/week1/assign3/images/section1/6.png
diff --git a/week1/assign3/images/section1/7.png b/week1/assign3/images/section1/7.png
diff --git a/week1/assign3/images/section1/8.png b/week1/assign3/images/section1/8.png
diff --git a/week1/assign3/images/section1/9.png b/week1/assign3/images/section1/9.png
diff --git a/week1/assign3/images/section2/.DS_Store b/week1/assign3/images/section2/.DS_Store
diff --git a/week1/assign3/images/section2/1.png b/week1/assign3/images/section2/1.png
diff --git a/week1/assign3/images/section2/2.png b/week1/assign3/images/section2/2.png
diff --git a/week1/assign3/images/section2/3.png b/week1/assign3/images/section2/3.png
diff --git a/week1/assign3/images/section2/4.png b/week1/assign3/images/section2/4.png
diff --git a/week1/assign3/images/section2/5.png b/week1/assign3/images/section2/5.png
diff --git a/week1/assign3/images/section3/.DS_Store b/week1/assign3/images/section3/.DS_Store
diff --git a/week1/assign3/images/section3/1.png b/week1/assign3/images/section3/1.png
diff --git a/week1/assign3/images/section3/2.png b/week1/assign3/images/section3/2.png
diff --git a/week1/assign3/images/section3/3.png b/week1/assign3/images/section3/3.png
diff --git a/week1/assign3/images/section3/4.png b/week1/assign3/images/section3/4.png
diff --git a/week1/assign3/images/section3/5.png b/week1/assign3/images/section3/5.png
diff --git a/week1/assign3/index.html b/week1/assign3/index.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>film archive</title>
+    <link rel="stylesheet" href="style.css" />
+    <link rel="icon" href="./images/assign3-favicon.png" />
+  </head>
+  <body>
+    <div id="top" class="onboarding">
+      <header>film archive</header>
+      <!-- 미리보기 가로스크롤 -->
+      <section class="onboarding-scroll">
+        <img src="./images/onboarding/1.png" alt="바다 잠수" />
+        <img src="./images/onboarding/2.png" alt="노을지는 오이도" />
+        <img src="./images/onboarding/3.png" alt="엉켜 자는 두 고양이" />
+        <img src="./images/onboarding/4.png" alt="바닷가에서 노는 두 어린이" />
+        <img src="./images/onboarding/5.png" alt="산책하는 사람과 강아지" />
+        <img src="./images/onboarding/6.png" alt="카메라를 들고 거울 찍기" />
+        <img src="./images/onboarding/7.png" alt="벤치 위 두 고양이" />
+        <img src="./images/onboarding/8.png" alt="나무 그늘진 거리" />
+        <img
+          src="./images/onboarding/9.png"
+          alt="스프카레를 기다리며 거울 찍기"
+        />
+        <img src="./images/onboarding/10.png" alt="산책하는 모자" />
+      </section>
+    </div>
+    <nav class="onboarding-nav">
+      <a href="#first-section-anchor"><h3 class="nav-category">2023</h3></a>
+      <a href="#second-section-anchor"><h3 class="nav-category">2022</h3></a>
+      <a href="#third-section-anchor"><h3 class="nav-category">2021</h3></a>
+    </nav>
+    <main>
+      <section id="first-section-anchor">
+        <h1>2023</h1>
+        <div class="halftone first-section-gallery">
+          <img src="./images/section1/1.png" alt="서강대학교 남문" />
+          <img src="./images/section1/2.png" alt="뚝섬 한강공원" />
+          <img
+            src="./images/section1/3.png"
+            alt="오타루 운하를 그리는 할아버지"
+          />
+          <img src="./images/section1/4.png" alt="일본 육교" />
+          <img src="./images/section1/5.png" alt="강가에서 셀프 카메라" />
+          <img src="./images/section1/6.png" alt="오타루 거리" />
+          <img src="./images/section1/7.png" alt="벤치 위 두 고양이" />
+          <img src="./images/section1/8.png" alt="일본 거리 신호등 앞" />
+          <img src="./images/section1/9.png" alt="일본 육교 위" />
+          <img src="./images/section1/10.png" alt="삿포로 하천" />
+        </div>
+      </section>
+      <section id="second-section-anchor">
+        <h1>2022</h1>
+        <div class="halftone second-section-gallery">
+          <img
+            class="first-img"
+            src="./images/section2/1.png"
+            alt="예쁜 커튼과 침구의 방"
+          />
+          <div class="right-side">
+            <img src="./images/section2/2.png" alt="빛이 비친 팔과 손" />
+            <img
+              src="./images/section2/3.png"
+              alt="카메라를 들고 친구와 거울 찍기"
+            />
+            <img src="./images/section2/4.png" alt="오사카 밤거리" />
+            <img
+              class="last-img"
+              src="./images/section2/5.png"
+              alt="걸터 앉아 셀프카메라"
+            />
+          </div>
+        </div>
+      </section>
+      <section id="third-section-anchor">
+        <h1>2021</h1>
+        <div class="halftone third-section-gallery">
+          <img
+            class="grid-item"
+            src="./images/section3/1.png"
+            alt="빛이 비치는 송내역"
+          />
+          <img
+            class="grid-item"
+            src="./images/section3/3.png"
+            alt="크리스마스 케이크"
+          />
+          <img
+            class="grid-item"
+            src="./images/section3/2.png"
+            alt="책 읽는 두 사람"
+          />
+          <img
+            class="grid-item"
+            src="./images/section3/5.png"
+            alt="잔디밭 고양이"
+          />
+          <img
+            class="grid-item"
+            src="./images/section3/4.png"
+            alt="롯데월드에서 친구들과 셀프카메라"
+          />
+        </div>
+      </section>
+    </main>
+    <a class="top-btn" href="#top">
+      <button type="button">▴</button>
+    </a>
+    <footer>end</footer>
+  </body>
+</html>
diff --git a/week1/assign3/reset.css b/week1/assign3/reset.css
@@ -0,0 +1,115 @@
+/***
+    The new CSS reset - version 1.11 (last updated 20.9.2023)
+    GitHub page: https://github.com/elad2412/the-new-css-reset
+***/
+
+/*
+    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
+    - The "symbol *" part is to solve Firefox SVG sprite bug
+    - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
+ */
+*:where(
+    :not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)
+  ) {
+  all: unset;
+  display: revert;
+}
+
+/* Preferred box-sizing value */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Fix mobile Safari increase font-size on landscape mode */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Reapply the pointer cursor for anchor tags */
+a,
+button {
+  cursor: revert;
+}
+
+/* Remove list styles (bullets/numbers) */
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+/* For images to not be able to exceed their container */
+img {
+  max-inline-size: 100%;
+  max-block-size: 100%;
+}
+
+/* removes spacing between cells in tables */
+table {
+  border-collapse: collapse;
+}
+
+/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
+input,
+textarea {
+  -webkit-user-select: auto;
+}
+
+/* revert the 'white-space' property for textarea elements on Safari */
+textarea {
+  white-space: revert;
+}
+
+/* minimum style to allow to style meter element */
+meter {
+  -webkit-appearance: revert;
+  appearance: revert;
+}
+
+/* preformatted text - use only for this feature */
+:where(pre) {
+  all: revert;
+  box-sizing: border-box;
+}
+
+/* reset default text opacity of input placeholder */
+::placeholder {
+  color: unset;
+}
+
+/* remove default dot (•) sign */
+::marker {
+  content: initial;
+}
+
+/* fix the feature of 'hidden' attribute.
+   display:revert; revert to element instead of attribute */
+:where([hidden]) {
+  display: none;
+}
+
+/* revert for bug in Chromium browsers
+   - fix for the content editable attribute will work properly.
+   - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
+:where([contenteditable]:not([contenteditable="false"])) {
+  -moz-user-modify: read-write;
+  -webkit-user-modify: read-write;
+  overflow-wrap: break-word;
+  -webkit-line-break: after-white-space;
+  -webkit-user-select: auto;
+}
+
+/* apply back the draggable feature - exist only in Chromium and Safari */
+:where([draggable="true"]) {
+  -webkit-user-drag: element;
+}
+
+/* Revert Modal native behavior */
+:where(dialog:modal) {
+  all: revert;
+  box-sizing: border-box;
+}