w3.css 계단식 드롭다운 목록 JavaScript로 계단식 드롭다운 목록을 만드는 방법을 알아보자. 세 개의 드롭다운 목록 만들기 HTML 양식 내에 3개의 드롭다운 목록을 만든다. 두 번째 및 세 번째 드롭다운 목록은 상위 드롭다운 목록에서 선택한 값에 따라 다른 옵션을 표시한다. 1단계) HTML 추가 <form name=”form1″ id=”form1″ action=”/action_page.php”> Subjects: <select name=”subject” id=”subject”> <option value=”” selected=”selected”>Select subject</option> </select> <br><br> Topics: <select name=”topic” id=”topic”> <option value=”” selected=”selected”>Please select subject first</option> </select> <br><br> Chapters: <select name=”chapter” id=”chapter”> <option value=”” selected=”selected”>Please select topic first</option> </select> <br><br>…

w3.css 클릭 가능한 드롭다운 CSS와 JavaScript를 사용하여 클릭 가능한 드롭다운 메뉴를 만드는 방법을 알아보자. 클릭 가능한 드롭다운 만들기 사용자가 버튼을 클릭하면 나타나는 드롭다운 메뉴를 만든다. 1단계) HTML 추가 <div class=”dropdown”> <button onclick=”myFunction()” class=”dropbtn”>Dropdown</button> <div id=”myDropdown” class=”dropdown-content”> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> </div>   드롭다운 메뉴를 열려면 <button>, <a> 또는 <p> 요소와 같은 요소를 사용하자. 컨테이너 요소(예: <div>)를 사용하여 드롭다운 메뉴를 만들고 그 안에 드롭다운 링크를 추가하자. CSS를 사용하여 드롭다운 메뉴의 위치를 ​​올바르게 지정하려면 버튼과 <div>…

w3.css 호버링 가능한 드롭다운 CSS를 사용하여 마우스 오버가 가능한 드롭다운 메뉴를 만드는 방법을 알아보자. 호버링 가능한 드롭다운 만들기 사용자가 요소 위로 마우스를 이동할 때 나타나는 드롭다운 메뉴를 만든다. 1단계) HTML 추가 <div class=”dropdown”> <button class=”dropbtn”>Dropdown</button> <div class=”dropdown-content”> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> </div>   드롭다운 메뉴를 열려면 <button>, <a> 또는 <p> 요소와 같은 요소를 사용하자. 컨테이너 요소(예: <div>)를 사용하여 드롭다운 메뉴를 만들고 그 안에 드롭다운 링크를 추가하자. CSS를 사용하여 드롭다운 메뉴의 위치를 ​​올바르게 지정하려면 버튼과…

w3.css 이미지의 Navbar CSS를 사용하여 이미지에 탐색 메뉴를 추가하는 방법을 알아보자. 이미지에 Navbar를 만드는 방법 1단계) HTML 추가 탐색 모음을 만든다. <div class=”bg-img”> <div class=”container”> <div class=”topnav”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> </div> </div> 2단계) CSS 추가 탐색 모음 스타일을 지정한다. .bg-img { /* The image used */ background-image: url(“img_nature.jpg”); min-height: 380px; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; /* Needed to position the navbar */ position: relative; }…

w3.css 고정/부착 Navbar CSS 및 JavaScript를 사용하여 “고정” 탐색 모음을 만드는 방법을 알아보자. 고정 Navbar를 만드는 방법 1단계) HTML 추가 탐색 모음을 만든다. <div id=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> 2단계) CSS 추가 탐색 모음 스타일을 지정한다. /* Style the navbar */ #navbar { overflow: hidden; background-color: #333; } /* Navbar links */ #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px; text-decoration: none; } /* Page content */ .content { padding: 16px; }…

w3.css 스크롤 시 탐색 메뉴 축소 CSS 및 JavaScript를 사용하여 스크롤 시 탐색 표시줄의 크기를 조정하는 방법을 알아보자. 스크롤 시 Navbar를 축소하는 방법 1단계) HTML 추가 탐색 모음을 만든다. <div id=”navbar”> <a href=”#default” id=”logo”>CompanyLogo</a> <div id=”navbar-right”> <a class=”active” href=”#home”>Home</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> </div> 2단계) CSS 추가 탐색 모음 스타일을 지정한다. /* Create a sticky/fixed navbar */ #navbar { overflow: hidden; background-color: #f1f1f1; padding: 90px 10px; /* Large padding which will shrink on scroll (using JS) */ transition: 0.4s;…

w3.css 스크롤 시 메뉴 숨기기 CSS 및 JavaScript를 사용하여 아래로 스크롤할 때 탐색 메뉴를 숨기는 방법을 알아보자. 아래로 스크롤할 때 Navbar를 숨기는 방법 1단계) HTML 추가 탐색 모음을 만든다. <div id=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> 2단계) CSS 추가 탐색 모음 스타일을 지정한다. #navbar { background-color: #333; /* Black background color */ position: fixed; /* Make it stick/fixed */ top: 0; /* Stay on top */ width: 100%; /* Full width */ transition: top 0.3s; /* Transition effect…

w3.css 스크롤 막대 아래로 슬라이드 CSS 및 JavaScript를 사용하여 스크롤 시 탐색 막대를 아래로 슬라이드하는 방법을 알아보자. 바를 아래로 슬라이드하는 방법 1단계) HTML 추가 탐색 모음을 만든다. <div id=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> 2단계) CSS 추가 탐색 모음 스타일을 지정한다. #navbar { background-color: #333; /* Black background color */ position: fixed; /* Make it stick/fixed */ top: -50px; /* Hide the navbar 50 px outside of the top view */ width: 100%; /* Full width */ transition:…

w3.css 고정 메뉴 CSS를 사용하여 “고정” 메뉴를 만드는 방법을 알아보자. 고정 상단 메뉴를 만드는 방법 1단계) HTML 추가 <div class=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> <div class=”main”> <p>Some text some text some text some text..</p> </div> 2단계) CSS 추가 고정 상단 메뉴를 생성하려면 position:fixed및 top:0를 사용하자. 고정 메뉴는 다른 콘텐츠와 겹쳐진다. 이 문제를 해결하려면 메뉴 높이보다 크거나 같은 margin-top(콘텐츠에)을 추가하자. /* The navigation bar */ .navbar { overflow: hidden; background-color: #333; position: fixed; /* Set the navbar to…

w3.css 동일한 너비 Navbar 링크 너비가 같은 탐색 링크가 있는 탐색 모음을 만드는 방법을 알아보자. 반응형 탐색 모음 만들기 1단계) HTML 추가 <!– The navigation menu –> <div class=”navbar”> <a class=”active” href=”#”>Home</a> <a href=”#”>Search</a> <a href=”#”>Contact</a> <a href=”#”>Login</a> </div> 2단계) CSS 추가 /* Style the navigation menu */ .navbar { width: 100%; background-color: #555; overflow: auto; } /* Navigation links */ .navbar a { float: left; padding: 12px; color: white; text-decoration: none; font-size: 17px; width: 25%; /* Four equal-width links….