無제

Vanilla Javascript_이미지 갤러리 전환 본문

<script>

Vanilla Javascript_이미지 갤러리 전환

yo-u-loo 2026. 6. 12. 18:34

 

Vanilla-JS-​section

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=3.0">
    <title>이미지 갤러리 전환 예제-https://www.youtube.com/watch?v=7WwN7HpREBE&list=PLpK-F7ihqVc39kaC4-77snhSpxa5umFRg&index=11
    </title>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css">
    <link rel="stylesheet" href="js3.css">
    <script src="script.js"></script>
</head>

<body>
    <div class="card">
        <main>
            <div class="top-section">
                <img id="imageContainer"
                    src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                    alt="">
            </div>
            <div class="thumb">
                <img onclick="change_img(this)"
                    src="https://images.unsplash.com/photo-1541781774459-bb2af2f05b55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                    alt="">
                <img onclick="change_img(this)"
                    src="https://images.unsplash.com/photo-1487300001871-12053913095d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                    alt="">
                <img onclick="change_img(this)"
                    src="https://images.unsplash.com/photo-1558674378-318ef3aa2355?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60"
                    alt="">
            </div>
        </main>

        <container>
            <h1>Where is Saryo-corner...</h1>
            <p><br></p>
            <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration
                in some form, by injected humour, or randomised words which don't look even slightly believable. If you
                are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden
                in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks
                as necessary, making this the first true generator on the Internet. </p>
            <p><br></p>
            <h2>2019/09/08 thursday</h2>
            <a class="btn" href="#">Adoption</a>
        </container>
    </div>

    <script>
        let container = document.getElementById("imageContainer");

        function change_img(image) {
            container.src = image.src;
        }
    </script>
</body>

</html>

 

* {
    border: 0px solid red;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: slategray;
    color: #888;
}

h1 {
    font-size: 2rem;
    color: black;
}

h2 {
    font-size: 1.4rem;
    color: mediumpurple;
}

.card {
    width: 1000px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 8px 8px 8px 4px rgba(0, 0, 0, 0.4);
}

main {
    float: left;
    width: 500px;
    background: #fff;
}

.top-section {
    padding: 40px;
    text-align: center;
}

#imageContainer {
    width: 420px;
    height: 300px;
}

.thumb {
    margin: 0 auto 40px;
    padding: 0;
    text-align: center;
}

.thumb img {
    padding: 0;
    margin: 0 5px;
    width: 130px;
    cursor: pointer;
    transition: 0.3s;
    border: 4px solid #888;
}

.thumb img:hover {
    border: 4px solid mediumpurple;
}

container {
    width: 500px;
    float: right;
    padding: 40px 40px 40px 0;
}

.btn {
    position: absolute;
    bottom: 40px;
    width: 460px;
    background: mediumpurple;
    text-align: center;
    text-decoration: none;
    color: #fff;
    padding: 10px;
    margin-top: 10px;
    transition: 0.3s;
}

.btn:hover {
    background: #333;
}

 

이번 코드는 이커머스 쇼핑몰의 상품 상세 페이지나 인스타그램 같은 SNS 피드, 혹은 갤러리 레이아웃에서 자주 사용되는 ‘썸네일 클릭 시 메인 이미지 교체’ 인터랙션입니다.

하단에 나열된 작은 이미지(썸네일)를 클릭하면 해당 이미지의 주소를 가져와 상단의 메인 이미지 영역에 즉시 반영하는 방식으로, 매우 직관적이고 사용자 경험을 향상시키는 기능입니다.

이번 예제의 핵심은 자바스크립트 이벤트 함수에 인자(Arguments)로 자기 자신을 의미하는 this를 전달하고, 이를 함수에서 매개변수(Parameter)로 받아 처리하는 구조입니다.

이 코드를 학습할 때 가장 어려워하는 부분은 자바스크립트 문법 자체보다, HTML 태그 안에 작성된 onclick="change_img(this)"에서의 this가 어떤 원리로 동작하는지 이해하는 부분입니다.

 

 

[this를 배달하는 매개변수 시스템]

  1. HTML에서의 this (배달원 역할)
    HTML 태그 안에서 인라인 이벤트로 사용되는 this는 해당 이벤트가 발생한 “자기 자신 요소”를 의미합니다.
    예를 들어 두 번째 이미지를 클릭했다면 change_img(this)는 사실상 “두 번째 이미지 태그 전체를 함수로 전달하는 것”과 동일한 동작입니다.

  2. JavaScript에서의 매개변수 image (수령인 역할)
    자바스크립트의 function change_img(image)에서 괄호 안의 image는 전달받은 값을 담아두는 "매개변수(빈 바구니)"입니다.
    이 이름은 반드시 image일 필요는 없으며 el, target 등 원하는 이름으로 자유롭게 지정할 수 있습니다.

    이렇게 전달받은 요소는 내부에서 image.src 형태로 접근할 수 있으며, 클릭된 썸네일의 이미지 주소를 얻어낼 수 있습니다.
    이 값을 큰 이미지 영역(container.src)에 다시 대입하면, 화면의 메인 이미지가 실시간으로 교체되는 구조가 완성됩니다.

 

'<script>' 카테고리의 다른 글

Vanilla Javascript_사이드바 토글 메뉴  (0) 2026.06.12
Vanilla Javascript_풀 스크린 오버레이 메뉴  (0) 2026.06.12
Vanilla Javascript_타이핑 효과 예제  (0) 2026.06.12
Vanilla Javascript_하단 슬라이드 모달  (0) 2026.06.12
Parameter (파라미터)와 Argument (아규먼트)  (0) 2026.06.02
'<script>' Related Articles more