w3.css 스크롤 표시기 CSS와 JavaScript를 사용하여 스크롤 표시기를 만드는 방법을 알아보자. 스크롤 표시기를 만드는 방법 1단계) HTML 추가 <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div>content…</div> 2단계) CSS 추가 /* Style the header: fixed position (always stay at the top) */ .header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; } /* The progress container (grey background) */ .progress-container { width: 100%; height: 8px; background: #ccc; } /* The progress bar (scroll indicator)…

w3.css 타임라인 CSS를 사용하여 반응형 “타임라인”을 만드는 방법을 알아보자. 타임라인을 만드는 방법 1단계) HTML 추가 <div class=”timeline”> <div class=”container left”> <div class=”content”> <h2>2017</h2> <p>Lorem ipsum..</p> </div> </div> <div class=”container right”> <div class=”content”> <h2>2016</h2> <p>Lorem ipsum..</p> </div> </div> </div> 2단계) CSS 추가 * { box-sizing: border-box; } /* Set a background color */ body { background-color: #474e5d; font-family: Helvetica, sans-serif; } /* The actual timeline (the vertical ruler) */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* The…

w3.css 삭제 확인 모달 CSS를 사용하여 삭제 확인 모달을 만드는 방법을 알아보자. 삭제 모달을 만드는 방법 1단계) HTML 추가 <button onclick=”document.getElementById(‘id01’).style.display=’block'”>Open Modal</button> <div id=”id01″ class=”modal”> <span onclick=”document.getElementById(‘id01’).style.display=’none'” class=”close” title=”Close Modal”>×</span> <form class=”modal-content” action=”/action_page.php”> <div class=”container”> <h1>Delete Account</h1> <p>Are you sure you want to delete your account?</p> <div class=”clearfix”> <button type=”button” class=”cancelbtn”>Cancel</button> <button type=”button” class=”deletebtn”>Delete</button> </div> </div> </form> </div> 2단계) CSS 추가 * {box-sizing: border-box} /* Set a style for all buttons */ button { background-color: #04AA6D; color: white; padding: 14px…

w3.css CSS/JS 모달 CSS와 JavaScript로 모달 박스를 만드는 방법을 알아보자. 모달 박스를 만드는 방법 1단계) HTML 추가 <!– Trigger/Open The Modal –> <button id=”myBtn”>Open Modal</button> <!– The Modal –> <div id=”myModal” class=”modal”> <!– Modal content –> <div class=”modal-content”> <span class=”close”>×</span> <p>Some text in the Modal..</p> </div> </div> 2단계) CSS 추가 /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0;…

w3.css 전체 화면 비디오 CSS를 사용하여 전체 화면 비디오 배경을 만드는 방법을 알아보자. 전체 화면 비디오를 만드는 방법 1단계) HTML 추가 <!– The video –> <video autoplay muted loop id=”myVideo”> <source src=”rain.mp4″ type=”video/mp4″> </video> <!– Optional: some overlay text to describe the video –> <div class=”content”> <h1>Heading</h1> <p>Lorem ipsum…</p> <!– Use a button to pause/play the video with JavaScript –> <button id=”myBtn” onclick=”myFunction()”>Pause</button> </div> 2단계) CSS 추가 /* Style the video: 100% width and height to cover the entire window…

w3.css 비교표 CSS로 비교표를 만드는 방법을 알아보자. 비교표를 만드는 방법 1단계) HTML 추가 <!– Font Awesome Icon Library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <table> <tr> <th style=”width:50%”>Features</th> <th>Basic</th> <th>Pro</th> </tr> <tr> <td>Sample text</td> <td><i class=”fa fa-remove”></i></td> <td><i class=”fa fa-check”></i></td> </tr> <tr> <td>Sample text</td> <td><i class=”fa fa-check”></i></td> <td><i class=”fa fa-check”></i></td> </tr> </table> 2단계) CSS 추가 /* Style the table */ table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } /* Style table headers and table data */ th,…

w3.css 반응형 테이블 반응형 테이블을 만드는 방법을 알아보자. 테이블을 나란히 배치하는 방법 1단계) HTML 추가 <div style=”overflow-x:auto;”> <table> … </table> </div>

w3.css 나란히 놓인 테이블 CSS를 사용하여 나란히 놓인 표를 만드는 방법을 알아보자. 테이블을 나란히 배치하는 방법 CSS float 속성을 사용하여 나란히 놓인 표를 만드는 방법 * { box-sizing: border-box; } /* Create a two-column layout */ .column { float: left; width: 50%; padding: 5px; } /* Clearfix (clear floats) */ .row::after { content: “”; clear: both; display: table; } CSS flex 속성을 사용하여 나란히 놓인 표를 만드는 방법 * { box-sizing: border-box; } .row { display: flex; } .column {…

w3.css 중첩 테이블 중첩된 표(표 안에 표가 있는 형태)를 만드는 방법을 알아보자. 중첩 테이블을 만드는 방법 1단계) HTML 추가 <table> <tr> <td>Cell</td> <td>Nested Table <table> <tr> <td>Cell 1</td> </tr> <tr> <td>Cell 2</td> </tr> <tr> <td>Cell 3</td> </tr> <tr> <td>Cell 4</td> </tr> </table> </td> </tr> </table>

w3.css 전체 너비 테이블 CSS를 사용하여 전체 너비의 표를 만드는 방법을 알아보자. 전체 너비 테이블을 만드는 방법 전체 너비의 표를 만들려면 다음 width: 100%을 사용하자. 1단계) CSS 추가 table { width: 100%; }