w3.css 이미지 호버 오버레이 마우스를 올리면 이미지에 페이딩 오버레이 효과를 만드는 방법을 알아보자. 텍스트 페이드 인 만들기 1단계) HTML 추가 <div class=”container”> <img src=”img_avatar.png” alt=”Avatar” class=”image”> <div class=”overlay”> <div class=”text”>Hello World</div> </div> </div> 2단계) CSS 추가 .container { position: relative; width: 50%; } .image { display: block; width: 100%; height: auto; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 100%; width: 100%; opacity: 0; transition: .5s ease; background-color: #008CBA; } .container:hover .overlay { opacity:…

w3.css 탭 갤러리 CSS 및 JavaScript를 사용하여 탭 이미지 갤러리를 만드는 방법을 알아보자. 탭 갤러리 만들기 1단계) HTML 추가 <!– The grid: four columns –> <div class=”row”> <div class=”column”> <img src=”img_nature.jpg” alt=”Nature” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_snow.jpg” alt=”Snow” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_mountains.jpg” alt=”Mountains” onclick=”myFunction(this);”> </div> <div class=”column”> <img src=”img_lights.jpg” alt=”Lights” onclick=”myFunction(this);”> </div> </div> <!– The expanding image container –> <div class=”container”> <!– Close the image –> <span onclick=”this.parentElement.style.display=’none'” class=”closebtn”>×</span> <!– Expanded image –> <img id=”expandedImg” style=”width:100%”> <!–…

w3.css 가로 스크롤 가능 이미지 갤러리 CSS를 사용하여 가로 스크롤 막대가 있는 이미지 갤러리를 만드는 방법을 알아보자. 가로 스크롤을 사용하여 이미지 갤러리 만들기 1단계) HTML 추가 <div class=”scroll-container”> <img src=”img_5terre.jpg” alt=”Cinque Terre”> <img src=”img_forest.jpg” alt=”Forest”> <img src=”img_lights.jpg” alt=”Northern Lights”> <img src=”img_mountains.jpg” alt=”Mountains”> </div> 2단계) CSS 추가 div.scroll-container { background-color: #333; overflow: auto; white-space: nowrap; padding: 10px; } div.scroll-container img { padding: 10px; }

w3.css 반응형 이미지 갤러리 CSS를 사용하여 반응형 이미지 갤러리를 만드는 방법을 알아보자. 이미지 갤러리 만들기 1단계) HTML 추가 <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_5terre.jpg”> <img src=”img_5terre.jpg” alt=”Cinque Terre”> </a> <div class=”desc”>Add a description of the image here</div> </div> </div> <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_forest.jpg”> <img src=”img_forest.jpg” alt=”Forest”> </a> <div class=”desc”>Add a description of the image here</div> </div> </div> <div class=”responsive”> <div class=”gallery”> <a target=”_blank” href=”img_lights.jpg”> <img src=”img_lights.jpg” alt=”Northern Lights”> </a> <div class=”desc”>Add a description of the image…

w3.css 이미지 그리드 이미지 격자를 만드는 방법을 알아보자. 이미지 격자 만들기 1단계) HTML 추가 <div class=”row”> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div>…

w3.css 반응형 이미지 그리드 반응형 이미지 그리드를 만드는 방법을 알아보자. 이미지 격자 만들기 1단계) HTML 추가 <div class=”row”> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img src=”underwater.jpg”> </div> <div class=”column”> <img src=”wedding.jpg”> <img src=”rocks.jpg”> <img src=”falls2.jpg”> <img src=”paris.jpg”> <img src=”nature.jpg”> <img src=”mist.jpg”> <img src=”paris.jpg”> </div> <div class=”column”> <img src=”underwater.jpg”> <img src=”ocean.jpg”> <img src=”wedding.jpg”> <img src=”mountainskies.jpg”> <img src=”rocks.jpg”> <img…

w3.css 라이트박스 CSS 및 JavaScript를 사용하여 모달 이미지 갤러리(라이트박스)를 만드는 방법을 알아보자. 라이트박스 만들기 1단계) HTML 추가 다음 예에서는 모달 과 슬라이드쇼 의 코드를 결합하여 라이트박스를 만든다. <!– Images used to open the lightbox –> <div class=”row”> <div class=”column”> <img src=”img1.jpg” onclick=”openModal();currentSlide(1)” class=”hover-shadow”> </div> <div class=”column”> <img src=”img2.jpg” onclick=”openModal();currentSlide(2)” class=”hover-shadow”> </div> <div class=”column”> <img src=”img3.jpg” onclick=”openModal();currentSlide(3)” class=”hover-shadow”> </div> <div class=”column”> <img src=”img4.jpg” onclick=”openModal();currentSlide(4)” class=”hover-shadow”> </div> </div> <!– The Modal/Lightbox –> <div id=”myModal” class=”modal”> <span class=”close cursor” onclick=”closeModal()”>×</span> <div class=”modal-content”> <div…

w3.css 모달 이미지 CSS 및 JavaScript를 사용하여 반응형 모달 이미지를 만드는 방법을 알아보자. 모달 이미지 1단계) HTML 추가 <!– Trigger the Modal –> <img id=”myImg” src=”img_snow.jpg” alt=”Snow” style=”width:100%;max-width:300px”> <!– The Modal –> <div id=”myModal” class=”modal”> <!– The Close Button –> <span class=”close”>×</span> <!– Modal Content (The Image) –> <img class=”modal-content” id=”img01″> <!– Modal Caption (Image Text) –> <div id=”caption”></div> </div> 2단계) CSS 추가 /* Style the Image Used to Trigger the Modal */ #myImg { border-radius: 5px; cursor: pointer; transition:…

w3.css 슬라이드쇼 갤러리 CSS와 JavaScript를 사용하여 반응형 슬라이드쇼 갤러리를 만드는 방법을 알아보자. 슬라이드쇼 갤러리 만들기 1단계) HTML 추가 <!– Container for the image gallery –> <div class=”container”> <!– Full-width images with number text –> <div class=”mySlides”> <div class=”numbertext”>1 / 6</div> <img src=”img_woods_wide.jpg” style=”width:100%”> </div> <div class=”mySlides”> <div class=”numbertext”>2 / 6</div> <img src=”img_5terre_wide.jpg” style=”width:100%”> </div> <div class=”mySlides”> <div class=”numbertext”>3 / 6</div> <img src=”img_mountains_wide.jpg” style=”width:100%”> </div> <div class=”mySlides”> <div class=”numbertext”>4 / 6</div> <img src=”img_lights_wide.jpg” style=”width:100%”> </div> <div class=”mySlides”> <div class=”numbertext”>5 / 6</div>…

w3.css 슬라이드쇼 CSS와 JavaScript를 사용하여 반응형 슬라이드쇼를 만드는 방법을 알아보자. 슬라이드쇼 만들기 1단계) HTML 추가 <!– Slideshow container –> <div class=”slideshow-container”> <!– Full-width images with number and caption text –> <div class=”mySlides fade”> <div class=”numbertext”>1 / 3</div> <img src=”img1.jpg” style=”width:100%”> <div class=”text”>Caption Text</div> </div> <div class=”mySlides fade”> <div class=”numbertext”>2 / 3</div> <img src=”img2.jpg” style=”width:100%”> <div class=”text”>Caption Two</div> </div> <div class=”mySlides fade”> <div class=”numbertext”>3 / 3</div> <img src=”img3.jpg” style=”width:100%”> <div class=”text”>Caption Three</div> </div> <!– Next and previous buttons –> <a class=”prev”…