w3.css 다운로드 링크 HTML로 다운로드 링크를 만드는 방법을 알아보자. 다운로드 링크 HTML download속성을 사용하면 사용자가 하이퍼링크를 클릭하면 대상이 다운로드되도록 지정할 수 있다. HTML 추가 <a href=”/images/myw3schoolsimage.jpg” download> <img src=”/images/myw3schoolsimage.jpg” alt=”W3Schools”> </a>   Download 속성은 href 속성이 설정된 경우에만 사용된다. 속성 값은 다운로드한 파일의 이름이 된다. 허용되는 값에는 제한이 없으며 브라우저에서 올바른 파일 확장자를 자동으로 감지하여 파일에 추가한다(.img, .pdf, .txt, .html 등). 다운로드한 파일의 새 파일명이 될 다운로드 속성의 값을 지정할 수도 있다. 값을 생략하면 원래 파일 이름이 사용된다. HTML 추가…

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