🔥 [UIUX] 0204 JAVASCRIPT Coding, 코딩 초급~고급 19

You_Jin.·2025년 2월 4일

JavaScript 라이브러리 라이트 박스 만들기 슬라이드 자바스크립트 실습

✏️ 2025. 02월 04일 / javascript 초급~고급 19

💡 도전! 실습 라이트 박스 효과 만들기
앞에서 배운 내용을 토대로 클릭하면 내용의 속성이 바뀌는 라이트 박스 효과를 만들어보겠습니다.
✔️ css

    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      .row {
        width: 1520px;
        height: auto;
        margin: 160px auto;
      }
      .row > ul {
        display: flex;
        flex-wrap: wrap;
        gap: 40px;
        list-style: none;
      }
      /* 라이트 박스 영역 */
      #light_box {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        display: none;
      }
    </style>

✔️ html

 <body>
    <div class="row">
      <ul>
        <!-- 1 -->
        <li>
          <img
            src="./img/img_tumb-1.png"
            alt="썸네일이미지"
            data-src="img/img-1.jpg"
            class="pic"
          />
        </li>
        <!-- 2 -->
        <li>
          <img
            src="./img/img_tumb-2.png"
            alt="썸네일이미지"
            data-src="img/img-2.jpg"
            class="pic"
          />
        </li>
        <!-- 3 -->
        <li>
          <img
            src="./img/img_tumb-3.png"
            alt="썸네일이미지"
            data-src="img/img-3.jpg"
            class="pic"
          />
        </li>
        <!-- 4 -->
        <li>
          <img
            src="./img/img_tumb-4.png"
            alt="썸네일이미지"
            data-src="img/img-4.jpg"
            class="pic"
          />
        </li>
        <!-- 5 -->
        <li>
          <img
            src="./img/img_tumb-5.png"
            alt="썸네일이미지"
            data-src="img/img-5.jpg"
            class="pic"
          />
        </li>
        <!-- 6 -->
        <li>
          <img
            src="./img/img_tumb-6.png"
            alt="썸네일이미지"
            data-src="img/img-6.png"
            class="pic"
          />
        </li>
      </ul>
    </div>
    <!-- 라이트 박스 -->
    <div id="light_box">
      <img src="./img/img-1.jpg" alt="큰 이미지" id="light_box_img" />
    </div>

✔️ js

    <script>
      let pic = document.getElementsByClassName("pic"); //썸네일 6장
      let lightBox = document.getElementById("light_box"); //라이트 박스 영역
      let lightBoxImg = document.getElementById("light_box_img"); //라이트 박스의 큰이미지
      //썸네일 6장의 이벤트를 걸어줍니다.
      for (let i = 0; i < pic.length; i++) {
        pic[i].addEventListener("click", showLightBox);
      }
      //썸네일을 클릭하면 실행할 이벤트
      function showLightBox() {
        let bigLocation = this.getAttribute("data-src"); //썸네일 이미지의 큰 이미지 경로
        //라이트 박스 안의 큰 이미지의 경로를 data-src의 경로로 바꿉니다.
        lightBoxImg.setAttribute("src", bigLocation);
        //라이트 박스 영역을 나타냅니다.
        lightBox.style.display = "flex";
      }
      //라이트 박스를 감춥니다.
      lightBox.onclick = function () {
        lightBox.style.display = "none";
      };
    </script>

💡 DOM에서 노드 추가 삭제하기
DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 node list를 사용해야 합니다.
노드 리스트란 DOM에 접근할 때 querySelectorAll()메서드를 사용하면
노드를 한꺼번에 가져올 수 있습니다.
이때, 노드의 정보를 여러 개 저장한 것이 바로 노드 리스트라고 합니다.
배열과 비슷하게 생겼으며, 비슷하게 동작합니다.
노드 리스트에는 인덱스와 요솟값이 저장되고 lenght속성에 몇 개의 노드가 저장되어 있는지 표시됩니다.
노드 리스트는 배열처럼 생겼기 때문에 배열 문법을 이용하면 특정 순번째에 있는 태그를 가져올 수도 있습니다.
      [기본형]
      document.querySelectorAll('요소')[index]
💡 텍스트 노드를 사용하는 새로운 요소 추가하기
1. 요소 노드 만들기
: DOM에서 새로운 요소를 추가할 때 가장 먼저 할 일은 요소 노드를 만드는 것입니다.
이때 사용하는 메서드는 .createElement()메서드 입니다.
-
[기본형]
document.createElement(노드명) 노드명은 태그의 이름입니다.
2. 텍스트 노드 만들기
: 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 '자식노드'로 만들어서 연결해야 합니다.
텍스트 노드를 만드는 메서드는 .createTextNode() 메서드를 사용해야 합니다.
-
[기본형]
document.createTextNode('텍스트')
3. 자식 노드 연결하기
: 1번에서 만들었던 노드와 2번에서 만들었던 텍스트 노드는 노드가 만들어질 상태일 뿐이며
아직 부모노드와 자식노드로 연결되지 않은 상태입니다.
.appendChild()메서드를 사용하면 텍스트 노드나 속성노드를 만든 후 요소 노드에 연결할 수 있습니다.
이때 .appendChild()메서드를 사용해서 연결하는 노드는 자식 노드 중 맨 끝에 추가됩니다.
-
[기본형]
부모노드.appendChild(자식노드)

You_Jin.

🎧 ᴘʟᴀʏɪɴɢ: UXUI (Feat: coding) ─────────⚪───── 𝟸:𝟷𝟾 / 𝟹:𝟻𝟼⠀ ㅤ ◄◄⠀▐▐⠀►► ───○ 🔊

🔥 [UIUX] 0204 JAVASCRIPT Coding, 코딩 초급~고급 19

✏️ 2025. 02월 04일 / javascript 초급~고급 19

🔥 [UIUX] 0203 JAVASCRIPT Coding, 코딩 초급~고급 18

🔥 [UIUX] 0205 JAVASCRIPT Coding, 코딩 초급~고급 20

0개의 댓글