17th
다양한 header nav 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.09. header01 - 가로배치</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/basic01.css">
<style>
.header {
background: #fff;
line-height: 100px;
}
.header .container {
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
}
.header nav>ul {
display: flex;
gap: 40px;
}
</style>
</head>
<body>
<div class="Wrap">
<header class="header">
<div class="container">
<h1>
<a href="/">
<img src="../img/logopage.png" alt="">
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="main_visual">
</div>
</main>
<footer class="footer">
© basic template.
</footer>
</div>
</body>
</html>👉 justify-content: space-between;을 사용해서 h1의 로고와 nav li들을 공간을 두고 양끝에 배치해본다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.09. header02 - 가로배치</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/basic01.css">
<style>
.header {
background: #fff;
line-height: 100px;
}
.header .container {
display: flex;
width: 1200px;
margin: 0 auto;
}
.header nav {
margin: 0 0 0 auto;
}
.header .btn {
margin: 0 0 0 40px;
}
.header .btn i {
font-size: 23px;
padding: 5px;
background: #ddd;
border-radius: 3px;
cursor: pointer;
/* transform: translateY(5px); */
/* margin이 안 먹어서 transform으로 함 */
vertical-align: middle;
}
.header nav>ul {
display: flex;
gap: 40px;
}
.header nav>ul a {
display: block;
}
</style>
</head>
<body>
<div class="Wrap">
<header class="header">
<div class="container">
<h1>
<a href="/">
<img src="../img/logopage.png" alt="">
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<div class="btn">
<i class="xi-bars"></i>
</div>
<!-- div로 감싸주는 이유가 line-height를 적용받게 하기 위해서
왜: i태그 자체에 line-height:1이 적용이 되어 있어 .heade에서 준 line-heightn가 상속되지 않는다. 그래서 div로 감싸주거나, css에서 i태그 자체에 line-height를 줘야함-->
</div>
</header>
<main>
<div class="main_visual">
</div>
</main>
<footer class="footer">
© basic template.
</footer>
</div>
</body>
</html>👉 메뉴 옆에 버튼을 배치해본다.
vertical-align: middle;로 nav의 li들과의 같은 선상에 있게 한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.09. header03 - 가로배치</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/basic01.css">
<style>
* {
outline: 1px solid #ff0;
}
.header {
background: #fff;
line-height: 100px;
}
.header .container {
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
}
.header h1 {
width: 200px;
}
.header .btn {
width: 200px;
text-align: right;
}
.header nav {}
.header .btn i {
font-size: 23px;
padding: 5px;
background: #ddd;
border-radius: 3px;
transform: translateY(5px);
cursor: pointer;
/* margin이 안 먹어서 transform으로 함 */
}
.header nav>ul {
display: flex;
gap: 40px;
}
.header nav>ul a {
display: block;
}
</style>
</head>
<body>
<div class="Wrap">
<header class="header">
<div class="container">
<h1>
<a href="/">
<img src="../img/logopage.png" alt="">
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<div class="btn">
<i class="xi-bars"></i>
</div>
</div>
</header>
<main>
<div class="main_visual">
</div>
</main>
<footer class="footer">
© basic template.
</footer>
</div>
</body>
</html>👉 nav 메뉴들을 가운데 배치(1)
justify-content: space-between;을 한 후, h1과 btn에 같은 넓이를 주고, btn을 text-align: right;했다=센터 맞춤
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.09. header04 - 가로배치</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/basic01.css">
<style>
* {
outline: 1px solid #ff0;
}
.header {
background: #fff;
line-height: 100px;
}
.header .container {
display: flex;
width: 1200px;
margin: 0 auto;
}
.header nav {
margin: 0 auto;
}
.header .btn i {
font-size: 23px;
padding: 5px;
background: #ddd;
border-radius: 3px;
transform: translateY(5px);
cursor: pointer;
/* margin이 안 먹어서 transform으로 함 */
}
.header nav>ul {
display: flex;
gap: 40px;
}
.header nav>ul a {
display: block;
/* vertical-align: middle;
dislpay:block을 대신에 line-height를 주고 vertical-align:center 하면, 높이 100에서 102정도로 변한다.
해결방법은 vertical-align을 안 주거나 height를 100을 줘서 고정시킨다. */
}
</style>
</head>
<body>
<div class="Wrap">
<header class="header">
<div class="container">
<h1>
<a href="/">
<img src="../img/logopage.png" alt="">
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
<div class="btn">
<i class="xi-bars"></i>
</div>
</div>
</header>
<main>
<div class="main_visual">
</div>
</main>
<footer class="footer">
© basic template.
</footer>
</div>
</body>
</html>👉 nav 메뉴들을 가운데 배치(2)
메뉴를 h2로고와 btn 가운데 배치=margin: 0 auto
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.09. header05 - 가로배치</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/basic01.css">
<style>
/* * {
outline: 1px solid #ff0;
} */
.header {
background: #fff;
line-height: 100px;
}
.header .container {
width: 1200px;
margin: 0 auto;
}
.header nav {
display: flex;
justify-content: space-between;
}
.header nav>* {
flex: 1;
}
.header h1 {
text-align: center;
}
.header .btn i {
font-size: 23px;
padding: 5px;
background: #ddd;
border-radius: 3px;
transform: translateY(5px);
cursor: pointer;
/* margin이 안 먹어서 transform으로 함 */
}
.header nav>ul {
display: flex;
gap: 40px;
}
.header nav>ul.service {
justify-content: flex-end;
}
.header nav>ul a {
display: block;
}
</style>
</head>
<body>
<div class="Wrap">
<header class="header">
<div class="container">
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
</ul>
<h1>
<a href="/">
<img src="../img/logopage.png" alt="">
</a>
</h1>
<ul class="service">
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
</ul>
</nav>
</div>
</header>
<main>
<div class="main_visual">
</div>
</main>
<footer class="footer">
© basic template.
</footer>
</div>
</body>
</html>👉 로고를 가운데 배치
메뉴를 양쪽에 두고, 로고를 가운데 배치한다.
justify-content: flex-end;
<!DOCTYPE html>
<html lang="lo">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2022.06.27_header 06 : 비주얼 위에 메뉴 겹쳐놓기</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/slick.css">
<style>
header {
position: absolute;
top: 0;
left: 0;
width: 100%;
line-height: 100px;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 17px;
z-index: 999;
/* main_slider의 positon 겹침으로 인해서 덮인 상태였음. 그래서 z-index를 줘서 위로 올라오게 함 */
}
header .container {
display: flex;
justify-content: space-between;
width: 1200px;
margin: 0 auto;
}
header nav>ul {
display: flex;
gap: 40px;
}
.main_slider {
position: relative;
height: 50vh;
background: url(../img/mainvisual01.jpg)no-repeat center center/cover;
/* margin: 0 0 50vh 0; */
}
.product {
padding: 100px 0;
}
.product .container {
width: 1230px;
/* 슬릭의 버튼 때문에 30px 더 주면 1200라인에 맞게 떨어짐
12000으로 하고 슬릭-센터모드 때려줌*/
margin: 0 auto;
}
.product_slider figure {
padding: 0 15px;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1>
<a href="/">
<img src="../img/grafflogo.png" alt="">
</a>
</h1>
<nav>
<ul>
<li><a href="">menu01</a></li>
<li><a href="">menu02</a></li>
<li><a href="">menu03</a></li>
<li><a href="">menu04</a></li>
<li><a href="">menu05</a></li>
<li><a href="">menu06</a></li>
</ul>
</nav>
</div>
</header>
<section class="main_visual">
<div class="main_slider">
</div>
</section>
<section class="product">
<div class="container">
<div class="product_slider">
<figure>
<img src="../img/lesedilarona01.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona02.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona03.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona04.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona05.jpg" alt="">
</figure>
<figure>
<img src="../img/lesedilarona06.jpg" alt="">
</figure>
</div>
</div>
</section>
<script src="../js/jquery-1.12.4.min.js"></script>
<script src="../js/slick.min.js"></script>
<script>
$(function () {
$('.product_slider').slick({
slidesToShow: 5,
// centerMode: true,
})
})
</script>
</body>
</html>👉 메인비주얼 위에 메뉴 겹쳐놓기
'수업내용' 카테고리의 다른 글
| [HTML, CSS, jQuery] slick 활용 (0) | 2022.07.31 |
|---|---|
| [HTML, CSS, jQuery] 다단메뉴와 반응형 + jQuery (0) | 2022.07.31 |
| [HTML, CSS] ::before와 ::after란 가상요소 선택자(pseudo element) (0) | 2022.07.31 |
| [HTML, CSS] position, hover, ::before&after (0) | 2022.07.31 |
| [html, css] 포지션 absolute, , relative, fixed, sticky와 응용 (0) | 2022.07.31 |