w3.css 도구 설명 CSS로 툴팁을 만드는 방법을 알아보자. 툴팁을 만드는 방법 1단계) HTML 추가 <div class=”tooltip”>Hover over me <span class=”tooltiptext”>Tooltip text</span> </div> 2단계) CSS 추가 /* Tooltip container */ .tooltip { position: relative; display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ } /* Tooltip text */ .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: #555; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; /* Position the tooltip text */ position: absolute;…

w3.css 이메일 필드 HTML로 이메일 필드를 만드는 방법을 알아보자. 이메일 필드 1단계) HTML 추가 input type=”email”속성을 사용하여 이메일 필드를 만들 수 있다. <label for=”email”>Enter your email:</label> <input type=”email” id=”email” name=”email”> input type=”email”이메일 주소에 대한 필드를 정의한다. 입력된 값은 올바르게 형식화된 이메일 주소인지 확인하기 위해 자동으로 검증된다.

w3.css 색상 선택기 HTML에서 색상 선택기를 만드는 방법을 알아보자. 색상 선택기 1단계) HTML 추가 input type=”color”속성을 사용하여 색상 선택기를 만들 수 있다. <label for=”favcolor”>Select your favorite color:</label> <input type=”color” id=”favcolor” value=”#ff0000″> value 속성 내부에 16진수 값을 사용해야 한다. 아무것도 사용하지 않으면 기본값은 검정색(#000000)이다. HTML 색상 튜토리얼 에서 16진수 값에 대해 자세히 알아볼 수 있다.

w3.css 범위 슬라이더 CSS와 JavaScript를 사용하여 사용자 정의 범위 슬라이더를 만드는 방법을 알아보자. 범위 슬라이더 생성 1단계) HTML 추가 <div class=”slidecontainer”> <input type=”range” min=”1″ max=”100″ value=”50″ class=”slider” id=”myRange”> </div> 2단계) CSS 추가 .slidecontainer { width: 100%; /* Width of the outside container */ } /* The slider itself */ .slider { -webkit-appearance: none; /* Override default CSS styles */ appearance: none; width: 100%; /* Full-width */ height: 25px; /* Specified height */ background: #d3d3d3; /* Grey background */ outline: none;…

w3.css CSS 스킬 바 CSS를 사용하여 스킬바를 만드는 방법을 알아보자. 스킬바를 만드는 방법 1단계) HTML 추가 <p>HTML</p> <div class=”container”> <div class=”skills html”>90%</div> </div> <p>CSS</p> <div class=”container”> <div class=”skills css”>80%</div> </div> <p>JavaScript</p> <div class=”container”> <div class=”skills js”>65%</div> </div> <p>PHP</p> <div class=”container”> <div class=”skills php”>60%</div> </div> 2단계) CSS 추가 /* Make sure that padding behaves as expected */ * {box-sizing:border-box} /* Container for skill bars */ .container { width: 100%; /* Full width */ background-color: #ddd; /* Grey background */ } .skills…

w3.css JavaScript 진행률 표시줄 JavaScript를 사용하여 진행률 표시줄을 만드는 방법을 알아보자. 진행률 표시줄 만들기 1단계) HTML 추가 <div id=”myProgress”> <div id=”myBar”></div> </div> 2단계) CSS 추가 #myProgress { width: 100%; background-color: grey; } #myBar { width: 1%; height: 30px; background-color: green; } 3단계) ​​JavaScript 추가 JavaScript를 사용하여 동적 진행률 표시줄(애니메이션) 만들기 var i = 0; function move() { if (i == 0) { i = 1; var elem = document.getElementById(“myBar”); var width = 1; var id = setInterval(frame, 10); function frame()…

w3.css 스크롤 표시기 CSS와 JavaScript를 사용하여 스크롤 표시기를 만드는 방법을 알아보자. 스크롤 표시기를 만드는 방법 1단계) HTML 추가 <div class=”header”> <h2>Scroll Indicator</h2> <div class=”progress-container”> <div class=”progress-bar” id=”myBar”></div> </div> </div> <div>content…</div> 2단계) CSS 추가 /* Style the header: fixed position (always stay at the top) */ .header { position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; } /* The progress container (grey background) */ .progress-container { width: 100%; height: 8px; background: #ccc; } /* The progress bar (scroll indicator)…

w3.css 타임라인 CSS를 사용하여 반응형 “타임라인”을 만드는 방법을 알아보자. 타임라인을 만드는 방법 1단계) HTML 추가 <div class=”timeline”> <div class=”container left”> <div class=”content”> <h2>2017</h2> <p>Lorem ipsum..</p> </div> </div> <div class=”container right”> <div class=”content”> <h2>2016</h2> <p>Lorem ipsum..</p> </div> </div> </div> 2단계) CSS 추가 * { box-sizing: border-box; } /* Set a background color */ body { background-color: #474e5d; font-family: Helvetica, sans-serif; } /* The actual timeline (the vertical ruler) */ .timeline { position: relative; max-width: 1200px; margin: 0 auto; } /* The…

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