생각 작업실 The atelier of thinking

29. <JavaScript> 배열 Array 본문

웹(Web) 이야기

29. <JavaScript> 배열 Array

knowledge-seeker 2024. 3. 19. 18:02

지난 회차에 함수를 사용하여 코드를 구조화하였습니다. 이번 회차에는 이 함수를 여러 이미지에 재사용해 보겠습니다.

앞서 적용된 코드는 하나의 이미지에만 사용할 수 있어, 이를 여러 개의 이미지에 적용하기 위해서는 배열이라는 개념이 필요합니다.

먼저, 배열(Array)에 대해서 알아보겠습니다.

 

 

1. 배열이란

 

배열이란 한마디로 여러 자료를 묶어서 활용할 수 있는 특수한 자료입니다.

배열은 하나의 변수에 여러 값을 저장할 수 있으며, 이러한 값들은 순서대로 나열되어 있습니다. 각각의 값은 인덱스(index)라고 불리는 숫자로 식별됩니다.

배열은 다음과 같은 특징을 가지고 있습니다.

(1) 순서가 있는 집합

배열은 각 요소의 순서가 있으며, 이 순서는 0부터 시작하는 인덱스로 접근할 수 있습니다. 따라서 배열의 요소는 정렬된 순서대로 저장되어 있습니다.

(2) 여러 데이터 타입 포함 가능

배열은 하나의 변수에 여러 종류의 데이터를 저장할 수 있습니다. 따라서 문자열, 숫자, 불리언, 객체, 함수 등 다양한 데이터 타입을 포함할 수 있습니다.

(3) 가변 길이

배열은 동적으로 요소를 추가하거나 제거할 수 있으며, 따라서 배열의 크기는 가변적입니다. 이는 배열을 유연하게 사용할 수 있도록 해줍니다.

(4) 배열 요소 접근

배열의 각 요소에 접근하기 위해서는 인덱스를 사용합니다. 인덱스를 통해 특정 요소를 읽거나 수정할 수 있습니다.

배열은 많은 프로그래밍 언어에서 기본적으로 제공되는 데이터 구조이며, 데이터를 구조화하고 관리하는 데 매우 유용합니다.

2. 배열만들기

 

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형입니다.
배열은 대괄호 [...]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력합니다.
배열 내부에 들어 있는 값을 요소(Element)라고 합니다.

 

let colors = ['red', 'green', 'blue']; // 문자열 배열 생성
let numbers = [1, 2, 3, 4, 5]; // 숫자 배열 생성
let mixed = ['apple', 3, true]; // 여러 타입의 요소를 포함하는 배열 생성

 

3. 배열 요소에 접근하기

 

배열의 각 요소에 접근할 때는 인덱스(index)를 사용합니다. 배열의 첫 번째 요소는 인덱스 0으로 시작합니다.

 

<body>
<h1> 배열 </h1>

<h3> 인덱스를 이용해서 요소 접근하기 </h3>

<script>
     let colors = ['red', 'green', 'blue']; // 문자열 배열 생성
     let numbers = [1, 2, 3, 4, 5]; // 숫자 배열 생성
     let mixed = ['apple', 3, true]; // 여러 타입의 요소를 포함하는 배열 생성

     document.write("colors[0]:"+colors[0]+"<br>")
     document.write("colors[1]:"+colors[1]+"<br>")
     document.write("colors[2]:"+colors[2])
</script>
</body>

 

 

4. 배열 요소 개수 확인하기

 

배열의 요소 개수를 확인하기 위해서는 length 속성을 사용합니다.

 

document.write("colors 요소 갯수 :"+ colors.length)

colors 요소 갯수 :3

 

5. 모달에서 배열 적용해보기

 

앞서 이미지를 클릭하면 모달창이 열리는 코드를 만들어 봤습니다.
이를 응용해서 이미지가 여러 개 있을 때에 각 이미지를 클릭할 때마다 그 이미지가 모달창에 열리도록 적용시켜보겠습니다.

 

2024.02.24 - [웹(Web) 이야기] - 18. Grid Layout 예제

 

18. <CSS> Grid Layout 예제

