DO-SOPT-WEB · simeunseo · Jun 18, 2024 · Oct 25, 2023 · Oct 26, 2023 · Oct 26, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/week2/.DS_Store b/week2/.DS_Store
diff --git a/week2/assign1/images/.DS_Store b/week2/assign1/images/.DS_Store
diff --git a/week2/assign1/images/assign3-favicon.png b/week2/assign1/images/assign3-favicon.png
diff --git a/week2/assign1/images/onboarding/1.png b/week2/assign1/images/onboarding/1.png
diff --git a/week2/assign1/images/onboarding/10.png b/week2/assign1/images/onboarding/10.png
diff --git a/week2/assign1/images/onboarding/2.png b/week2/assign1/images/onboarding/2.png
diff --git a/week2/assign1/images/onboarding/3.png b/week2/assign1/images/onboarding/3.png
diff --git a/week2/assign1/images/onboarding/4.png b/week2/assign1/images/onboarding/4.png
diff --git a/week2/assign1/images/onboarding/5.png b/week2/assign1/images/onboarding/5.png
diff --git a/week2/assign1/images/onboarding/6.png b/week2/assign1/images/onboarding/6.png
diff --git a/week2/assign1/images/onboarding/7.png b/week2/assign1/images/onboarding/7.png
diff --git a/week2/assign1/images/onboarding/8.png b/week2/assign1/images/onboarding/8.png
diff --git a/week2/assign1/images/onboarding/9.png b/week2/assign1/images/onboarding/9.png
diff --git a/week2/assign1/images/section1/.DS_Store b/week2/assign1/images/section1/.DS_Store
diff --git a/week2/assign1/images/section1/1.png b/week2/assign1/images/section1/1.png
diff --git a/week2/assign1/images/section1/10.png b/week2/assign1/images/section1/10.png
diff --git a/week2/assign1/images/section1/2.png b/week2/assign1/images/section1/2.png
diff --git a/week2/assign1/images/section1/3.png b/week2/assign1/images/section1/3.png
diff --git a/week2/assign1/images/section1/4.png b/week2/assign1/images/section1/4.png
diff --git a/week2/assign1/images/section1/5.png b/week2/assign1/images/section1/5.png
diff --git a/week2/assign1/images/section1/6.png b/week2/assign1/images/section1/6.png
diff --git a/week2/assign1/images/section1/7.png b/week2/assign1/images/section1/7.png
diff --git a/week2/assign1/images/section1/8.png b/week2/assign1/images/section1/8.png
diff --git a/week2/assign1/images/section1/9.png b/week2/assign1/images/section1/9.png
diff --git a/week2/assign1/images/section2/.DS_Store b/week2/assign1/images/section2/.DS_Store
diff --git a/week2/assign1/images/section2/1.png b/week2/assign1/images/section2/1.png
diff --git a/week2/assign1/images/section2/2.png b/week2/assign1/images/section2/2.png
diff --git a/week2/assign1/images/section2/3.png b/week2/assign1/images/section2/3.png
diff --git a/week2/assign1/images/section2/4.png b/week2/assign1/images/section2/4.png
diff --git a/week2/assign1/images/section2/5.png b/week2/assign1/images/section2/5.png
diff --git a/week2/assign1/images/section3/.DS_Store b/week2/assign1/images/section3/.DS_Store
diff --git a/week2/assign1/images/section3/1.png b/week2/assign1/images/section3/1.png
diff --git a/week2/assign1/images/section3/2.png b/week2/assign1/images/section3/2.png
diff --git a/week2/assign1/images/section3/3.png b/week2/assign1/images/section3/3.png
diff --git a/week2/assign1/images/section3/4.png b/week2/assign1/images/section3/4.png
diff --git a/week2/assign1/images/section3/5.png b/week2/assign1/images/section3/5.png
diff --git a/week2/assign1/index.html b/week2/assign1/index.html
@@ -0,0 +1,193 @@
+<!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>
+      <!-- 미리보기 가로스크롤 -->
+      <div class="onboarding-scroll-wrapper">
+        <button id="scroll-left-btn" type="button">&lt;</button>
+        <section id="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>
+        <button id="scroll-right-btn" type="button">&gt;</button>
+      </div>
+    </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">
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Sogang Univ North Gate</h3>
+              <p>
+                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
+                ipsum dolor sit amet. Lorem
+              </p>
+            </div>
+            <img src="./images/section1/1.png" alt="서강대학교 남문" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Hangang Park</h3>
+              <p>
+                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
+                ipsum dolor sit amet. Lorem
+              </p>
+            </div>
+            <img src="./images/section1/2.png" alt="뚝섬 한강공원" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Artist GrandFa</h3>
+              <p>
+                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
+                ipsum dolor sit amet. Lorem
+              </p>
+            </div>
+            <img
+              src="./images/section1/3.png"
+              alt="오타루 운하를 그리는 할아버지"
+            />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Japan Bridge</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/4.png" alt="일본 육교" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Self Camera</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/5.png" alt="강가에서 셀프 카메라" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Otaru Street</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/6.png" alt="오타루 거리" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Cats on the Bench</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/7.png" alt="벤치 위 두 고양이" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Japan Street</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/8.png" alt="일본 거리 신호등 앞" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Japan Bridge</h3>
+              <p>Lorem ipsum dolor sit amet consectetur adipisicing.</p>
+            </div>
+            <img src="./images/section1/9.png" alt="일본 육교 위" />
+          </div>
+          <div class="overlay-wrapper">
+            <div class="content">
+              <h3>Sapporo Stream</h3>
+              <p>
+                Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem
+                ipsum dolor sit amet. Lorem
+              </p>
+            </div>
+            <img src="./images/section1/10.png" alt="삿포로 하천" />
+          </div>
+        </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 id="top-btn" href="#top">
+      <button type="button">▴</button>
+    </a>
+    <footer>end</footer>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/week2/assign1/reset.css b/week2/assign1/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;
+}
diff --git a/week2/assign1/script.js b/week2/assign1/script.js
@@ -0,0 +1,47 @@
+/* 스크롤에 따른 topBtn 투명도 */
+
+const windowHeight = window.innerHeight;
+const topBtn = document.getElementById("top-btn");
+
+document.addEventListener("scroll", () => {
+  topBtn.style.opacity = window.scrollY / windowHeight / 2;
+});
+
+/* 글자수에 따른 더보기 버튼 활성화 및 작동 */
+
+const contents = document.querySelectorAll(".content");
+contents.forEach((content) => {
+  const contentDescription = content.children[1];
-const contents = document.querySelectorAll(".content");
-contents.forEach((content) => {
-  const contentDescription = content.children[1];
+const contentDescription = document.querySelectorAll(".content > p");
+contents.forEach((content) => {
-const contents = document.querySelectorAll(".content");
-contents.forEach((content) => {
-  const contentDescription = content.children[1];
+const contentDescription = document.querySelectorAll(".content > p");
+contents.forEach((content) => {
+  if (contentDescription.innerText.length >= 85) {
-  if (contentDescription.innerText.length >= 85) {
+  if (contentDescription.clientHeight < contentDescription.scrollHeight) {
+    }
-  if (contentDescription.innerText.length >= 85) {
+  if (contentDescription.clientHeight < contentDescription.scrollHeight) {
+    }
+    const moreBtn = document.createElement("button"); //button 요소 생성
+    moreBtn.innerText = "more";
+    moreBtn.setAttribute("class", "content-more-btn"); //button 클래스명 지정
+
+    content.appendChild(moreBtn); //button 붙이기
+
+    /* 클릭 이벤트시 버튼 사라짐 */
+    content.addEventListener("click", () => {
+      contentDescription.style.display = "block"; //말줄임 표시를 없앰
+      moreBtn.style.display = "none";
+    });
+  }
+});
+
+/* 미리보기 섹션 스크롤 버튼 */
+const scrollLeftBtn = document.getElementById("scroll-left-btn");
+const scrollRightBtn = document.getElementById("scroll-right-btn");
+
+const onboardingScroll = document.getElementById("onboarding-scroll");
+const maxScrollWidth = onboardingScroll.scrollWidth;
+
+scrollLeftBtn.addEventListener("click", () => {
+  onboardingScroll.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+});
+
+scrollRightBtn.addEventListener("click", () => {
+  onboardingScroll.scrollTo({
+    top: 0,
+    left: maxScrollWidth,
+    behavior: "smooth",
+  });
+});