BASIC ORIGNAL 글답변
본문 바로가기
메뉴열기
메뉴 닫기
일대일 문의
자주하시는 질문
MENU TEST
하위분류
회사소개
ZEST
자유게시판
HYMN_645
하위분류
YT_211109
YT_210720
YT_210514
YT_210423
YT_210420
갤러리
BIBLE
하위분류
BIBLE_230306
BIBLE_230219
BIBLE_220809
BIBLE_210607
BIBLE_210602
OFFICE
하위분류
OFFICE_VIEWER
OFFICE_PDFPPT
자주하는 질문
BASIC ORIGNAL
하위분류
TEST_BASIC
CHATGPT_230604
KIMS
하위분류
LIST_MODAL
LIGHTBOX
TOUR
Chat Message
기관 소개
OFFICE
OFFICE_VIEWER
회사소개
MENU
TXT_DATA
BIBLE EXTRACT
MEDIA
다국어 성경
깔끔모바일
Music Board
쇼핑몰
사용자메뉴
메뉴 닫기
사이트 내 전체검색
검색
뒤로가기
BASIC ORIGNAL 글답변
;
BASIC ORIGNAL 글답변
분류
필수
분류를 선택하세요
개발
일상
이름
필수
비밀번호
필수
이메일
홈페이지
옵션
html
비밀글
답변메일받기
제목
필수
내용
필수
웹에디터 시작
> > > <!DOCTYPE html> > <html> > <style> > * { > box-sizing: border-box; > } > > body { > margin: 0; > font-family: Arial, Helvetica, sans-serif; > } > > .header { > text-align: center; > padding: 32px; > } > > .row { > display: -ms-flexbox; /* IE 10 */ > display: flex; > -ms-flex-wrap: wrap; /* IE 10 */ > flex-wrap: wrap; > padding: 0 4px; > } > > /* Create two equal columns that sits next to each other */ > .column { > -ms-flex: 50%; /* IE 10 */ > flex: 50%; > padding: 0 4px; > } > > .column img { > margin-top: 8px; > vertical-align: middle; > } > > /* Style the buttons */ > .btn1 { > border: none; > outline: none; > padding: 10px 16px; > background-color: #f1f1f1; > cursor: pointer; > font-size: 18px; > } > > .btn1:hover { > background-color: #ddd; > } > > .btn1.active { > background-color: white; > color: black; > } > </style> > <body> > > <!-- Header --> > <div class="header" id="myHeader"> > <h1>Image Grid</h1> > <p>Click on the buttons to change the grid view.</p> > <button class="btn1" onclick="one()">1</button> > <button class="btn1 active" onclick="two()">2</button> > <button class="btn1" onclick="three()">3</button> > <button class="btn1" onclick="four()">4</button> > </div> > > <!-- Photo Grid --> > <div class="row"> > > <div class="column"> > <img src="/zz/w3/img/wedding.jpg" style="width:100%"> > <img src="/zz/w3/img/rocks.jpg" style="width:100%"> > <img src="/zz/w3/img/falls2.jpg" style="width:100%"> > <img src="/zz/w3/img/paris.jpg" style="width:100%"> > <img src="/zz/w3/img/nature.jpg" style="width:100%"> > <img src="/zz/w3/img/mist.jpg" style="width:100%"> > <img src="/zz/w3/img/paris.jpg" style="width:100%"> > </div> > > <div class="column"> > <img src="/zz/w3/img/underwater.jpg" style="width:100%"> > <img src="/zz/w3/img/ocean.jpg" style="width:100%"> > <img src="/zz/w3/img/wedding.jpg" style="width:100%"> > <img src="/zz/w3/img/mountainskies.jpg" style="width:100%"> > <img src="/zz/w3/img/rocks.jpg" style="width:100%"> > <img src="/zz/w3/img/underwater.jpg" style="width:100%"> > </div> > > <div class="column"> > <img src="/zz/w3/img/wedding.jpg" style="width:100%"> > <img src="/zz/w3/img/rocks.jpg" style="width:100%"> > <img src="/zz/w3/img/falls2.jpg" style="width:100%"> > <img src="/zz/w3/img/paris.jpg" style="width:100%"> > <img src="/zz/w3/img/nature.jpg" style="width:100%"> > <img src="/zz/w3/img/mist.jpg" style="width:100%"> > <img src="/zz/w3/img/paris.jpg" style="width:100%"> > </div> > > <div class="column"> > <img src="/zz/w3/img/underwater.jpg" style="width:100%"> > <img src="/zz/w3/img/ocean.jpg" style="width:100%"> > <img src="/zz/w3/img/wedding.jpg" style="width:100%"> > <img src="/zz/w3/img/mountainskies.jpg" style="width:100%"> > <img src="/zz/w3/img/rocks.jpg" style="width:100%"> > <img src="/zz/w3/img/underwater.jpg" style="width:100%"> > </div> > </div> > > <script> > // Get the elements with class="column" > var elements = document.getElementsByClassName("column"); > > // Declare a loop variable > var i; > > // Full-width images > function one() { > for (i = 0; i < elements.length; i++) { > elements[i].style.msflex = "100%"; > elements[i].style.flex = "100%"; > } > } > > // Two images side by side > function two() { > for (i = 0; i < elements.length; i++) { > elements[i].style.msFlex = "50%"; // IE10 > elements[i].style.flex = "50%"; > } > } > > // Three images side by side > function three(){ > for(i=0; i< elements.length; i++){ > elements[i].style.msFlex="33.3%"; > elements[i].style.flex= "33.3%"; > } > } > > // Four images side by side > function four() { > for (i = 0; i < elements.length; i++) { > elements[i].style.msFlex = "25%"; // IE10 > elements[i].style.flex = "25%"; > } > } > > > // Add active class to the current button (highlight it) > var header = document.getElementById("myHeader"); > > var btns = header.getElementsByClassName("btn1"); > > for (var i = 0; i < btns.length; i++) { > > btns[i].addEventListener("click", function() { > > var current = document.getElementsByClassName("active"); > current[0].className = current[0].className.replace(" active", ""); > this.className += " active"; > }); > } > </script> > > </body> > </html> > >
웹 에디터 끝
링크 #1
링크 #2
파일 #1
파일 #2
자동등록방지
숫자음성듣기
새로고침
자동등록방지 숫자를 순서대로 입력하세요.
취소
작성완료
About Us
Privacy Policy
Service Regulations
Kim's Vision
Copyright ©
EGIS.KR
All rights reserved.
사이트 정보
Kim's Company / CEO : Kimchulyong
Contact : kimchulyong100@gmail.com
상단으로
PC 버전으로 보기