지난 회차에 그리드 레이아웃에 대해 알아봤습니다. 이번회차에는 그리드 레이아웃을 이용해 간단한 포토 갤러리를 만들어 보겠습니다. 1. HTML 구문 Gallery 1 Gallery 2 Gallery 3 Gallery 4 Gallery 5 Gallery 6

thinking-atelier.tistory.com


위 예제는 Grid Layout에서 여러 이미지 파일을 적용시켰었습니다. 이 코드에 모달창을 열리게 하는 코드를 적용시켜 보겠습니다.

(1) <HTML>

 

<div id="content">
        <h1> Modal with Grid Layout</h1>
        <div class="grid">
          <div class="item">
            <img class="myImg" src="images/spring.jpg">
            <h2>Spring</h2>
          </div>
          <div class="item">
            <img class="myImg" src="images/summer.jpg">
            <h2>Summer</h2>
          </div>            
          <div class="item">              
            <img class="myImg" src="images/autumn.jpg">
            <h2>Autumn</h2>
          </div>          
          <div class="item">
            <img class="myImg" src="images/winter.jpg">
            <h2>Winter</h2>
          </div>          
        </div>
       
        <!-- The Modal -->
        <div id="myModal" class="modal">

            <!-- The Close Button -->
            <span class="close" onclick="modalclose();">&times;</span>

            <!-- Modal Content (The Image) -->
            <img class="modal-content" id="img01">
          
        </div>
     </div>

 

4개의 이미지와 모달창에 대한 코드입니다.

 

(2) JavaScript

앞서 만들었더 모달창 작동 코드입니다.

 

<script>
  var modal = document.getElementById("myModal");
  var img = document.getElementById("myImg");
  var modalImg = document.getElementById("img01");

  function modalopen() {
    modal.style.display='block';
    modalImg.src = img.src;
  }

  function modalclose() {
    modal.style.display = 'none';    
  }
</script>

 

var img = document.getElementById("myImg");

 

위 코드는 하나의 이미지에만 적용되기 때문에 이것을 여러 이미지에 적용되도록 수정이 필요합니다.

여러 이미지를 하나의 변수에 담는 배열이 필요합니다.

이 때 유용한 셀렉터는 "querySelectorAll"과 "getElementsByClassName" 입니다.

 

var img = document.querySelectorAll("img");

 

또는,

var img = document.getElementsByClassName("myImg");

 

이 두 샐렉터가 만들어낸 배열안의 요소 수는 4 입니다.

 

console.log(img.length)

4

 

위 코드에서 img 변수(배열)에는 img[0], img[1], img[2], img[3]이 포함되어 있습니다. 따라서, 아래의 코드를 바로 적용시킬 수는 없습니다.

modalImg.src = img.src;

 

위 코드는 매개변수를 사용하여, 함수를 아래와 같이 바꿔주면 됩니다.

 

function modalopen(i) {
    modal.style.display='block';
    modalImg.src = img[i].src;
  }

 

이제 위 함수를 각 이미지에 적용시키면 아래와 같습니다.

 

<img class="myImg" src="images/spring.jpg" alt="" onclick="modalopen(0);">
<img class="myImg" src="images/summer.jpg" alt="" onclick="modalopen(1);">
<img class="myImg" src="images/autumn.jpg" alt="" onclick="modalopen(2);">
<img class="myImg" src="images/winter.jpg" alt="" onclick="modalopen(3);">

 

winter 이미지를 클릭하면 아래와 같이 나타납니다.

 

전체 코드

 

