본문 바로가기
프로그래밍/자바스크립트

프로그래밍 「 자바스크립트 편」HTML 코드로 사진 갤러리를 만드는 방법

by grapedoukan 2023. 6. 17.
728x90

안녕하세요, 코더입니다. 이 기사에서는 HTML 및 CSS 코드로 사진 갤러리를 만들 것입니다. 이 사진 갤러리에는 표준 갤러리와 비슷하게 표시되는 여러 이미지가 포함됩니다. 우리는 멋진 반응형 사진 갤러리 웹사이트를 만들 것입니다.

이 사진 갤러리의 모든 이미지는 작은 크기로 표시되며, 그 중 하나를 클릭하면 해당 이미지의 전체 크기가 표시되며 마우스 휠을 사용하여 사진을 확대 및 축소할 수 있습니다.

이 프로젝트는 웹 페이지에 여러 이미지를 추가하는 방법과 페이지를 반응형으로 만드는 방법을 알려줍니다.

프로젝트에 대한 아이디어가 있었기를 바랍니다.

프로젝트 사진 갤러리를 살펴 보겠습니다.

코드를 작성하기 전에 글꼴에 대한 HTML 파일에 다음 링크를 추가하기만 하면 됩니다.

head 태그 아래에 이 링크를 추가해야 합니다.

Step1: 사진 갤러리에 대한 몇 가지 기본 HTML 코드를 추가하는 것으로 시작하겠습니다.

HTML은 하이퍼텍스트 마크업 언어이며 웹 페이지의 주요 구조로 콘텐츠를 브라우저에 표시하는 데 도움이 됩니다.

모든 HTML 문서는 <!doctypehtml로 시작해야 합니다> 이렇게 하면 브라우저가 최신 HTML 형식을 따라 작성된 코드를 이해하는 데 도움이 됩니다.

HTML 문서 자체는 <html>로 시작하고 </html>로 끝납니다.

브라우저에 표시될 콘텐츠는 본문 섹션<본문></본문> 아래에 있습니다. 본문 태그 안에는 주요 내용이 있습니다.

여기서는 HTML 코드의 구조를 처음부터 추가합니다.

HTML에는 다음 부분이 포함되어 있습니다.

  • HTML 코드의 주요 내용은 이미지가 포함된 div 태그에 있습니다.
  • class(m-p-g_thumbs-img)가 있는 img 태그입니다.
  • 이미지를 전체 크기로 보는 데 도움이 되는 또 다른 div 태그가 있습니다.

아래 코드를 통해 IDE에 붙여 넣으십시오.

HTML 포토 갤러리 코드 : -

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Photos Material Gallery</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,300' rel='stylesheet' type='text/css'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="m-p-g">
    <div class="m-p-g__thumbs" data-google-image-layout data-max-height="350">
        
        
        
        
        
        
        
        
        
    </div>    <div class="m-p-g__fullscreen"></div>
</div><script>
    var elem = document.querySelector('.m-p-g');    document.addEventListener('DOMContentLoaded', function() {
        var gallery = new MaterialPhotoGallery(elem);
    });
</script>
<!-- partial -->
https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/material-photo-gallery.min.js'</a>>
</body>
</html>

사진 갤러리에 스타일을 지정하지 않고 미리 보기:

코드를 작성하기 전에 HTML 파일에 CSS 링크를 추가하기만 하면 웹사이트에 스타일을 추가할 수 있습니다.

<link rel="stylesheet" href="./style.css">

head 태그 아래에 이 링크를 추가해야 합니다.

2단계: 사진 갤러리용 CSS 코드 추가

CSS를 통해 우리는 메인 컨테이너를 디자인하고 최대 너비를 제공 한 다음 각각의 모든 이미지에 스타일을 지정하고 이미지에 약간의 전환을 제공하고 이미지에 호버 효과를 제공합니다.

아래 코드는 더 많은 것을 분석 할 것입니다. 따라서 HTML 절반 완성 파일을 추가하고 마술을 볼 때까지 기다리십시오.

/*------------------------------------*\
 MATERIAL PHOTO GALLERY
 \*------------------------------------*/
