DO-SOPT-WEB · hae2ni · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023 · Oct 17, 2023
diff --git a/assign1/DATA.js b/assign1/DATA.js
@@ -0,0 +1,26 @@
+const DATA = [
+  { title: "꽃속의 웰코", summary: "이뿌지!!" },
+  { title: "멀보니웰코", summary: "날씨 조타!" },
+  { title: "눈웃음웰코", summary: "모야! 햇빛 죠아!" },
+  {
+    title: "잠자는 말티즈으",
+    summary:
+      "말티즈가잠을자고있어요말티즈가잠을자고있어요말티즈가잠을자고있어요",
+  },
+  { title: "사모예드가 당당티비!", summary: "아뇽! 나는 당당한 사모예에드!" },
+  { title: "졸림 강얼지", summary: "졸려티비..." },
+  {
+    title: "나 귀엽지?",
+    summary:
+      "너무 귀엽구 사랑스러워 너가 다행 핑크 옷 입은 강아지가 만세를 하고 웃다니 세상을 다 가질 것 같아",
+  },
+  {
+    title: "우리는 두마리!",
+    summary:
+      "강아지가 두마리라니 더 사랑스럽고 너무 사랑스럽고 너무 귀엽다ㅠㅠ 아 진짜 귀엽다 어떡해,,,",
+  },
+  { title: "무념무상", summary: "...졸려요" },
+  { title: "너...너...", summary: "내가 가지고 만다" },
+];
+
+export default DATA;
diff --git a/assign1/index.html b/assign1/index.html
@@ -5,35 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>📷먀먀먀먀먀 혠찡의 사진관티비 꺅📷</title>
     <link rel="stylesheet" href="./style.css" />
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script type="module" src="./DATA.js"></script>
   </head>
   <body>
     <header id="main_header"><h1>혠찡의 사진관티비 꺅</h1></header>
     <main>
-      <section class="scroll" id="preview">
-        <img
-          src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/f569fe59-db2c-49b0-aea3-4c4d4de9a909"
-          alt="꽃속에서웰코" />
-        <img
-          src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/04e42574-2bc0-4645-9a29-8149f6d81d30"
-          alt="웃고있는웰코" />
-        <img
-          src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/643e8286-a1a0-430f-ad90-ce475fe78377"
-          alt="바라본당" />
-        <img
-          src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F2b%2Fb2%2F10%2F2bb210388eb9d005456df3af578745c2.jpg&type=ofullfill340_600_png"
-          alt="어디바" />
-        <img
-          src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/86f38ede-d8f0-42f2-a888-880b0c1f135c"
-          alt="크리스마스냥이" />
-        <img
-          src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20150521_189%2Fqparass_1432179692522fUKxm_JPEG%2FNaverBlog_20150521_124131_17.jpg&type=ofullfill340_600_png"
-          alt="기염댕" />
-        <img
-          src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMjZfMTYz%2FMDAxNjY5NDY0MzE4Mzkx.dZWZtEr4da2urtDMN1rze3qSYHXtAbzIo_yV46HkJcog.OFlpulUKMQ_KL0jL1Xt-cn5dyq9SOXkoqwcIPX8LPqwg.JPEG.eunji2867%2F5787b9d7145ab7b526e05e896973590c.jpg&type=a340"
-          alt="만세링" />
-        <img
-          src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20150523_100%2Fjjun02026_1432388973865UnATH_JPEG%2F%25B8%25BB%25B8%25AE5_%25282%2529.JPG&type=sc960_832"
-          alt="뒹굴" />
+      <section id="preview">
+        <button type="button" id="toLeft">&lt;</button>
+        <article id="img_wrapper" class="scroll">
+          <img
+            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/f569fe59-db2c-49b0-aea3-4c4d4de9a909"
+            alt="꽃속에서웰코" />
+          <img
+            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/04e42574-2bc0-4645-9a29-8149f6d81d30"
+            alt="웃고있는웰코" />
+          <img
+            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/643e8286-a1a0-430f-ad90-ce475fe78377"
+            alt="바라본당" />
+          <img
+            src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F2b%2Fb2%2F10%2F2bb210388eb9d005456df3af578745c2.jpg&type=ofullfill340_600_png"
+            alt="어디바" />
+          <img
+            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/86f38ede-d8f0-42f2-a888-880b0c1f135c"
+            alt="크리스마스냥이" />
+          <img
+            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20150521_189%2Fqparass_1432179692522fUKxm_JPEG%2FNaverBlog_20150521_124131_17.jpg&type=ofullfill340_600_png"
+            alt="기염댕" />
+          <img
+            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMjZfMTYz%2FMDAxNjY5NDY0MzE4Mzkx.dZWZtEr4da2urtDMN1rze3qSYHXtAbzIo_yV46HkJcog.OFlpulUKMQ_KL0jL1Xt-cn5dyq9SOXkoqwcIPX8LPqwg.JPEG.eunji2867%2F5787b9d7145ab7b526e05e896973590c.jpg&type=a340"
+            alt="만세링" />
+          <img
+            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fcafefiles.naver.net%2F20150523_100%2Fjjun02026_1432388973865UnATH_JPEG%2F%25B8%25BB%25B8%25AE5_%25282%2529.JPG&type=sc960_832"
+            alt="뒹굴" />
+        </article>
+        <button type="button" id="toRight">&gt;</button>
       </section>
 
       <nav>