<head> 부문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <style>
        h1 {
            text-align: center;
            padding: 32px;
            }
        #content {
            margin-left: 25%; /*메뉴바 표시할 공간*/
            margin-right: 10%;
            padding: 1px 16px;
        }
        ul {
            width: 15%;
            list-style-type: none;
            font-size: 120%;
            background-color: #f1f1f1;
            height: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            position: fixed; /*화면에 고정, 스크롤에 관계없이*/
        }
        li a{
            text-decoration: none;
            display: block; /*블록요소로*/
            padding: 8px 16px;
            color: black;
        }        
        li a:hover {
            background-color: #555;
            color: white;
        }
        .grid{
            display: grid;
            grid-template-columns: auto auto ;
            grid-auto-rows: minmax(400px, auto);
            grid-gap : 20px;
            justify-content: center;
        }
        .grid img{                   
            border: 1px solid #ccc;
            box-shadow: 5px 5px 6px rgba(75, 4, 4, 0.3);
            width: 100%;
            border-radius: 10px;
        }
        .grid img:hover {
            transition: .3s transform;
            transform: scale(1.2, 1.2);
        }
        .item {
          padding: 20px;
          width: 100%;
          background-color: #d6d6d6;
          border-radius: 10px;          
        }
        .item h2{
          text-align: center;
          color: blue;
        }

        .modal {
          display: none; /* Hidden by default */
          position: fixed; /* Stay in place */
          z-index: 1; /* Sit on top */
          padding-top: 100px; /* Location of the box */
          left: 0;
          top: 0;
          width: 100%; /* Full width */
          height: 100%; /* Full height */
          overflow: auto; /* Enable scroll if needed */
          background-color: rgb(0,0,0); /* Fallback color */
          background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
        }
        /* Modal Content (image) */
      .modal-content {
        margin: auto;
        display: block;
        width: 80%;
        max-width: 700px;
      }
      .modal-content {
        animation-name: zoom;
        animation-duration: 1s;
      }
      
      @keyframes zoom {
        from {transform:scale(0)}
        to {transform:scale(1)}
      }
      
      /* The Close Button */
      .close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        transition: 0.3s;
      }
      
      .close:hover,
      .close:focus {
        color: #bbb;
        text-decoration: none;
        cursor: pointer;
      }
    </style>
</head>

 

<body> 부문

<body>
    <div id="navbar">
        <ul>
            <li> <a href="grid2.html"> Gallery 1</a> </li>
            <li> <a href="modal_1_6.html"> Gallery 2</a> </li>
            <li> <a href="grid2.html"> Gallery 3</a> </li>
            <li> <a href="grid2.html"> Gallery 4</a> </li>
            <li> <a href="grid2.html"> Gallery 5</a> </li>
            <li> <a href="grid2.html"> Gallery 6</a> </li>
        </ul>
    </div>
    <div id="content">
        <h1> Modal with Grid Layout</h1>
        <div class="grid">
          <div class="item">
            <img class="myImg" src="images/spring.jpg" alt="" onclick="modalopen(0);">
            <h2>Spring</h2>
          </div>

          <div class="item">
            <img class="myImg" src="images/summer.jpg" alt="" onclick="modalopen(1);">
            <h2>Summer</h2>
          </div>
            
          <div class="item">              
            <img class="myImg" src="images/autumn.jpg" alt="" onclick="modalopen(2);">
            <h2>Autumn</h2>
          </div>
          
          <div class="item">
            <img class="myImg" src="images/winter.jpg" alt="" onclick="modalopen(3);">
            <h2>Winter</h2>
          </div>
           
           
        </div>
       
        <!-- The Modal -->
        <div id="myModal" class="modal">

            <!-- The Close Button -->
            <span class="close" onclick="modalclose();">&times;</span>

            <!-- Modal Content (The Image) -->
            <img class="modal-content" id="img01">
          
        </div>
     </div>

     <script>
      var modal = document.getElementById("myModal");
      // var img = document.getElementsByClassName("myImg");
      var img = document.querySelectorAll("img");
      var modalImg = document.getElementById("img01");
    
      function modalopen(i) {
        modal.style.display='block';
        modalImg.src = img[i].src;
      }
    
      function modalclose() {
        modal.style.display = 'none';    
      }
     
    </script>    
</body>
</html>

'웹(Web) 이야기' 카테고리의 다른 글

31. <JavaScript> 예제 : 토글 Toggle  (0) 2024.03.26
30.<JavaScript> 기본 자료형 (Data Type)  (0) 2024.03.21
28.<JavaScript> 함수(function) 란?  (1) 2024.03.17
27.<JavaScript> 변수(Variable) : 모달 Modal  (0) 2024.03.14
26. <CSS> display 속성 : 모달(Modal)  (0) 2024.03.13
'웹(Web) 이야기' Related Articles more