.m-p-g {
  max-width: 100%;
  margin: 0 auto;
}
.m-p-g__thumbs-img {
  margin: 0;
  float: left;
  vertical-align: bottom;
  cursor: pointer;
  z-index: 1;
  position: relative;
  opacity: 0;
  filter: brightness(100%);
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  will-change: opacity, transform;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__thumbs-img.active {
  z-index: 50;
}
.m-p-g__thumbs-img.layout-completed {
  opacity: 1;
}
.m-p-g__thumbs-img.hide {
  opacity: 0;
}
.m-p-g__thumbs-img:hover {
  filter: brightness(110%);
}
.m-p-g__fullscreen {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0);
  visibility: hidden;
  transition: background 0.25s ease-out, visibility 0.01s 0.5s linear;
  will-change: background, visibility;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.m-p-g__fullscreen.active {
  transition: background 0.25s ease-out, visibility 0.01s 0s linear;
  visibility: visible;
  background: rgba(0, 0, 0, 0.95);
}
.m-p-g__fullscreen-img {
  pointer-events: none;
  position: absolute;
  transform-origin: left top;
  top: 50%;
  left: 50%;
  max-height: 100vh;
  max-width: 100%;
  visibility: hidden;
  will-change: visibility;
  transition: opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.active {
  visibility: visible;
  opacity: 1 !important;
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease-out;
}
.m-p-g__fullscreen-img.almost-active {
  opacity: 0;
  transform: translate3d(0, 0, 0) !important;
}
.m-p-g__controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  height: 20vh;
  background: linear-gradient(to top, transparent 0%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
.m-p-g__controls.active {
  opacity: 1;
  visibility: visible;
}
.m-p-g__controls-close, .m-p-g__controls-arrow {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  background: none;
}
.m-p-g__controls-close:focus, .m-p-g__controls-arrow:focus {
  outline: none;
}
.m-p-g__controls-arrow {
  position: absolute;
  z-index: 1;
  top: 0;
  width: 20%;
  height: 100vh;
  display: flex;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  opacity: 0;
}
.m-p-g__controls-arrow:hover {
  opacity: 1;
}
.m-p-g__controls-arrow--prev {
  left: 0;
  padding-left: 3vw;
  justify-content: flex-start;
}
.m-p-g__controls-arrow--next {
  right: 0;
  padding-right: 3vw;
  justify-content: flex-end;
}
.m-p-g__controls-close {
  position: absolute;
  top: 3vh;
  left: 3vw;
  z-index: 5;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.m-p-g__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.07);
  transition: all 0.25s ease-out;
}
.m-p-g__btn:hover {
  background: rgba(255, 255, 255, 0.15);
}
.m-p-g__alertBox {
  position: fixed;
  z-index: 999;
  max-width: 700px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 25px;
  border-radius: 3px;
  text-align: center;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.23), 0 10px 40px rgba(0, 0, 0, 0.19);
  color: grey;
}
.m-p-g__alertBox h2 {
  color: red;
}
/* DEMO */
body {
  background: #fefefe;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-family: 'Roboto Mono';
}
h2 {
  font-weight: 300;
  margin: 4vh 4vw;
  letter-spacing: 3px;
  color: grey;
  text-transform: uppercase;
}
.demo-btn {
  display: inline-block;
  margin: 0 2.5px 4vh 2.5px;
  text-decoration: none;
  color: grey;
  padding: 15px;
  line-height: 1;
  min-width: 140px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 6px;
}
.demo-btn:hover {
  background: rgba(0, 0, 0, 0.12);
}
@media (max-width: 640px) {
  .demo-btn {
    min-width: 0;
    font-size: 14px;
  }
}

스타일 사진 갤러리를 추가한 후 미리 보기:

3단계: 사진 갤러리용 Javascript 코드 추가

우리는 방금 HTML 파일에 스크립트 태그를 사용하여 자바 스크립트를 추가했습니다. javascript 부분에서 클래스 이름으로 요소를 선택하는 변수를 초기화 한 다음 콘텐츠가로드 될 때 eventlistener domcontentloaded를 추가하여 변수를 생성하는 함수를 콜백합니다.

이제 출력에서 볼 수 있듯이 HTML, CSS 및 JavaScript를 사용하여 작은 웹 사이트 프로젝트를 만드는 데 도움이 되는 사진 갤러리를 만들었습니다.

그래서, 블로그는 어땠어, 학습자!

이와 같이 더 선명한 블로그를 원하신다면 블로그 사이트 CodewithRandom을 확인하십시오. 매일 여기에서 새로운 것을 배우게 될 것이기 때문에 계속 지켜봐 주십시오.

이 프로젝트를 이해하고 이 블로그에서 새로운 것을 배울 수 있기를 바랍니다. 문제가 있었다면 고민에 댓글을 남겨주시고, 마음에 드셨다면 댓글란에 감사의 인사를 남겨주세요. 이것은 블로거가 새로운 블로그를 만들도록 영감을 줍니다.

작성자 : Arun

코드 작성자 : Ettrics

이 사진 갤러리에 어떤 코드 편집기를 사용하시나요?

개인적으로 간단하고 사용하기 쉬운 VS Code Studio를 사용하는 것이 좋습니다.

이 프로젝트는 반응형입니까?

예, 사진 갤러리는 반응형 프로젝트입니다.

이 프로젝트를 만들기 위해 외부 링크를 사용합니까?

예, 사진 갤러리에 대한 일부 외부 링크를 사용합니다.

728x90
저작자표시

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

프로그래밍 「 자바스크립트 편」Johnny-Five의 힘 발휘: 센서를 통한 화재 감지  (0) 2023.06.25
프로그래밍 「 자바스크립트 편」React Native에서 범용 앱 빌드 시스템 설계  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」JavaScript 최적화: 더 빠른 코드를 위한 10가지 입증된 기술  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」연산자를 사용하여 JavaScript 데이터 형식 이해 typeof  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」NodeJS에서 GPT-4 함수 호출의 기능 활용  (0) 2023.06.17

관련글

티스토리툴바