👉 완성본 보기
<header class="header">
<h1>
<a class="header__homelink" href="#">
<img class="header__logo" src="./images/logo.svg" alt="홈으로">
</a>
</h1>
<input class="header__menu-btn" type="checkbox">
<nav class="header__nav">
<ul>
<li class="header__nav-item">
<a href="#about">얄코강좌는</a>
</li>
<li class="header__nav-item">
<a href="#html">HTML</a>
</li>
<li class="header__nav-item">
<a href="#css">CSS</a>
</li>
<li class="header__nav-item">
<a href="#curriculum">커리큘럼</a>
</li>
<li class="header__nav-item">
<a href="#contact">문의하기</a>
</li>
</ul>
</nav>
</header>
2-header.css
1. 헤더 배치
.header {
display: flex;
position: sticky;
/* 스크롤업되는 컨텐츠 위로 올라오도록 */
z-index: 2;
top: 0;
height: var(--height-toolbar);
justify-content: space-between;
align-items: center;
background-color: var(--color-main);
color: white;
}
2. 왼쪽 링크와 로고
.header__homelink {
display: inline-block;
padding: 0 24px;
height: var(--height-toolbar);
line-height: var(--height-toolbar);
cursor: pointer;
}
.header__logo {
height: 48px;
vertical-align: middle;
margin-bottom: 4px;
}
3. 네비게이션
.header__nav-item {
font-size: var(--font-size-larger);
}
모바일
.header__nav {
display: none;
}
데스크탑
.header__nav-item {
display: inline-block;
position: relative;
}
.header__nav-item:last-child {
margin-right: 1.6em;
}
4. 네비게이션 링크
.header__nav-item a {
/* 클릭 영역 확대 */
display: inline-block;
height: var(--height-toolbar);
line-height: var(--height-toolbar);
}
데스크탑
.header__nav-item a {
padding: 0 0.8em;
}
5. 네비게이션 롤오버 효과
데스크탑
.header__nav-item::after {
content: '';
position: absolute;
bottom: 0px;
left: 50%;
width: 0;
height: 0;
background-color: white;
transition: all 350ms;
}
.header__nav-item:hover::after {
left: 0;
width: 100%;
height: 8px;
}
6. 모바일 메뉴 버튼
모바일
/* 체크박스 인풋을 버튼으로 커스터마이즈 */
.header__menu-btn {
all: unset;
display: block;
width: var(--height-toolbar);
height: var(--height-toolbar);
background-image: url(../images/menu-button.svg);
background-size: 50%;
background-repeat: no-repeat;
background-position: center;
}
.header__menu-btn:checked {
background-color: var(--color-dark);
}
데스크탑
.header__menu-btn {
display: none;
}
7. 모바일 메뉴 팝업
모바일
.header__menu-btn:checked + .header__nav {
display: inherit;
position: absolute;
top: var(--height-toolbar);
right: 0;
background-color: var(--color-dark);
padding-bottom: 1em;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}
.header__nav-item {
width: 100vw;
text-align: center;
}
.header__nav-item a {
width: 100vw;
}
.header__nav-item:not(:last-child) {
border-bottom: 2px solid rgba(255, 255, 255, 0.06);
}