HTML, CSS 및 JavaScript를 사용하여 간단한 이미지 갤러리를 만드는 방법
HTML, CSS 및 JavaScript를 사용하여 간단한 이미지 갤러리를 만드는 것은 웹 개발의 기초를 배울 수 있는 좋은 방법입니다. 이미지 갤러리에서 축소판을 선택하여 웹 페이지에서 이미지를 확대하여 이미지를 넘길 수 있습니다.
갤러리를 만들려면 HTML을 사용하여 웹 페이지 콘텐츠를 추가하고 CSS를 사용하여 스타일을 추가할 수 있습니다. JavaScript를 사용하여 사용자가 썸네일을 클릭할 때 갤러리를 대화형으로 만들 수 있습니다.
이미지 갤러리용 UI를 만드는 방법
HTML 및 CSS를 사용하여 이미지 갤러리용 UI를 추가합니다. 여기에는 웹 페이지 중앙에 큰 이미지를 추가하는 것이 포함되며 선택한 썸네일에 따라 변경됩니다. GitHub에서 전체 예제 소스 코드를 볼 수도 있습니다.
- “index.html”이라는 새 파일을 만듭니다.
- 이 파일 안에 기본 HTML 코드 구조를 추가합니다.
<!doctype html>
<html lang="en-US">
<head>
<title>Image Gallery</title>
</head>
<body>
<div class="intro">
<h2>Image Gallery</h2>
<p>Select a thumbnail below to view the image</p>
</div>
</body>
</html> - “이미지”라는 하위 폴더를 만듭니다. 여러 이미지로 채우고 “image1.jpg”에서 “image10.jpg”로 이름을 지정합니다.
- HTML 파일에서 이미지 갤러리용 div를 추가합니다.
<div id="image-gallery">
</div> - 이미지 갤러리 div 안에 이미지 태그를 추가하여 선택한 이미지를 확대 표시합니다. 기본적으로 “이미지” 폴더 안에 있는 첫 번째 이미지를 표시합니다.
<img id="current-image" src="images/image1.jpg" alt="Image 1"> - HTML 파일과 같은 폴더에 다음 CSS를 사용하여 “styles.css”라는 새 파일을 추가합니다. 자유롭게 CSS를 수정하여 뉴모픽 디자인 구성 요소를 추가하거나 이러한 CSS 팁과 요령을 사용하여 다른 디자인 조정을 해보세요.
-
.intro {
text-align: center;
font-family: Arial;
}h2 {
font-size: 36px;
}p {
font-size: 14pt;
}#image-gallery {
width: 600px;
margin: 0 auto;
}#current-image {
width: 100%;
} - HTML 파일의 head 태그에 CSS 파일에 대한 링크를 추가합니다.
<link rel="stylesheet" type="text/css" href="styles.css">
갤러리의 다른 이미지에 대한 축소판을 추가하는 방법
현재 이미지 갤러리에는 첫 번째 이미지만 표시됩니다. 선택한 이미지 아래에 축소판 목록을 추가합니다. 이 섬네일은 “이미지” 폴더 안에 있는 모든 이미지의 미리보기를 표시합니다.
- HTML 파일의 이미지 갤러리 div 내에서 다른 이미지의 축소판을 표시하는 또 다른 div를 추가합니다.
<div id="image-thumbs"></div> - CSS 파일 내에서 썸네일 목록에 대한 스타일을 추가합니다.
#image-thumbs {
display: flex;
justify-content: center;
margin-top: 20px;
} - HTML 및 CSS 파일이 있는 동일한 폴더에 “script.js”라는 새 파일을 추가합니다.
- HTML body 태그 하단에 JavaScript 파일에 대한 링크를 추가합니다.
<body>
<!-- Your code here -->
<script src="script.js"></script>
</body> - JavaScript 파일 내에서 썸네일 목록을 저장할 div의 HTML 요소를 가져옵니다.
var imageThumbs = document.getElementById("image-thumbs"); - 갤러리에 있는 10개의 이미지 각각을 반복하는 for 루프를 추가합니다.
for (var i = 1; i <= 10; i++) {
} - 루프 내에서 각 이미지에 대한 새 img 요소를 만듭니다.
var thumb = document.createElement("img"); - “src” 및 “alt” 특성에 대한 값을 추가합니다. 이 경우 “src” 속성은 “images” 폴더 내 동일한 인덱스에 있는 이미지의 파일 경로입니다.
thumb.src = "images/image" + i + ".jpg";
thumb.alt = "Image " + i; - CSS 파일 내에서 새 클래스를 추가하여 이미지의 축소판 스타일을 지정합니다. 섬네일에 다른 호버 또는 전환 CSS 스타일을 추가하여 웹 사이트를 반응형 및 대화형으로 만들 수도 있습니다.
.thumb {
width: 80px;
height: 80px;
object-fit: cover;
margin-right: 10px;
cursor: pointer;
} - JavaScript 파일 내에서 위의 클래스를 새 썸네일에 추가합니다.
thumb.classList.add("thumb"); - 축소판 목록이 포함된 HTML 요소에 새 축소판을 추가합니다.
imageThumbs.appendChild(thumb);
사용자가 썸네일을 클릭할 때 이미지를 변경하는 방법
사용자가 썸네일 중 하나를 클릭하면 페이지 중앙의 확대된 이미지를 선택한 이미지로 변경합니다. JavaScript 파일 내에 이 기능을 추가할 수 있습니다.
- JavaScript 파일의 맨 위에서 현재 선택된 이미지의 HTML 요소를 가져옵니다.
var currentImage = document.getElementById("current-image"); - for 루프 내에서 사용자가 페이지 하단에 있는 썸네일을 선택할 때 트리거되는 이벤트 핸들러를 추가합니다.
thumb.addEventListener(
"click", function() {
}
); - 이벤트 핸들러 내에서 현재 이미지의 “src” 속성을 새로 선택한 이미지로 변경합니다. “alt” 특성을 업데이트할 수도 있습니다.
currentImage.src = this.src;
currentImage.alt = this.alt; - “index.html” 파일을 클릭하여 웹 브라우저에서 엽니다.
- 이미지를 보려면 축소판을 선택하십시오.
JavaScript 지식을 계속 확장하십시오
경험에 관계없이 지식을 확장하기 위해 프로젝트를 계속 구축하는 것이 중요합니다. 체스 게임, 계산기 또는 할 일 목록 작성과 같은 다른 프로젝트를 계속 탐색하십시오.
답글 남기기