SOPT-all · woodzverse · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025 · Nov 6, 2025
diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@
 ┣ 📂 chaeyoung
 ┃ ┣ 📂 week1
 ┃ ┗ 📂 week2 …
-┣ 📂 jooyoung
+┣ 📂 juyoung
 ┃ ┣ 📂 week1
 ┃ ┗ 📂 week2 …
 ┗ 📂 yunha

diff --git a/juyoung/week1/chapter_4_interactive/4-1_interactive/01_intractive.html b/juyoung/week1/chapter_4_interactive/4-1_interactive/01_intractive.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-1_interactive-01_interactive.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-1_interactive/01_interactive.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Interactive Web</h1>
+      <section class="container">
+        <article class="image_wrap">
+          <div class="texts">
+            <strong class="title">Interactive Web</strong>
+            <p class="details">
+              인터렉티브 웹은 사용자와 웹 사이트가 서로 상호 작용하도록 하는 것을 목표로 하며, 이를 위해 동적 컨텐츠 생성, 사용자 행동 분석 및 반영 등 다양한 기술을 사용합니다. <br />
+              <br />
+              이러한 상호작용은 사용자 경험(UX)을 향상시키는 데 큰 역할을 합니다.
+            </p>
+          </div>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-2_fade/01_variables.html b/juyoung/week1/chapter_4_interactive/4-2_fade/01_variables.html
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-2_fade-01_variables.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-2_fade/01_variables.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Variables</h1>
+      <section class="container">
+        <div>DIV 요소</div>
+        <p>P 요소</p>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-2_fade/02_opacity.html b/juyoung/week1/chapter_4_interactive/4-2_fade/02_opacity.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-2_fade-02_opacity.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-2_fade/02_opacity.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Opacity & Visibility</h1>
+      <section class="container">
+        <div>
+          <p>Opacity : 투명도를 결정하고 1이면 완전 불투명, 0이면 완전 투명을 말하는데, 요소가 투명하지만 클릭이나 터치가 가능하고, 문서의 흐름에서도 공간을 차지합니다.</p>
+          <p>
+            Visibility : 보이는지를 결정하는 속성으로 visible 속성과 hidden 속성으로 요소의 노출 여부를 결정할 수 있는데, 이 때에도 요소는 보이지 않지만 여전히 문서의 흐름에서 차지하는 공간은 유지가
+            됩니다.
+          </p>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-2_fade/03_transition.html b/juyoung/week1/chapter_4_interactive/4-2_fade/03_transition.html
@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-2_fade-03_transition.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-2_fade/03_transition.css" />
+    <script>
+      function toggleActive(e) {
+        const $currentArticle = e.currentTarget.parentElement.parentElement;
+        $currentArticle.classList.toggle('active');
+      }
+    </script>
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Transition</h1>
+      <section class="container">
+        <h2>Transition Examples</h2>
+        <article class="opacity">
+          <div class="head">
+            <h3>opacity</h3>
+            <button type="button" onclick="toggleActive(event)">Active</button>
+          </div>
+          <div class="body">
+            <span class="ease" data-transition>ease</span>
+            <span class="ease-in" data-transition>ease-in</span>
+            <span class="ease-out" data-transition>ease-out</span>
+            <span class="cubic" data-transition>bezier</span>
+          </div>
+        </article>
+        <article class="translate">
+          <div class="head">
+            <h3>transform - translate</h3>
+            <button type="button" onclick="toggleActive(event)">Active</button>
+          </div>
+          <div class="body">
+            <span class="ease" data-transition>ease</span>
+            <span class="ease-in" data-transition>ease-in</span>
+            <span class="ease-out" data-transition>ease-out</span>
+            <span class="cubic" data-transition>bezier</span>
+          </div>
+        </article>
+        <article class="rotate">
+          <div class="head">
+            <h3>transform - rotate</h3>
+            <button type="button" onclick="toggleActive(event)">Active</button>
+          </div>
+          <div class="body">
+            <span class="ease" data-transition>ease</span>
+            <span class="ease-in" data-transition>ease-in</span>
+            <span class="ease-out" data-transition>ease-out</span>
+            <span class="cubic" data-transition>bezier</span>
+          </div>
+        </article>
+        <article class="scale">
+          <div class="head">
+            <h3>transform - scale</h3>
+            <button type="button" onclick="toggleActive(event)">Active</button>
+          </div>
+          <div class="body">
+            <span class="ease" data-transition>ease</span>
+            <span class="ease-in" data-transition>ease-in</span>
+            <span class="ease-out" data-transition>ease-out</span>
+            <span class="cubic" data-transition>bezier</span>
+          </div>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-3_card/01_hover_focus_active.html b/juyoung/week1/chapter_4_interactive/4-3_card/01_hover_focus_active.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-3_card-01_hover_focus_active.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-3_card/01_hover_focus_active.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Hover, Focus, Active</h1>
+      <ol class="container">
+        <li data-type="hover"><button type="button">Hover</button></li>
+        <li data-type="focus"><button type="button">Focus</button></li>
+        <li data-type="active"><button type="button">Active</button></li>
+      </ol>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-3_card/02_transform.html b/juyoung/week1/chapter_4_interactive/4-3_card/02_transform.html
@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-3_card-02_transform.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-3_card/02_transform.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Transform</h1>
+      <ol class="container">
+        <li class="card">
+          <a href="https://www.google.com" target="_blank" rel="noopener noreferrer" class="card_inner">
+            <div class="card_front"></div>
+            <div class="card_back">
+              <strong class="title text_shadow_neon">Card Flip</strong>
+              <p class="desc">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, vero vitae. Ducimus, quibusdam dicta! Eligendi porro repudiandae adipisci labore laborum ullam, corrupti et sint
+                dolor dignissimos. Suscipit ut architecto tenetur.
+              </p>
+            </div>
+          </a>
+        </li>
+        <li class="card">
+          <a href="https://www.google.com" target="_blank" rel="noopener noreferrer" class="card_inner">
+            <div class="card_front"></div>
+            <div class="card_back">
+              <strong class="title text_shadow_neon">Rotate Card</strong>
+              <p class="desc">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, vero vitae. Ducimus, quibusdam dicta! Eligendi porro repudiandae adipisci labore laborum ullam, corrupti et sint
+                dolor dignissimos. Suscipit ut architecto tenetur.
+              </p>
+            </div>
+          </a>
+        </li>
+        <li class="card">
+          <a href="https://www.google.com" target="_blank" rel="noopener noreferrer" class="card_inner">
+            <div class="card_front"></div>
+            <div class="card_back">
+              <strong class="title text_shadow_neon">Card Effect</strong>
+              <p class="desc">
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur, vero vitae. Ducimus, quibusdam dicta! Eligendi porro repudiandae adipisci labore laborum ullam, corrupti et sint
+                dolor dignissimos. Suscipit ut architecto tenetur.
+              </p>
+            </div>
+          </a>
+        </li>
+      </ol>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-3_card/03_animation.html b/juyoung/week1/chapter_4_interactive/4-3_card/03_animation.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-3_card-03_animation.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-3_card/03_animation.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">Animation</h1>
+      <section class="container">
+        <h2 class="sr-only">3D Image Gallery</h2>
+        <div class="carousel_wrap">
+          <div class="carousel">
+            <div class="item"><img src="../public/img/apple.jpeg" alt="사과" class="img" /></div>
+            <div class="item"><img src="../public/img/orange.jpeg" alt="오렌지" class="img" /></div>
+            <div class="item"><img src="../public/img/watermelon.jpeg" alt="수박" class="img" /></div>
+            <div class="item"><img src="../public/img/milk.jpeg" alt="우유" class="img" /></div>
+            <div class="item"><img src="../public/img/melon.jpeg" alt="멜론" class="img" /></div>
+            <div class="item"><img src="../public/img/grapefruit.jpeg" alt="자몽" class="img" /></div>
+            <div class="item"><img src="../public/img/grape.jpeg" alt="포도" class="img" /></div>
+            <div class="item"><img src="../public/img/pumkin.jpeg" alt="호박" class="img" /></div>
+            <div class="item"><img src="../public/img/potato.jpeg" alt="감자" class="img" /></div>
+            <div class="item"><img src="../public/img/egg.jpeg" alt="달걀" class="img" /></div>
+          </div>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/juyoung/week1/chapter_4_interactive/4-4_svg/01_basic.html b/juyoung/week1/chapter_4_interactive/4-4_svg/01_basic.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html lang="ko-KR">
+  <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>4-4_svg-01_basic.html</title>
+    <link rel="stylesheet" href="../public/css/reset.css" />
+    <link rel="stylesheet" href="../public/css/common.css" />
+    <link rel="stylesheet" href="../public/css/chapter_4/4-4_svg/01_basic.css" />
+  </head>
+
+  <body>
+    <main class="main">
+      <h1 class="heading_1">SVG</h1>
+      <div class="svg_wrap">
+        <!-- circle -->
+        <svg width="100" height="100">
+          <circle cx="30" cy="30" r="20" stroke="#000000" stroke-width="2" fill="gray" />
+        </svg>
+        <!-- rect -->
+        <svg width="100" height="100">
+          <rect width="60" height="60" x="15" y="15" stroke="#323232" stroke-width="3" fill="dodgerblue" />
+        </svg>
+        <!-- path -->
+        <svg width="100" height="100">
+          <path d="M20 20 C 40 10, 80 10, 33 40 S 0 0, 40 70" stroke="#7a5fff" stroke-width="3" fill="transparent" stroke-linecap="round" />
+        </svg>
+        <!-- g -->
+        <svg width="100" height="100">
+          <g stroke="red" stroke-width="2">
+            <circle cx="40" cy="40" r="20" fill="blue" />
+            <rect width="20" height="20" x="10" y="10" fill="#999" />
+          </g>
+        </svg>
+      </div>
+    </main>
+  </body>
+</html>