w3.css 반응형 헤더 CSS를 사용하여 반응형 헤더를 만드는 방법을 알아보자. 반응형 헤더 만들기 1단계) HTML 추가 <div class=”header”> <a href=”#default” class=”logo”>CompanyLogo</a> <div class=”header-right”> <a class=”active” href=”#home”>Home</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> </div> 2단계) CSS 추가 /* Style the header with a grey background and some padding */ .header { overflow: hidden; background-color: #f1f1f1; padding: 20px 10px; } /* Style the header links */ .header a { float: left; color: black; text-align: center; padding: 12px; text-decoration: none; font-size: 18px; line-height: 25px;…

w3.css 알약 탐색 CSS를 사용하여 알약 탐색 메뉴를 만드는 방법을 알아보자. 알약 탐색 만들기 1단계) HTML 추가 <div class=”pill-nav”> <a class=”active” href=”#home”>Home</a> <a href=”#news”>News</a> <a href=”#contact”>Contact</a> <a href=”#about”>About</a> </div> 2단계) CSS 추가 /* Style the links inside the pill navigation menu */ .pill-nav a { display: inline-block; color: black; text-align: center; padding: 14px; text-decoration: none; font-size: 17px; border-radius: 5px; } /* Change the color of links on mouse-over */ .pill-nav a:hover { background-color: #ddd; color: black; } /* Add a…

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…