<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Responsive Navigation Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
<link href="https://fonts.googleapis.com/css?family=Titillium+Web&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<nav>
<input type="checkbox" id="check">
<label for="check" class="checkBtn"><i class="fas fa-bars"></i></label>
<h1 class="logo">DesignX</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">services</a></li>
<li><a href="#">contact</a></li>
<li><a href="#">feedback</a></li>
</ul>
</nav>
</body>
</html>
-----------------reset.css
@charset "utf-8";
/*reset.css*/
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');
*{ margin:0; padding:0; box-sizing:border-box; }
body {
font-family: 'Titillium Web', sans-serif; font-size:15px; color:#333;
background: url(../imgs/bg.jpg) no-repeat center;
background-attachment: fixed;
background-size: cover;
}
h1, h2, h3, h4, h5, h6 { font-family: 'Merriweather', serif; }
ul li { list-style:none; float:left; }
a { display:block; text-decoration:none; }
img { width:100%; }
.clear { clear:both; }
--------------------style.css
@charset "utf-8";
@import url('reset.css');
/*모든 디바이스에 적용할 스타일 시트*/
nav { height: 80px; padding:0 50px; background:#263;}
nav .logo {
display: inline-block;
font-size: 34px; color: #fff; line-height: 80px;
}
nav ul { float: right; margin-top: 25px;}
nav ul li a {
padding:5px 20px;
color: #fff; text-transform: uppercase; border-radius:5px;
transition: background 0.4s ease-in;
}
nav ul li a:hover { background:#797; border-radius:5px;}
.checkBtn {
display:none; float:right;
font-size:32px; color:#fff; line-height:80px;
cursor: pointer;
}
#check {display: none;}
@media screen and (max-width:1920px) { /*desktop*/
nav .logo {font-size: 30px;}
}
@media screen and (max-width:800px) { /*mobile*/
.checkBtn { display:block; }
nav ul {
position:fixed; left: -100%; top:55px;
width: 100%; height: 100vh;
text-align: center;
background:rgba(0,0,0,0.7);
transition: all 0.4s ease-in;
}
nav ul li { float: none; padding: 35px 0; }
nav ul li:first-child {margin-top: 45px;}
nav ul li a { font-size: 20px; }
a:hover { color:#053; background:none; }
#check:checked ~ ul { left:0; }
}
-----------------------html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="stylesheet" href="css/mediaSpace.css">
</head>
<body>
<header>
<h1>logo</h1>
<nav>
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
</ul>
</nav>
</header>
</body>
</html>
--------mediaSpace.css
@charset "utf-8";
@import url(reset.css);
header { height:60px; background:#028; }
header h1, a { color:#f4f4f4 }
header h1 { float:left; line-height:60px; }
header nav { float:right; }
header a { text-transform:uppercase; }
header a:hover { color:#06f; background:#fc0; border-radius: 5px; }
/*Laptop(1440px), Notebook(1920px), Desktop(FHD:1920px, 4K:2084px, 8K:4096px)*/
@media screen and (min-width:1400px) {
header { padding:0 50px; }
header nav { margin-top:15px; }
header a { padding:5px 25px; }
}
/*iPad Pro(1024px), HD(1024px), Desktop(1280px), Notebook(1366px)*/
@media screen and (min-width:1000px) and (max-width:1399px) {
header { padding:0 30px; }
header nav { margin-top:15px; }
header a { padding:5px 25px; }
}
/*iPad(768px)*/
@media screen and (min-width:760px) and (max-width:999px) {
header { padding:0 20px; background:#36f; }
header h1 { line-height:60px; }
header nav { margin-top:15px; }
header a { padding:5px 25px; }
}
@media screen and (min-width:570px) and (max-width:759px) {
header { padding:0 20px; background:#36f; }
header h1 { line-height:60px; }
header nav { margin-top:15px; }
header a { padding:5px 25px; }
}
/*SmartPhone*/
@media screen and (max-width:569px) {
header { height:100vh;
background:url(../imgs/bg.jpg) no-repeat center;
background-attachment: fixed;
background-size: cover; }
header h1 {
position:absolute; left:50%; top:100px;
font-size: 54px; color:rgba(255,255,255,0.7);
transform:translateX(-50%); z-index: 9;
}
header nav {
position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6);
}
header ul {width: 250px; margin:250px auto 0;}
header a {
width:250px; margin:15px 0; padding:10px 0px; text-align:center; background:rgba(0,0,0,0.3); border-radius: 5px;
}
}
'Coding' 카테고리의 다른 글
| CSS 선수학습(12) (0) | 2021.07.27 |
|---|---|
| CSS 선수학습(11) (0) | 2021.07.26 |
| CSS 선수학습(10) (0) | 2021.07.21 |
| CSS 선수학습(9) (0) | 2021.07.21 |
| CSS 복습/실습 (0) | 2021.07.20 |