@@ -56,38 +62,58 @@ <h1>클릭하면 이동해요!</h1>
           <h2 class="section_title">🐶아기멈무🐶</h2>
         </div>
         <article class="first_pic_wrapper">
-          <img
-            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/f569fe59-db2c-49b0-aea3-4c4d4de9a909"
-            alt="꽃속에서웰코" />
-          <img
-            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/643e8286-a1a0-430f-ad90-ce475fe78377"
-            alt="" />
-          <img
-            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/04e42574-2bc0-4645-9a29-8149f6d81d30"
-            alt="웃고있는웰코" />
-          <img
-            src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/f569fe59-db2c-49b0-aea3-4c4d4de9a909"
-            alt="꽃속에서웰코" />
-          <img
-            src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F2b%2Fb2%2F10%2F2bb210388eb9d005456df3af578745c2.jpg&type=ofullfill340_600_png"
-            alt="어디바" />
-          <img
-            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20150521_189%2Fqparass_1432179692522fUKxm_JPEG%2FNaverBlog_20150521_124131_17.jpg&type=ofullfill340_600_png"
-            alt="기염댕" />
-          <img
-            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMjZfMTYz%2FMDAxNjY5NDY0MzE4Mzkx.dZWZtEr4da2urtDMN1rze3qSYHXtAbzIo_yV46HkJcog.OFlpulUKMQ_KL0jL1Xt-cn5dyq9SOXkoqwcIPX8LPqwg.JPEG.eunji2867%2F5787b9d7145ab7b526e05e896973590c.jpg&type=a340"
-            alt="만세링" />
-          <img
-            src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fcc%2Fb2%2Ff2%2Fccb2f2e4efcd7c98ba8d0ebf9693a158.jpg&type=a340"
-            alt="두마리지롱" />
-          <img
-            class="media_small"
-            src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fb9%2F21%2F55%2Fb9215568498d0017edf37d607b086dd5.jpg&type=sc960_832"
-            alt="어디가" />
-          <img
-            class="media_small"
-            src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA4MTVfMTUg%2FMDAxNjYwNTMwNDAxMTgw.cwvPNFHDd2kqQS5kB4y2tItlt7rwPdUvALarWkHEgwcg.7WpqASll1KKH9BvsSUri5elJG-vNRGwQ3yocRmiyz4wg.JPEG.summervacation1%2FIMG_8776.JPG&type=ofullfill340_600_png"
-            alt="사과먹구싶다" />
+          <div class="first_section_pic">
+            <img
+              src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/f569fe59-db2c-49b0-aea3-4c4d4de9a909"
+              alt="꽃속에서웰코" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/643e8286-a1a0-430f-ad90-ce475fe78377"
+              alt="멀보니웰코" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://github.com/DO-SOPT-WEB/HyeinKwon/assets/100409061/04e42574-2bc0-4645-9a29-8149f6d81d30"
+              alt="웃고있는웰코" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTA5MzBfMTYz%2FMDAxNjMyOTQxNTMyNTQ3.V9Hj_HKiiw5QHhgJexI9XzMejk_8JQkJjHu7SPIcEYUg.tH2oDp1qOWtg_L1uDIDkv8SGAuJ-lIwDOaWBv0-1jyIg.JPEG.jisu9610042%2FIMG_6965.JPG&type=sc960_832"
+              alt="잠든 말티쥬" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2F2b%2Fb2%2F10%2F2bb210388eb9d005456df3af578745c2.jpg&type=ofullfill340_600_png"
+              alt="어디바" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20150521_189%2Fqparass_1432179692522fUKxm_JPEG%2FNaverBlog_20150521_124131_17.jpg&type=ofullfill340_600_png"
+              alt="기염댕" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjExMjZfMTYz%2FMDAxNjY5NDY0MzE4Mzkx.dZWZtEr4da2urtDMN1rze3qSYHXtAbzIo_yV46HkJcog.OFlpulUKMQ_KL0jL1Xt-cn5dyq9SOXkoqwcIPX8LPqwg.JPEG.eunji2867%2F5787b9d7145ab7b526e05e896973590c.jpg&type=a340"
+              alt="만세링" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fcc%2Fb2%2Ff2%2Fccb2f2e4efcd7c98ba8d0ebf9693a158.jpg&type=a340"
+              alt="두마리지롱" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              class="media_small"
+              src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2F736x%2Fb9%2F21%2F55%2Fb9215568498d0017edf37d607b086dd5.jpg&type=sc960_832"
+              alt="어디가" />
+          </div>
+          <div class="first_section_pic">
+            <img
+              class="media_small"
+              src="https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMjA4MTVfMTUg%2FMDAxNjYwNTMwNDAxMTgw.cwvPNFHDd2kqQS5kB4y2tItlt7rwPdUvALarWkHEgwcg.7WpqASll1KKH9BvsSUri5elJG-vNRGwQ3yocRmiyz4wg.JPEG.summervacation1%2FIMG_8776.JPG&type=ofullfill340_600_png"
+              alt="사과먹구싶다" />
+          </div>
         </article>
       </section>
 
