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”가 있는 모든 요소를 선택한다.

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