w3.css CSS 모양 CSS를 사용하여 다양한 모양을 만드는 방법을 알아보자. 정사각형 HTML 추가 <style> .square { height: 50px; width: 50px; background-color: #555; } </style> <div class=”square”></div> 원 HTML 추가 <style> .circle { height: 50px; width: 50px; background-color: #555; border-radius: 50%; } </style> <div class=”circle”></div> 타원형 HTML 추가 <style> .oval { height: 50px; width: 100px; background-color: #555; border-radius: 50%; } </style> <div class=”oval”></div> 사다리꼴 HTML 추가 <style> .trapezoid { border-bottom: 50px solid #555; border-left: 25px solid transparent; border-right: 25px solid transparent;…

w3.css CSS 화살표 CSS로 화살표를 만드는 방법을 알아보자. 화살표를 만드는 방법 1단계) HTML 추가 <p>Right arrow: <i class=”arrow right”></i></p> <p>Left arrow: <i class=”arrow left”></i></p> <p>Up arrow: <i class=”arrow up”></i></p> <p>Down arrow: <i class=”arrow down”></i></p> 2단계) CSS 추가 .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 3px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); }

w3.css 호버 시 전환 CSS를 사용하여 호버 시 전환 효과를 추가하는 방법을 알아보자. 호버 시 전환 마우스를 올리면 페이드 인 CSS 전환을 사용하면 지정된 기간 동안 속성 값을 원활하게(한 값에서 다른 값으로) 변경할 수 있다. 버튼에 호버 시 전환 효과(불투명도 및 배경색)를 추가한다. <style> .btn { background-color: #f4511e; border: none; color: white; padding: 16px 32px; text-align: center; font-size: 16px; margin: 4px 2px; opacity: 0.6; transition: 0.3s; } .btn:hover {opacity: 1} </style> <button class=”btn”>Hover Over Me</button> 마우스를 올리면 배경이 희미해짐 <style>…

w3.css 목록 중앙 정렬 CSS를 사용하여 목록을 가운데 정렬하는 방법을 알아보자. HTML 목록 가운데 정렬 1단계) HTML 추가 <div>와 같이 컨테이너 요소 안에 <ul> 요소를 래핑한다. <div class=”container”> <ul class=”myUL”> <li>Coffee</li> <li>Tea</li> <li>Coca Cola</li> </ul> </div> 2단계) CSS 추가 <div> 요소를 가운데 정렬하고 <ul>의 표시를 inline-block으로 변경한다. 선택 사항으로 목록 항목을 왼쪽으로 정렬하여 더욱 깔끔하게 볼 수 있다. div.container { text-align: center; } ul.myUL { display: inline-block; text-align: left; }

w3.css DIV에서 버튼 가운데 정렬 CSS를 사용하여 버튼 요소를 수직 및 수평으로 중앙에 배치하는 방법을 알아보자. 버튼을 수직으로 가운데 정렬하는 방법 HTML 추가 <style> .container { height: 200px; position: relative; border: 3px solid green; } .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } </style> <div class=”container”> <div class=”vertical-center”> <button>Centered Button</button> </div> </div> 수직 및 수평으로 가운데 정렬하는 방법 HTML 추가 <style> .container { height: 200px; position: relative; border: 3px solid green; } .center { margin:…

w3.css 요소를 가운데 정렬 CSS를 사용하여 요소를 수직 및 수평으로 중앙에 배치하는 방법을 알아보자. 수직으로 무엇이든 중앙에 배치하는 방법 1단계) HTML 추가 <style> .container { height: 200px; position: relative; border: 3px solid green; } .vertical-center { margin: 0; position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); } </style> <div class=”container”> <div class=”vertical-center”> <p>I am vertically centered.</p> </div> </div> 수직 및 수평으로 가운데 정렬하는 방법 예제 <style> .container { height: 200px; position: relative; border: 3px solid green; } .center { margin:…

w3.css 3D 플립 박스 CSS를 사용하여 플립박스를 만드는 방법을 알아보자. 플립박스를 만드는 방법 이 toFixed() 방법을 사용하면 소수점 두 자리만 표시하도록 숫자를 포맷할 수 있다. 결과는 반올림된다(5.56 대신 5.57 표시). 1단계) HTML 추가 <div class=”flip-box”> <div class=”flip-box-inner”> <div class=”flip-box-front”> <h2>Front Side</h2> </div> <div class=”flip-box-back”> <h2>Back Side</h2> </div> </div> </div> 2단계) CSS 추가 /* The flip box container – set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes…

w3.css 호버로 확대/축소하기 CSS를 사용하여 호버 시 요소를 확대/축소하는 방법을 알아보자. 호버로 확대하는 방법 이 toFixed() 방법을 사용하면 소수점 두 자리만 표시하도록 숫자를 포맷할 수 있다. 결과는 반올림된다(5.56 대신 5.57 표시). 1단계) HTML 추가 <style> .zoom { padding: 50px; background-color: green; transition: transform .2s; /* Animation */ width: 200px; height: 200px; margin: 0 auto; } .zoom:hover { transform: scale(1.5); /* (150% zoom – Note: if the zoom is too large, it will go outside of the viewport) */ } </style>…

w3.css 소수점 두 자리로 숫자 서식 지정 JavaScript에서 소수점 두 개를 사용하여 숫자를 포맷하는 방법을 알아보자. 두 개의 소수로 숫자 서식 지정 이 toFixed() 방법을 사용하면 소수점 두 자리만 표시하도록 숫자를 포맷할 수 있다. 결과는 반올림된다(5.56 대신 5.57 표시). 1단계) HTML 추가 let num = 5.56789; let n = num.toFixed(2); // 5.57   소수점 세 자리까지 표시하려면 숫자를 3으로 변경하기만 하면 됩니다.   let num = 5.56789; let n = num.toFixed(3); // 5.568

w3.css 다른 웹 페이지로 리디렉션 JavaScript를 사용하여 다른 웹 페이지로 리디렉션하는 방법을 알아보자. 웹 페이지 리디렉션 JavaScript를 사용하여 다른 웹페이지로 리디렉션하는 방법에는 몇 가지가 있다. 가장 많이 사용되는 방법은 location.href와 location.replace다. 1단계) HTML 추가 // Simulate a mouse click: window.location.href = “http://www.w3schools.com”; // Simulate an HTTP redirect: window.location.replace(“http://www.w3schools.com”);