[SITE] 웹사이트 - 헤더 유형01

HeaderType01

웹페이지 실습을 위한 헤더 타입 유형을 실습해보겠습니다! 헤더 타입은 보통 가장 위에 위치하며 로고와 메뉴 로그인 버튼 등의 구성 요소를 가지고 있습니다!!
그럼 아래의 코드를 보며 함께 실습 해보겠습니다~😆

---

< figma : 디자인 하기 >

이번 유형은 헤더 유형이기 때문에 크기에 맞게 프레임을 조정하여 맞춰줍니다. 메뉴는 꼭 메인 영역에 위치하도록 합니다! 특히 글자 간 간격과 정렬을 잘 지켜줍시다!

아래의 피그마를 참고하여 HTML, CSS를 설정해봅시다. 😇

---

< HTML 소스 : 레아아웃 구조 파악하기 >

디자인한 웹 페이지 시안을 보며 페이지 구조를 파악한 후 웹 표준성과 접근성에 맞는시멘틱한 마크업을 해줍니다.

TIP !
• 큰 덩어리부터 차근차근 구조를 짜는 것이 중요합니다.
• 헤더유형에 주로 사용하는 nav는 보통 페이지에 1개 이상 사용하지 않습니다!

<section id="headerType01" class="header__wrap nexon">
    <div class="header__inner">
        <div class="header__logo">
            <a href="#">WEB<em>site</em></a>
        </div>
        <nav class="header__menu">
            <ul>
                <li><a href="#">헤더 영역</a></li>
                <li><a href="#">슬라이드 영역</a></li>
                <li><a href="#">배너 영역</a></li>
                <li><a href="#">컨텐츠 영역</a></li>
                <li><a href="#">푸터 영역</a></li>
            </ul>
        </nav>
        <div class="header__memder">
            <a href="#">로그인</a>
        </div>
    </div>
</section>

---

< CSS 소스 : 스타일 적용하기 >

구조 짜임의 순서대로 css 스타일을 적용시켜 봅시다. 이 때 디자인 시안을 참고하면서 html와 번갈아가며 큰 덩어리 부터 스타일을 적용시켜 나가는 것이 중요합니다.
속성에 대한 내용은 코드와 주석을 보면서 이해해봅시다!

TIP !
• 먼저 전체 초기화(Reset)와 폰트 디폴트 설정을 해주는 것이 좋습니다.
• 각 영역과 섹션에 반복적으로 들어가는 속성들은 공통 속성으로 따로 설정하는 것이 좋습니다.
• 컨테이너 설정을 통해 메인 화면 크기와 여백을 설정해준 뒤 메인 콘텐츠인 섹션에게 스타일을 적용시킵니다.
• inner영역에 position: fixed를 주어서 스크롤을 내려도 헤더(메뉴바)가 보이도록 합니다.

/* font */
@import url('https://webfontworld.github.io/NexonLv1Gothic/NexonLv1Gothic.css');

.nexon {
    font-family: 'NexonLv1Gothic';
    font-weight: 400;
}

/* reset */
* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
    color: #000;
}
img {
    width: 100%;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}
em, i, address {
    font-style: normal;
}

/* common : 공통 요소(재활용) */
.container {
    width: 1160px;
    padding: 0 20px;
    margin: 0 auto;
    min-width: 1160px;
}
.section {
    padding: 120px 0;
}
.section > h2 {
    font-size: 50px;
    line-height: 1;
    text-align: center;
    margin-bottom: 20px;
}
.section > p {
    font-size: 22px;
    font-weight: 300;
    color: #666;
    text-align: center;
    margin-bottom: 70px;
}

/* headerType */
.header__inner {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    position: fixed;/* 헤더타입이므로 위에 고정하여 스크롤을 내려도 보이도록 한다. */
    left: 0;
    top: 0;
    background-color: #fff;
}
.header__logo {
    width: 20%;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase; /* 모든 문자를 대문자로 변경한다. */
}
.header__logo em {
    font-size: 18px;
    font-weight: 400;
}
.header__menu {
    width: 60%;
    text-align: center;
}
.header__menu li {
    display: inline;
}
.header__menu li a {
    padding: 13px 30px;
    margin: 0 5px;
    transition: background-color 0.3s;
}
.header__menu li a:hover {
    background-color: #f1f1f1;
    border-radius: 5px;
}

/* header__member */
.header__member {
    width: 20%;
    text-align: right;
}
.header__member a {
    font-size: 16px;
    border: 1px solid #000;
    padding: 10px 30px;
    border-radius: 50px;
    transition: all 0.3s;
}
.header__member a:hover {
    background-color: #000;
    color: #fff;
}

---

🎉 결과보기 🎉

원본 소스 보기

원본 페이지 보기