माथिल्लो हेडर
हरेक पृष्ठमा लोगो, मुख्य मेनु र खोज एकै ठाउँमा राख्नुपर्दा प्रयोग गर्ने टुक्रा।
प्रत्यक्ष पूर्वावलोकन
स्रोत
<header class="dc-hd">
<a class="dc-hd__logo" href="#">
<span class="dc-hd__mark" aria-hidden="true">P</span>
<span class="dc-hd__name">피피티셰어</span>
</a>
<nav class="dc-hd__nav" aria-label="주요 메뉴">
<a class="dc-hd__link" href="#" aria-current="page">템플릿</a>
<a class="dc-hd__link" href="#">디자인 조각</a>
<a class="dc-hd__link" href="#">요금</a>
</nav>
<form class="dc-hd__search" role="search" action="#">
<label class="dc-sr" for="dc-hd-q">템플릿 검색</label>
<input class="dc-hd__input" id="dc-hd-q" type="search" name="q" placeholder="템플릿 검색">
<button class="dc-hd__go" type="submit"><span aria-hidden="true">⌕</span><span class="dc-sr">검색</span></button>
</form>
<a class="dc-hd__cta" href="#">로그인</a>
</header>.dc-hd {
display: flex; align-items: center; gap: var(--dc-4);
padding: var(--dc-3) var(--dc-4);
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-hd__logo {
display: flex; align-items: center; gap: var(--dc-2);
flex: 0 0 auto; text-decoration: none; color: var(--dc-text);
}
.dc-hd__mark {
display: grid; place-items: center; width: 28px; height: 28px;
border-radius: var(--dc-r-sm);
background: var(--dc-brand); color: var(--dc-text-on);
font-size: 15px; font-weight: 800;
}
.dc-hd__name { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.dc-hd__nav { display: flex; align-items: center; gap: var(--dc-1); }
.dc-hd__link {
display: flex; align-items: center; height: 40px; padding: 0 var(--dc-3);
border-radius: var(--dc-r-sm);
color: var(--dc-text-sub); text-decoration: none;
font-size: 14px; font-weight: 600; white-space: nowrap;
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-hd__link:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-hd__link[aria-current="page"] { background: var(--dc-brand-soft); color: var(--dc-brand-text); }
.dc-hd__search { display: flex; align-items: center; gap: var(--dc-1); margin-left: auto; }
.dc-hd__input {
width: 220px; height: 40px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-full);
background: var(--dc-bg); color: var(--dc-text);
font-family: inherit; font-size: 14px;
transition: border-color var(--dc-fast), box-shadow var(--dc-fast);
}
.dc-hd__input::placeholder { color: var(--dc-text-mute); }
.dc-hd__input:focus {
outline: none; border-color: var(--dc-brand);
box-shadow: 0 0 0 3px var(--dc-brand-soft);
}
.dc-hd__go {
display: grid; place-items: center; width: 40px; height: 40px;
border: 0; border-radius: var(--dc-r-full);
background: var(--dc-sunken); color: var(--dc-text); font-size: 17px;
}
.dc-hd__go:hover { background: var(--dc-line); }
.dc-hd__cta {
display: flex; align-items: center; height: 40px; padding: 0 var(--dc-4);
border-radius: var(--dc-r-full);
background: var(--dc-brand); color: var(--dc-text-on);
text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap;
}
.dc-hd__cta:hover { background: var(--dc-brand-hi); }
.dc-hd--mobile { gap: var(--dc-2); padding-left: var(--dc-2); }
.dc-hd__menu { position: relative; flex: 0 0 auto; }
.dc-hd__menubtn {
display: grid; place-items: center; width: 44px; height: 44px;
border-radius: var(--dc-r-sm); color: var(--dc-text);
font-size: 18px; cursor: pointer; list-style: none;
}
.dc-hd__menubtn::-webkit-details-marker { display: none; }
.dc-hd__menubtn:hover { background: var(--dc-sunken); }
.dc-hd__drawer {
position: absolute; top: calc(100% + var(--dc-2)); left: 0; z-index: 2;
display: flex; flex-direction: column; gap: 2px; min-width: 200px;
padding: var(--dc-2);
background: var(--dc-surface);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
box-shadow: var(--dc-sh-2);
}
.dc-hd__icon {
display: grid; place-items: center; width: 44px; height: 44px;
margin-left: auto; border: 0; border-radius: var(--dc-r-full);
background: var(--dc-sunken); color: var(--dc-text); font-size: 17px;
}
.dc-hd__icon:hover { background: var(--dc-line); }
/* 열린 서랍은 absolute 라서 미리보기 높이 계산에 안 잡힌다. 잘리지 않게
자리만 비워 두는 껍데기다 — 실제 페이지에 옮길 때는 빼도 된다 */
.dc-hd-room { min-height: 250px; }
.dc-hd-stack { display: flex; flex-direction: column; }
.dc-hd__util {
display: flex; justify-content: flex-end; gap: var(--dc-4);
padding: var(--dc-1) var(--dc-4);
background: var(--dc-sunken);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-hd__utillink {
display: flex; align-items: center; min-height: 32px;
color: var(--dc-text-sub); text-decoration: none; font-size: 12px;
}
.dc-hd__utillink:hover { color: var(--dc-text); text-decoration: underline; }
@media (max-width: 860px) {
.dc-hd { gap: var(--dc-2); }
.dc-hd__input { width: 150px; }
}कसरी प्रयोग गर्ने
- मुख्य मेनु पाँच वस्तुभित्र राख्नुहोस्; बाँकी ड्रपडाउनमा हाल्नुहोस्
- अहिले हेरिरहेको पृष्ठमा aria-current="page" राख्नुहोस्
- खोज मुख्य हो भने बाकस खुला राख्नुहोस्, नत्र आइकनमा खुम्चाउनुहोस्
ध्यान दिनुपर्ने कुरा
- साँघुरो स्क्रिनमा मेनु लुकाउनुभन्दा साँघुरो रूपमा फेर्नुहोस्
- लोगो सधैँ गृहपृष्ठको लिंक बनाउनुहोस्