첫번째_7 헤더

7. 헤더

• Header는 sidebar로 접근할 수 있는 hamburger menu 버튼과 검색창으로 접근할 수 있는 search 버튼으로 간략하게 구성한다.
• 일반적으로 header에 존재하는 블로그 제목 및 메뉴(방명록, 태그, RSS 등)는 전부 sidebar 안에 위치할 예정이다.

 

HTML

---

<!-- header -->
<header id="header">
  <button type="button" class="menu-btn">
    <i class="icon-menu"></i>
    <i class="icon-cancel"></i>
  </button>

  <!-- sidebar -->
  <div class="sidebar">
    ...
  </div>

  <button type="button" class="search-btn">
    <i class="icon-search"></i>
  </button>

  <!-- search -->
  <div class="search">
    ...
  </div>

버튼의 icon은 fontello를 이용했다.

• 다운받은 fontello web font 파일 (font 폴더 안에 위치)을 모두 '파일업로드'란에 업로드 해주어야한다.
• 티스토리에서 업로드한 파일은 모두 같은 폴더 안에 위치하므로 fontello.css 의 web font 경로를 ../font/ 에서 ./ (현재폴더) 로 바꿔주어야 한다.

 

CSS

---

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  z-index: 999;
}

• Header 영역이 content-header 보다 아래 위치하므로 content-header에 가려지지 않게 header element의 z-index 설정한다.

  /* header */
.menu-btn {
  position: absolute;
  top: 15px;
  left: 20px;

  width: 40px;
  height: 40px;
}

.icon-menu:before {
  font-size: 20px;
  margin: 0;
  color: #403116;
}

.icon-cancel {
  display: none;
}

.icon-cancel:before {
  font-size: 20px;
  margin: 0;
}

.search-btn {
  position: absolute;
  top: 15px;
  right: 20px;

  width: 40px;
  height: 40px;
}

.icon-search:before {
  font-size: 20px;
  margin: 0;
  color: #403116;
}

• 각 icon의 가로-세로 비율이 동일하지 않으므로 icon의 width만 통일 시킨 후 (20px) icon을 감싸고 있는 충분한 크기의 (40px x 40px) container를 만들어 container의 위치를 설정해주었다.
• icon-cancel은 사이드바가 나타났을 때 표시되는 icon 이므로 우선 숨김처리 해주었다.

참고

---

• 아이콘폰트 :: Fontello 사용법 by it-ing