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

w3.css 중앙 상단 탐색 중앙에 링크/로고가 있는 탐색 모음을 만드는 방법을 알아보자. 상단 탐색 모음 만들기 1단계) HTML 추가 <!– Top navigation –> <div class=”topnav”> <!– Centered link –> <div class=”topnav-centered”> <a href=”#home” class=”active”>Home</a> </div> <!– Left-aligned links (default) –> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <!– Right-aligned links –> <div class=”topnav-right”> <a href=”#search”>Search</a> <a href=”#about”>About</a> </div> </div> 2단계) CSS 추가 /* Add a black background color to the top navigation */ .topnav { position: relative; background-color: #333; overflow: hidden; } /*…

w3.css 오른쪽 정렬 메뉴 버튼 왼쪽 정렬 및 오른쪽 정렬 링크가 있는 탐색 모음을 만드는 방법을 알아보자. 상단 탐색 표시줄 만들기 1단계) HTML 추가 <div class=”topnav”> <a class=”active” href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <div class=”topnav-right”> <a href=”#search”>Search</a> <a href=”#about”>About</a> </div> </div> 2단계) CSS 추가 /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; color: #f2f2f2; text-align: center;…

w3.css 하단 테두리 탐색 링크 CSS를 사용하여 아래쪽 테두리(밑줄) 탐색 링크를 만드는 방법을 알아보자. 탐색 메뉴 만들기 1단계) HTML 추가 <div class=”topnav”> <a href=”#home” class=”active”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> 2단계) CSS를 추가 /* Add a black background color to the top navigation */ .topnav { background-color: #333; overflow: hidden; } /* Style the links inside the navigation bar */ .topnav a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; border-bottom: 3px…

w3.css 반응형 하단 탐색 CSS와 JavaScript를 사용하여 반응형 하단 탐색 메뉴를 만드는 방법을 알아보자. 반응형 하단 Navbar 만들기 1단계) HTML 추가 <div class=”navbar” id=”myNavbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> <a href=”javascript:void(0);” class=”icon” onclick=”myFunction()”>☰</a> </div>   class=”icon”인 링크는 작은 화면에서 탐색 표시줄을 열고 닫는 데 사용된다. 2단계) CSS 추가 /* Place the navbar at the bottom of the page, and make it stick */ .navbar { background-color: #333; overflow: hidden; position: fixed; bottom: 0; width: 100%; } /*…

w3.css 하단 탐색 CSS를 사용하여 하단 탐색 메뉴를 만드는 방법을 알아보자. 하단 탐색 메뉴 만들기 1단계) HTML 추가 <div class=”navbar”> <a href=”#home” class=”active”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> </div> 2단계) CSS 추가 /* Place the navbar at the bottom of the page, and make it stick */ .navbar { background-color: #333; overflow: hidden; position: fixed; bottom: 0; width: 100%; } /* Style the links inside the navigation bar */ .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding:…

w3.css 수직 메뉴 CSS를 사용하여 세로 메뉴를 만드는 방법을 알아보자. 수직 버튼 그룹을 만드는 방법 1단계) HTML 추가 <div class=”vertical-menu”> <a href=”#” class=”active”>Home</a> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> <a href=”#”>Link 4</a> </div> 2단계) CSS 추가 .vertical-menu { width: 200px; /* Set a width if you like */ } .vertical-menu a { background-color: #eee; /* Grey background color */ color: black; /* Black text color */ display: block; /* Make the links appear below each other */…

w3.css 가로 스크롤 메뉴 CSS를 사용하여 가로 스크롤 가능 메뉴를 만드는 방법을 알아보자. 가로 스크롤 가능 메뉴를 만드는 방법 1단계) HTML 추가 <div class=”scrollmenu”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> … </div> 2단계) CSS 추가 navbar를 스크롤 가능하게 만드는 비결은 overflow:auto 및 white-space:nowrap을 사용 하는 것 입니다. div.scrollmenu { background-color: #333; overflow: auto; white-space: nowrap; } div.scrollmenu a { display: inline-block; color: white; text-align: center; padding: 14px; text-decoration: none; } div.scrollmenu a:hover { background-color: #777; }