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”…

w3.css 반응형 헤더 CSS를 사용하여 반응형 헤더를 만드는 방법을 알아보자. 반응형 헤더 만들기 1단계) HTML 추가 <div class=”header”> <a href=”#default” class=”logo”>CompanyLogo</a> <div class=”header-right”> <a class=”active” href=”#home”>Home</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> </div> 2단계) CSS 추가 /* Style the header with a grey background and some padding */ .header { overflow: hidden; background-color: #f1f1f1; padding: 20px 10px; } /* Style the header links */ .header a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px;…

w3.css 알약 탐색 CSS를 사용하여 알약 탐색 메뉴를 만드는 방법을 알아보자. 알약 탐색 만들기 1단계) HTML 추가 <div class=”pill-nav”> <a class=”active” href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> 2단계) CSS 추가 /* Style the links inside the pill navigation menu */ .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } /* Change the color of links on mouse-over */ .pill-nav a:hover { background-color: #ddd; color: black; } /* Add a…

w3.css 고정 소셜 바 CSS를 사용하여 고정/고정 소셜 미디어 아이콘 표시줄을 만드는 방법을 알아보자. 고정 소셜 바를 만드는 방법 1단계) HTML 추가 <!– Load font awesome icons –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– The social media icon bar –> <div class=”icon-bar”> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <a href=”#” class=”twitter”><i class=”fa fa-twitter”></i></a> <a href=”#” class=”google”><i class=”fa fa-google”></i></a> <a href=”#” class=”linkedin”><i class=”fa fa-linkedin”></i></a> <a href=”#” class=”youtube”><i class=”fa fa-youtube”></i></a> </div> 2단계) CSS 추가 /* Fixed/sticky icon bar (vertically aligned 50% from the top of…

w3.css 수직 버튼 그룹 CSS를 사용하여 수직 “버튼 그룹”을 만드는 방법을 알아보자. 수직 버튼 그룹을 만드는 방법 1단계) HTML 추가 <div class=”btn-group”> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div> 2단계) CSS 추가 .btn-group button { background-color: #04AA6D; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 50%; /* Set a width if needed */ display: block; /* Make the buttons…

w3.css 버튼 그룹 CSS를 사용하여 “버튼 그룹”을 만드는 방법을 알아보자. 버튼 그룹을 만드는 방법 1단계) HTML 추가 <div class=”btn-group”> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div> 2단계) CSS 추가 .btn-group button { background-color: #04AA6D; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ float: left; /* Float the buttons side by side */ } .btn-group button:not(:last-child) { border-right: none; /* Prevent…

w3.css 탐색경로 CSS를 사용하여 탐색경로 탐색을 만드는 방법을 알아보자. 탐색경로 탐색을 만드는 방법 1단계) HTML 추가 <ul class=”breadcrumb”> <li><a href=”#”>Home</a></li> <li><a href=”#”>Pictures</a></li> <li><a href=”#”>Summer 15</a></li> <li>Italy</li> </ul> 2단계) CSS 추가 /* Style the list */ ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #eee; } /* Display list items side by side */ ul.breadcrumb li { display: inline; font-size: 18px; } /* Add a slash symbol (/) before/behind each list item */ ul.breadcrumb li+li:before { padding: 8px; color: black; content:…