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

w3.css 테이블 정렬 JavaScript를 사용하여 HTML 표를 정렬하는 방법을 알아보자. 정렬 함수 생성 1단계) Javascript 추가 function sortTable() { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById(“myTable”); switching = true; /* Make a loop that will continue until no switching has been done: */ while (switching) { // Start by saying: no switching is done: switching = false; rows = table.rows; /* Loop through all table rows (except the first, which contains table headers): */ for (i…

w3.css 목록 정렬 JavaScript를 사용하여 HTML 목록을 정렬하는 방법을 알아보자. 정렬 함수 생성 1단계) HTML 추가 <ul id=”id01″> <li>Oslo</li> <li>Stockholm</li> <li>Helsinki</li> <li>Berlin</li> <li>Rome</li> <li>Madrid</li> </ul> <script> function sortList() { var list, i, switching, b, shouldSwitch; list = document.getElementById(“id01”); switching = true; /* Make a loop that will continue until no switching has been done: */ while (switching) { // Start by saying: no switching is done: switching = false; b = list.getElementsByTagName(“LI”); // Loop through all list items: for (i…