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%; }

w3.css 테이블 중앙 정렬 CSS를 사용하여 표를 가운데 정렬하는 방법을 알아보자. 테이블 중앙 정렬 방법 1단계) HTML 추가 <table class=”center”> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> 2단계) CSS 추가 표를 가운데 정렬하려면 왼쪽과 오른쪽 여백을 다음과 같이 auto 설정한다. .center { margin-left: auto; margin-right: auto; }

w3.css 얼룩말 무늬 테이블 CSS를 사용하여 얼룩말 줄무늬 테이블을 만드는 방법을 알아보자. 테이블에 얼룩말 줄무늬 그리기 1단계) CSS 추가 얼룩말 무늬 테이블을 만들려면 nth-child()선택기를 사용하여 모든 짝수(또는 홀수) 테이블 행에 배경색을 추가한다. tr:nth-child(even) { background-color: #f2f2f2; }