w3.css 툴팁 문장 위에 마우스를 가져가면 추가 설명을 보여주는 툴팁을 만들어보자. W3.CSS 도구 설명 클래스 W3.CSS는 다음과 같은 도구 설명 클래스를 제공한다. Class Defines w3-tooltip 툴팁 요소 w3-text 툴팁 텍스트 도구 설명 요소 및 도구 설명 텍스트 HTML 요소 위로 마우스를 가져가면 도구 설명에 텍스트(또는 기타 콘텐츠)가 표시된다. w3 -tooltip 클래스는 마우스로 가리킬 요소(도구 설명 컨테이너)를 정의한다. w3 -text 클래스는 도구 설명 텍스트를 정의한다. 런던은 영국의 수도이다. (인구 900만명) 예제 <p class=”w3-tooltip”>London <span class=”w3-text”>(<em>9 million inhabitants</em>)</span> is the capital of…

w3.css 모달 모달은 현재 페이지 상단에 표시되는 대화 상자/팝업 창이다. 오픈 모달 ×Modal Header Hello World! Modal FooterClose W3.CSS 모달 클래스 W3.CSS는 모달 창에 대해 다음 클래스를 제공한다. Class Defines w3-modal 모달 컨테이너 w3-modal-content 모달 콘텐츠 모달 만들기 w3 -modal 클래스는 모달에 대한 컨테이너를 정의한다. w3 -modal-content 클래스는 모달 콘텐츠를 정의한다. 모달 콘텐츠는 HTML 요소(div, 제목, 단락, 이미지 등)일 수 있다. 예제 <!– Trigger/Open the Modal –> <button onclick=”document.getElementById(‘id01’).style.display=’block'” class=”w3-button”>Open Modal</button> <!– The Modal –> <div id=”id01″ class=”w3-modal”> <div class=”w3-modal-content”>…

