w3.css 사용자 평가 CSS를 사용하여 “사용자 평가” 점수표를 만드는 방법을 알아보자. 사용자 평가 점수표를 만드는 방법 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <span class=”heading”>User Rating</span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star”></span> <p>4.1 average based on 254 reviews.</p> <hr style=”border:3px solid #f1f1f1″> <div class=”row”> <div class=”side”> <div>5 star</div> </div> <div class=”middle”> <div class=”bar-container”> <div class=”bar-5″></div> </div> </div> <div class=”side right”> <div>150</div> </div> <div…

w3.css 별점 CSS를 사용하여 간단한 “별점” 모양을 만드는 방법을 알아보자. 별점 모양을 만드는 방법 1단계) HTML 추가 <!– Add icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <span class=”fa fa-star checked”></span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star checked”></span> <span class=”fa fa-star”></span> <span class=”fa fa-star”></span> 2단계) CSS 추가 .checked { color: orange; }

w3.css 배지 CSS로 배지를 만드는 방법을 알아보자. 배지를 만드는 방법 배지는 요소/콘텐츠에 추가 정보를 추가하는 데 사용할 수 있다. 예시 제목 New 1단계) HTML 추가 <span class=”badge”>New</span> 2단계) CSS 추가 .badge { background-color: red; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; }

w3.css CSS 로더 CSS로 프리로더를 만드는 방법을 알아보자. 로더를 만드는 방법 1단계) HTML 추가 <div class=”loader”></div> 2단계) CSS 추가 .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 120px; height: 120px; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }   border 속성은 로더의 테두리 크기와 테두리 색상을 지정한다. border-radius 속성은 로더를 원으로 변환한다. 테두리 안쪽에서 회전하는 파란색은…

w3.css 할 일 목록 CSS와 JavaScript를 사용하여 “할 일 목록”을 만드는 방법을 알아보자. 할 일 목록 만들기 .html 파일에 포함하려는 HTML을 저장한다. 1단계) HTML 추가 <div id=”myDIV” class=”header”> <h2>My To Do List</h2> <input type=”text” id=”myInput” placeholder=”Title…”> <span onclick=”newElement()” class=”addBtn”>Add</span> </div> <ul id=”myUL”> <li>Hit the gym</li> <li class=”checked”>Pay bills</li> <li>Meet George</li> <li>Buy eggs</li> <li>Read a book</li> <li>Organize office</li> </ul> 2단계) CSS 추가 헤더와 목록의 스타일을 지정한다. /* Include the padding and border in an element’s total width and height */ *…

w3.css HTML 포함 HTML에 HTML 스니펫을 포함하는 방법을 알아보자. HTML .html 파일에 포함하려는 HTML을 저장한다. content.html <a href=”howto_google_maps.asp”>Google Maps</a><br> <a href=”howto_css_animate_buttons.asp”>Animated Buttons</a><br> <a href=”howto_css_modals.asp”>Modal Boxes</a><br> <a href=”howto_js_animate.asp”>Animations</a><br> <a href=”howto_js_progressbar.asp”>Progress Bars</a><br> <a href=”howto_css_dropdown.asp”>Hover Dropdowns</a><br> <a href=”howto_js_dropdown.asp”>Click Dropdowns</a><br> <a href=”howto_css_table_responsive.asp”>Responsive Tables</a><br> HTML을 포함 HTML을 포함하려면 w3-include-html 속성을 사용한다. 예제 <div w3-include-html=”content.html”></div> 자바스크립트를 추가 HTML 포함은 JavaScript에 의해 수행된다. 예제 <script> function includeHTML() { var z, i, elmnt, file, xhttp; /* Loop through a collection of all HTML elements: */ z = document.getElementsByTagName(“*”);…

w3.css 캘린더 CSS로 캘린더를 만드는 방법을 알아보자. 캘린더 레이아웃을 만드는 방법 1단계) HTML 추가 <div class=”month”> <ul> <li class=”prev”>❮</li> <li class=”next”>❯</li> <li>August<br><span style=”font-size:18px”>2021</span></li> </ul> </div> <ul class=”weekdays”> <li>Mo</li> <li>Tu</li> <li>We</li> <li>Th</li> <li>Fr</li> <li>Sa</li> <li>Su</li> </ul> <ul class=”days”> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li><span class=”active”>10</span></li> <li>11</li> …etc </ul> 2단계) CSS 추가 ul {list-style-type: none;} body {font-family: Verdana, sans-serif;} /* Month header */ .month { padding: 70px 25px; width: 100%; background: #1abc9c; text-align: center; } /* Month list…

w3.css 접이식 콘텐츠 접을 수 있는 섹션을 만드는 방법을 알아보자. 접을 수 있는 콘텐츠 만들기 1단계) HTML 추가 <button type=”button” class=”collapsible”>Open Collapsible</button> <div class=”content”> <p>Lorem ipsum…</p> </div> 2단계) CSS 추가 /* Style the button that is used to open and close the collapsible content */ .collapsible { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } /* Add a background color to the button if it is clicked on (add…

w3.css 팝업 CSS와 JavaScript로 팝업을 만드는 방법을 알아보자. 팝업을 만드는 방법 1단계) HTML 추가 <div class=”popup” onclick=”myFunction()”>Click me! <span class=”popuptext” id=”myPopup”>Popup text…</span> </div> 2단계) CSS 추가 /* Popup container */ .popup { position: relative; display: inline-block; cursor: pointer; } /* The actual popup (appears on top) */ .popup .popuptext { visibility: hidden; width: 160px; background-color: #555; color: #fff; text-align: center; border-radius: 6px; padding: 8px 0; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -80px; } /* Popup arrow */…

w3.css 도구 설명 마우스를 올렸을 때 요소를 표시하는 방법을 알아보자. 호버 시 요소를 표시하는 방법 1단계) HTML 추가 <div class=”myDIV”>Hover over me.</div> <div class=”hide”>I am shown when someone hovers over the div above.</div> 2단계) CSS 추가 .hide { display: none; } .myDIV:hover + .hide { display: block; color: red; } 인접한 형제 선택기(+)는 지정된 요소의 인접한 형제인 모든 요소를 선택한다. “인접“이라는 단어는 ‘바로 다음’을 의미하며, 위의 예에서는 마우스오버 시 ‘.myDIV’가 있는 요소 바로 뒤에 배치되는 class=”.hide”가 있는 모든 요소를 선택한다.