@@ -166,5 +192,6 @@ <h2 class="section_title">🐣다른아가들🐣</h2>
     <footer>
       <h1>귀여워찌??</h1>
     </footer>
+    <script type="module" src="index.js"></script>
   </body>
 </html>
diff --git a/assign1/index.js b/assign1/index.js
@@ -0,0 +1,97 @@
+import DATA from "./DATA.js";
+
+const $ = (selector) => document.querySelector(selector);
+const $$ = (selector) => document.querySelectorAll(selector);
+
+// 1.a , b
+const firstImages = document.querySelectorAll(".first_section_pic");
+
+//더보기 버튼 생성
+const moreBtn = document.createElement("button");
+moreBtn.classList.add("more_button");
+moreBtn.innerText = "더보기";
+
+firstImages.forEach((pic, index) => {
+  const h2 = document.createElement("h2");
+  h2.classList.add("title");
+  const p = document.createElement("p");
+  p.classList.add("summary");
+  const { title, summary } = DATA[index];
+
+  let moreBtnClicked = false;
+
+  pic.addEventListener("mouseover", function () {
+    pic.childNodes[1].classList.add("addTitle");
+    pic.classList.add("addTitle");
+    h2.innerText = title;
+
+    const div = document.createElement("div");
+    div.classList.add("title_summary_wrapper");
+    div.appendChild(h2);
+    p.innerText = summary;
+    div.appendChild(p);
+    pic.appendChild(div);
+
+    //심화 1번
+    const pHeight = p.clientHeight;
+    const summaryHeight = p.scrollHeight;
+
+    if (pHeight < summaryHeight) {
+      div.appendChild(moreBtn);
+      !moreBtnClicked ? (moreBtn.style.display = "flex") : null;
+      moreBtn.addEventListener("click", () => {
+        p.classList.replace("summary", "summaryAll");
+        moreBtn.style.display = "none";
+      });
+    }
+    moreBtn.addEventListener("click", () => {
+      p.classList.replace("summary", "summaryAll");
+      moreBtnClicked = true;
+      moreBtn.style.display = "none";
+    });
+  });
+
+  pic.addEventListener("mouseleave", function () {
+    pic.classList.remove("addTitle");
+    h2.innerText = "";
+    p.innerText = "";
+    p.classList.replace("summaryAll", "summary");
+    moreBtn.style.display = "none";
+    moreBtnClicked = false;
+  });
+});
+
+//2.a
+const gotopBtn = document.getElementById("gotop_btn");
+window.addEventListener("scroll", () => {
+  const scrollY = window.scrollY;
+  const maxScroll = document.body.clientHeight - window.innerHeight;
+  const opacity = scrollY / maxScroll;
+  gotopBtn.style.opacity = opacity;
+});
+
+//심화 2번
+const preview = document.getElementById("preview");
+const article = document.getElementById("img_wrapper");
+const toLeft = document.getElementById("toLeft");
+const toRight = document.getElementById("toRight");
+
+toLeft.addEventListener("click", () => {
+  const articleWidth = article.scrollLeft;
+  const articleWidthh = article.scrollRight;
+  console.log(articleWidth, articleWidthh);
+  article.scrollTo({
+    left: articleWidth - 150,
+    behavior: "smooth",
+  });
+});
+
+toRight.addEventListener("click", () => {
+  const articleWidth = article.scrollLeft;
+  const articleWidthh = article.scrollRight;
+  console.log(articleWidth, articleWidthh);
+  article.scrollTo({
+    left: articleWidth + 150,
+    behavior: "smooth",
+  });
+});