w3.css 고정 소셜 바 CSS를 사용하여 고정/고정 소셜 미디어 아이콘 표시줄을 만드는 방법을 알아보자. 고정 소셜 바를 만드는 방법 1단계) HTML 추가 <!– Load font awesome icons –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– The social media icon bar –> <div class=”icon-bar”> <a href=”#” class=”facebook”><i class=”fa fa-facebook”></i></a> <a href=”#” class=”twitter”><i class=”fa fa-twitter”></i></a> <a href=”#” class=”google”><i class=”fa fa-google”></i></a> <a href=”#” class=”linkedin”><i class=”fa fa-linkedin”></i></a> <a href=”#” class=”youtube”><i class=”fa fa-youtube”></i></a> </div> 2단계) CSS 추가 /* Fixed/sticky icon bar (vertically aligned 50% from the top of…

w3.css 수직 버튼 그룹 CSS를 사용하여 수직 “버튼 그룹”을 만드는 방법을 알아보자. 수직 버튼 그룹을 만드는 방법 1단계) HTML 추가 <div class=”btn-group”> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div> 2단계) CSS 추가 .btn-group button { background-color: #04AA6D; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 50%; /* Set a width if needed */ display: block; /* Make the buttons…

w3.css 버튼 그룹 CSS를 사용하여 “버튼 그룹”을 만드는 방법을 알아보자. 버튼 그룹을 만드는 방법 1단계) HTML 추가 <div class=”btn-group”> <button>Apple</button> <button>Samsung</button> <button>Sony</button> </div> 2단계) CSS 추가 .btn-group button { background-color: #04AA6D; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ float: left; /* Float the buttons side by side */ } .btn-group button:not(:last-child) { border-right: none; /* Prevent…

w3.css 탐색경로 CSS를 사용하여 탐색경로 탐색을 만드는 방법을 알아보자. 탐색경로 탐색을 만드는 방법 1단계) HTML 추가 <ul class=”breadcrumb”> <li><a href=”#”>Home</a></li> <li><a href=”#”>Pictures</a></li> <li><a href=”#”>Summer 15</a></li> <li>Italy</li> </ul> 2단계) CSS 추가 /* Style the list */ ul.breadcrumb { padding: 10px 16px; list-style: none; background-color: #eee; } /* Display list items side by side */ ul.breadcrumb li { display: inline; font-size: 18px; } /* Add a slash symbol (/) before/behind each list item */ ul.breadcrumb li+li:before { padding: 8px; color: black; content:…

w3.css 페이지 매김 CSS로 페이지 매김을 만드는 방법을 알아보자. 페이지 매김을 만드는 방법 1단계) HTML 추가 <div class=”pagination”> <a href=”#”>«</a> <a href=”#”>1</a> <a class=”active” href=”#”>2</a> <a href=”#”>3</a> <a href=”#”>4</a> <a href=”#”>5</a> <a href=”#”>6</a> <a href=”#”>»</a> </div> 2단계) CSS 추가 /* Pagination links */ .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; transition: background-color .3s; } /* Style the active/current link */ .pagination a.active { background-color: dodgerblue; color: white; } /* Add a grey background color on…

w3.css 측면 패널 축소 접을 수 있는 측면 패널 메뉴를 만드는 방법을 알아보자. 축소된 측면 패널 만들기 1단계) HTML 추가 <div id=”mySidepanel” class=”sidepanel”> <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> <button class=”openbtn” onclick=”openNav()”>☰ Toggle Sidepanel</button> <h2>Collapsed Sidepanel</h2> <p>Content…</p> 2단계) CSS 추가 /* The sidepanel menu */ .sidepanel { height: 250px; /* Specify a height */ width: 0; /* 0 width – change this with JavaScript */ position: fixed; /* Stay in place */ z-index:…

w3.css 사이드바 접기 접을 수 있는 사이드바 메뉴를 만드는 방법을 알아보자. 축소된 사이드바 생성 1단계) HTML 추가 <div id=”mySidebar” class=”sidebar”> <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> <div id=”main”> <button class=”openbtn” onclick=”openNav()”>☰ Open Sidebar</button> <h2>Collapsed Sidebar</h2> <p>Content…</p> </div> 2단계) CSS 추가 /* The sidebar menu */ .sidebar { height: 100%; /* 100% Full-height */ width: 0; /* 0 width – change this with JavaScript */ position: fixed; /* Stay in place */ z-index: 1;…

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 { /* Height & width depends on how…

w3.css 모바일 내비게이션 메뉴 CSS와 JavaScript를 사용하여 스마트폰/태블릿용 상단 탐색 메뉴를 만드는 방법을 알아보자. 모바일 내비게이션 메뉴 만들기 1단계) HTML 추가 <!– Load an icon library to show a hamburger menu (bars) on small screens –> <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”> <!– Top Navigation Menu –> <div class=”topnav”> <a href=”#home” class=”active”>Logo</a> <!– Navigation links (hidden by default) –> <div id=”myLinks”> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> <!– “Hamburger menu” / “Bar icon” to toggle the navigation links –> <a href=”javascript:void(0);” class=”icon”…

w3.css 메가 메뉴 메가 메뉴(탐색 모음의 전체 너비 드롭다운 메뉴)를 만드는 방법을 알아보자. 메가 메뉴 만들기 사용자가 탐색 모음 내부의 요소 위로 마우스를 이동할 때 나타나는 드롭다운 메뉴를 만다. 1단계) HTML 추가 <div class=”navbar”> <a href=”#home”>Home</a> <a href=”#news”>News</a> <div class=”dropdown”> <button class=”dropbtn”>Dropdown <i class=”fa fa-caret-down”></i> </button> <div class=”dropdown-content”> <div class=”header”> <h2>Mega Menu</h2> </div> <div class=”row”> <div class=”column”> <h3>Category 1</h3> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a href=”#”>Link 3</a> </div> <div class=”column”> <h3>Category 2</h3> <a href=”#”>Link 1</a> <a href=”#”>Link 2</a> <a…