w3.css 측면 탐색 버튼 CSS를 사용하여 호버링 가능한 측면 탐색 버튼을 만드는 방법을 알아보자. 호버링 가능한 Sidenav를 만드는 방법 1단계) HTML 추가 <div id=”mySidenav” class=”sidenav”> <a href=”#” id=”about”>About</a> <a href=”#” id=”blog”>Blog</a> <a href=”#” id=”projects”>Projects</a> <a href=”#” id=”contact”>Contact</a> </div> 2단계) CSS 추가 /* Style the links inside the sidenav */ #mySidenav a { position: absolute; /* Position them relative to the browser window */ left: -80px; /* Position them outside of the screen */ transition: 0.3s; /* Add transition on hover…

w3.css 캔버스 외부 메뉴 캔버스 외부 메뉴를 만드는 방법을 알아보자. 캔버스 외부 메뉴 만들기 1단계) HTML 추가 <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>×</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <!– Use any element to open the sidenav –> <span onclick=”openNav()”>open</span> <!– Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page…

w3.css 전체 화면 오버레이 탐색 전체 화면 오버레이 탐색 메뉴를 만드는 방법을 알아보자. 전체 화면 오버레이 탐색 만들기 1단계) HTML 추가 <!– The overlay –> <div id=”myNav” class=”overlay”> <!– Button to close the overlay navigation –> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>×</a> <!– Overlay content –> <div class=”overlay-content”> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> </div> <!– Use any element to open/show the overlay navigation menu –> <span onclick=”openNav()”>open</span> 2단계) CSS 추가 /* The Overlay (background) */ .overlay { /*…

w3.css 반응형 사이드바 CSS를 사용하여 반응형 측면 탐색 메뉴를 만드는 방법을 알아보자. 반응형 사이드바 만들기 1단계) HTML 추가 <!– The sidebar –> <div class=”sidebar”> <a class=”active” href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> <!– Page content –> <div class=”content”> .. </div> 2단계) CSS 추가 /* The side navigation menu */ .sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; } /* Sidebar links */ .sidebar a { display: block; color: black; padding:…

w3.css 측면 탐색 애니메이션이 적용되고 닫을 수 있는 측면 탐색 메뉴를 만드는 방법을 알아보자. 애니메이션 측면 탐색 만들기 1단계) HTML 추가 <div id=”mySidenav” class=”sidenav”> <a href=”javascript:void(0)” class=”closebtn” onclick=”closeNav()”>×</a> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <!– Use any element to open the sidenav –> <span onclick=”openNav()”>open</span> <!– Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on…

w3.css 고정 사이드바 CSS를 사용하여 고정 측면 탐색 메뉴를 만드는 방법을 알아보자. 고정 사이드바 생성 1단계) HTML 추가 <!– Side navigation –> <div class=”sidenav”> <a href=”#”>About</a> <a href=”#”>Services</a> <a href=”#”>Clients</a> <a href=”#”>Contact</a> </div> <!– Page content –> <div class=”main”> … </div> 2단계) CSS 추가 /* The sidebar menu */ .sidenav { height: 100%; /* Full-height: remove this if you want “auto” height */ width: 160px; /* Set the width of the sidebar */ position: fixed; /* Fixed Sidebar (stay in…

w3.css 검색 창 반응형 탐색 메뉴 내에 검색창을 추가하는 방법을 알아보자. 검색창 만들기 1단계) HTML 추가 <div class=”topnav”> <a class=”active” href=”#home”>Home</a> <a href=”#about”>About</a> <a href=”#contact”>Contact</a> <input type=”text” placeholder=”Search..”> </div> 2단계) CSS를 추가 /* Add a black background color to the top navigation bar */ .topnav { overflow: hidden; background-color: #e9e9e9; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: black; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /*…

w3.css 검색/필터 메뉴 JavaScript로 링크를 필터링하기 위해 검색 메뉴를 만드는 방법을 알아보자. 검색 메뉴 만들기 1단계) HTML 추가 <input type=”text” id=”mySearch” onkeyup=”myFunction()” placeholder=”Search..” title=”Type in a category”> <ul id=”myMenu”> <li><a href=”#”>HTML</a></li> <li><a href=”#”>CSS</a></li> <li><a href=”#”>JavaScript</a></li> <li><a href=”#”>PHP</a></li> <li><a href=”#”>Python</a></li> <li><a href=”#”>jQuery</a></li> <li><a href=”#”>SQL</a></li> <li><a href=”#”>Bootstrap</a></li> <li><a href=”#”>Node.js</a></li> </ul>   ⭐ 이 데모에서는 링크할 페이지가 없기 때문에 href=”#”를 사용한다. 실제로 이는 특정 페이지에 대한 실제 URL이어야 한다. 2단계) CSS 추가 검색창과 탐색 메뉴의 스타일을 지정한다. /* Style the search box */…

w3.css 아이콘이 있는 탐색 모음 CSS를 사용하여 아이콘이 포함된 반응형 탐색 메뉴를 만드는 방법을 알아보자. 아이콘이 포함된 반응형 Navbar 만들기 1단계) HTML 추가 <!– Load an icon library –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <div class=”navbar”> <a class=”active” href=”#”><i class=”fa fa-fw fa-home”></i> Home</a> <a href=”#”><i class=”fa fa-fw fa-search”></i> Search</a> <a href=”#”><i class=”fa fa-fw fa-envelope”></i> Contact</a> <a href=”#”><i class=”fa fa-fw fa-user”></i> Login</a> </div> 2단계) CSS 추가 /* Style the navigation bar */ .navbar { width: 100%; background-color: #555; overflow: auto; } /* Navbar…

w3.css 분할 탐색 CSS를 사용하여 “분할 탐색” 표시줄을 만드는 방법을 알아보자. 분할 탐색 ​​모음 만들기 1단계) HTML 추가 <div class=”topnav”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about” class=”split”>Help</a> </div> 2단계) CSS 추가 /* Create a top navigation bar with a black background color */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } /* Change…