w3.css 슬라이드쇼 슬라이드쇼를 만드는 방법에 대해 알아보자. 수동 슬라이드쇼 W3.CSS를 사용하여 수동 슬라이드쇼를 표시하는 것은 매우 쉽다. 동일한 클래스 이름을 가진 많은 요소를 생성하자. <img class=”mySlides” src=”img_snowtops.jpg”> <img class=”mySlides” src=”img_lights.jpg”> <img class=”mySlides” src=”img_mountains.jpg”> <img class=”mySlides” src=”img_forest.jpg”> 이미지를 스크롤하는 두 개의 버튼 <button class=”w3-button w3-display-left” onclick=”plusDivs(-1)”>❮</button> <button class=”w3-button w3-display-right” onclick=”plusDivs(+1)”>❯</button> 그리고 이미지를 선택하려면 JavaScript를 추가한다. var slideIndex = 1; showDivs(slideIndex); function plusDivs(n) { showDivs(slideIndex += n); } function showDivs(n) { var i; var x = document.getElementsByClassName(“mySlides”); if (n > x.length) {slideIndex…

w3.css 진행률 표시줄 진행률 표시줄을 사용하여 사용자가 프로세스의 진행 정도를 표시할 수 있다. 20% 기본 진행 표시줄 진행 표시줄에는 일반 요소를 사용할 수 있다. CSS 너비 속성을 사용하여 진행률 표시줄의 높이와 너비를 설정할 수 있다. 예제 <div class=”w3-border”> <div class=”w3-grey” style=”height:24px;width:20%”></div> </div> 진행률 표시줄 너비 CSS 너비 속성을 사용하여 진행률 표시줄의 너비를 변경한다(0에서 100%까지). 예제 <div class=”w3-light-grey”> <div class=”w3-grey” style=”height:24px;width:50%”></div> </div> 진행률 표시줄 색상 진행률 표시줄의 색상을 변경하려면 w3-color 클래스를 사용한다. 예제 <div class=”w3-light-grey”> <div class=”w3-blue” style=”width:75%”></div> </div> 진행률 표시줄…

w3.css 페이지 매김 «123456»   페이지가 많은 웹사이트가 있다면 일종의 페이지 매김 기능을 사용하고 싶을 수도 있다. 기본 페이지 매김을 생성하려면 막대(w3-bar)에 있는 버튼(w3-button)을 사용한다. 예제 <div class=”w3-bar”> <a href=”#” class=”w3-button”>1</a> <a href=”#” class=”w3-button”>2</a> <a href=”#” class=”w3-button”>3</a> <a href=”#” class=”w3-button”>4</a> <a href=”#” class=”w3-button”>5</a> </div>   버튼 사이의 공간을 제거하려면 w3-bar-item 클래스를 추가한다. 예제 <div class=”w3-bar”> <a href=”#” class=”w3-bar-item w3-button”>1</a> <a href=”#” class=”w3-bar-item w3-button”>2</a> <a href=”#” class=”w3-bar-item w3-button”>3</a> <a href=”#” class=”w3-bar-item w3-button”>4</a> <a href=”#” class=”w3-bar-item w3-button”>5</a> </div> 페이지 매김 화살표 아이콘…

w3.css 탐색 탭 탭 탐색은 웹 사이트를 탐색하는 방법이다. 일반적으로 탭 탐색은 선택한 탭이 강조 표시된 상태로 함께 배열된 탐색 버튼(탭)을 사용한다. 이 예에서는 동일한 클래스 이름(예제에서는 “city”)을 가진 요소를 사용하고 display:none 과 display:block 사이의 스타일을 변경하여 다른 콘텐츠를 숨기고 표시한다. 예제 <div id=”London” class=”city”> <h2>London</h2> <p>London is the capital of England.</p> </div> <div id=”Paris” class=”city” style=”display:none”> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div id=”Tokyo” class=”city” style=”display:none”> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>   탭 콘텐츠를…

w3.css 사이드바 사이드바에는 다음과 같은 몇 가지 옵션이 있다. 항상 페이지 콘텐츠 왼쪽에 사이드바를 표시 접을 수 있는 ‘완전 자동’ 반응형 사이드바 사용 페이지 콘텐츠 왼쪽 부분에 사이드바 열기 모든 페이지 콘텐츠에 대한 사이드바 열기 탐색 창을 열 때 페이지 콘텐츠를 오른쪽으로 슬라이드 왼쪽 대신 오른쪽에 사이드바 표시 항상 사이드바 표시 사이드바는 항상 표시된다. 예제 <div class=”w3-sidebar w3-bar-block” style=”width:25%”> <a href=”#” class=”w3-bar-item w3-button”>Link 1</a> <a href=”#” class=”w3-bar-item w3-button”>Link 2</a> <a href=”#” class=”w3-bar-item w3-button”>Link 3</a> </div> <div style=”margin-left:25%”> … page content…

w3.css 내비게이션 수직: 홈 링크 2 링크 3 링크 4 링크 5 수평: 홈링크 1 드롭다운 Link 1Link 2Link 3 홈링크 1 드롭다운 Link 1Link 2Link 3 홈링크 1텍스트 W3.CSS 내비게이션 바 클래스 W3.CSS는 내비게이션 바에 대해 다음 클래스를 제공한다. Class Defines w3-bar HTML 요소의 수평 컨테이너 w3-bar-block HTML 요소의 수직 컨테이너 w3-bar-item 컨테이너 바 요소 w3-sidebar HTML 요소의 수직 사이드바 w3-mobile 모든 막대 요소를 모바일 우선 반응형으로 만든다. w3-dropdown-hover 호버링 가능한 드롭다운 요소 w3-dropdown-click 클릭 가능한 드롭다운 요소(호버 대신)…

w3.css 아코디언 아코디언은 HTML 콘텐츠를 표시하고 숨기는 데 사용된다. 아코디언 내용을 숨기려면 w3-hide 클래스를 사용하자. 모든 종류의 버튼을 사용하여 콘텐츠를 열고 닫는다. 예제 <button onclick=”myFunction(‘Demo1’)” class=”w3-button w3-block w3-left-align”> Open Section 1</button> <div id=”Demo1″ class=”w3-container w3-hide”> <p>Some text..</p> </div> <script> function myFunction(id) { var x = document.getElementById(id); if (x.className.indexOf(“w3-show”) == -1) { x.className += ” w3-show”; } else { x.className = x.className.replace(” w3-show”, “”); } } </script> 아코디언과 드롭다운 이 표는 아코디언과 드롭다운의 차이점을 보여준다. 아코디언 드롭다운 콘텐츠가 페이지 콘텐츠를 아래로…

w3.css 드롭다운 Hover Over Me! LINK 1LINK 2LINK 3 W3.CSS 드롭다운 클래스 W3.CSS는 다음과 같은 드롭다운 클래스를 제공한다. Class Defines w3-dropdown-hover 호버링 가능한 드롭다운 요소 w3-dropdown-content 표시할 드롭다운 부분 w3-dropdown-click 클릭 가능한 드롭다운 요소 드롭다운 요소 w3 -dropdown-hover 클래스는 hoverable 드롭다운 요소를 정의한다. w3 -dropdown-content 클래스는 표시할 드롭다운 콘텐츠를 정의한다. 예제 <div class=”w3-dropdown-hover”> <button class=”w3-button”>Hover Over Me!</button> <div class=”w3-dropdown-content w3-bar-block w3-border”> <a href=”#” class=”w3-bar-item w3-button”>Link 1</a> <a href=”#” class=”w3-bar-item w3-button”>Link 2</a> <a href=”#” class=”w3-bar-item w3-button”>Link 3</a> </div> </div>   hoverable…