[Github 블로그 리모델링] 5. 헤더 수정

1. 헤더 꾸미기

저번 포스트에서 아래와 같이 코드를 작성했었다.

<header class="site-header">
  <div class="header-wrapper"><nav class="site-nav">
        <span id="menu">
          <!-- 코드 생략 -->
        </span>

        <ul class="page-trigger">
          <li><a class="page-link" href="/">Home</a></li>
          <li><a class="page-link" href="/project">Project</a></li>
          <li><a class="page-link" href="/fixbug">Fixbug</a></li>
          <li><a class="page-link" href="/note">Note</a></li>
          <li><a class="page-link" href="/profile">Profile</a></li>
        </ul>
      </nav></div>
</header>

먼저, 전체 화면 내 header의 기본적인 구조를 변경하고자, site-header 태그에 대한 css를 아래와 같이 꾸며주었다.

.site-header {
  border-top: 0px solid $border-color-03;

  // 주요 수정 부분 1
  border-bottom: 1.8px solid #3C629F;  
  min-height: $spacing-unit * 1.865;
  line-height: $base-line-height * $base-font-size * 2.25;
  
  // 주요 수정 부분 2
  position: sticky;
  top: -54px;
  padding-top: 14px;

  // 주요 수정 부분 3
  background-color: #181818;
  backdrop-filter: none;
  z-index: 1;
}

먼저 주요 수정 부분 1에서, border-bottom의 색상 및 굵기를 설정해서, 다음 사진과 같이 헤더의 특정 색상이 보여지도록 했다.

Imgur

주요 수정 부분 2에서는, 사용자가 스크롤을 내려도 헤더가 고정되게끔 position: sticky;로 주었지만, 헤더 내 페이지의 링크는 보이지 않게 하기 위하여 top 및 padding-top의 값을 따로 설정해두었다.

주요 수정 부분 3에서는 backdrop-filter: none;으로 주어 헤더에 별다른 이펙트가 나타나지 않도록 하였고, z-index 1로 주어 헤더가 항상 위에 보이게 하였다.

중간 결과 화면

Imgur

이후, 각각의 페이지 링크가 중앙에 정렬되도록 하기 위해, 다음과 같이 css 코드를 작성하였다. 위에서 작성한 html코드를 캡처한 뒤, 매치해가며 보자.

  .page-trigger {
    display: inline-flex;
    width: 97%; // nav bar 업데이트: nav bar 폭 조정
    flex: auto;
    align-items: baseline;
    justify-content: space-evenly;
  }

  .page-link {
    cursor: pointer;
    color: $text-color;
    line-height: $base-line-height;
    display: inline;
    text-decoration: none; // nav bar 업데이트: 마우스 갖다댈시 밑줄 생성 제거
    padding: 5px 10px;
    font-family: $base-font-family;
    font-weight: bold;
    font-size: 25px;
    &:is(:first-child){ // nav bar 업데이트: (nav 바 요소 별 위치 설정)
      margin-left: 15%;
    }
    &:is(:last-child){ // nav bar 업데이트: (nav 바 요소 별 위치 설정)
      margin-right: 8%;
    }
    
    margin-left:auto; // nav bar 업데이트: auto 값 주어 화면을 축소해도 알아서 요소간 간격이 조정되게 함
    margin-right:auto; // 위와 동일
  }

세세한 수정 사항은 주석을 달아놓았다.
중요한 것은, 위의 중간 결과 화면에서 페이지의 링크 텍스트가 너무 오른쪽으로 치우쳐 있었기 때문에, 이를 중앙정렬 시키기 위해 page-trgger 태그 내 display, align-items, justify-content를 각각 inline-flex, baseline, space-evenly로 설정하였다는 것이다.

다음과 같이 전체 화면에서 텍스트 링크가 잘 중앙 정렬 된 것을 볼 수 있다.

본인이 웹개발자가 아니라서 이 부분을 엄청 헤맸고, 그래서 다른 개발자 친구에게 물어가보면서 해답을 구했다.

Imgur

또한, 이 태그들의 부모태그인 site-nav는 margin-left를 24% 주어서, 홈페이지 내 이미지 때문에 헤더가 가려지는 일이 없게 했다.

.site-nav {
  position: absolute;
  top: 9px; 
  right: $spacing-unit * .5;
  background-color: $background-color;
  border: 1px solid $border-color-01;
  border-radius: 5px;
  margin-left: 24%; // nav bar 업데이트 : 고정값 주어 navigation 바 일관성 있는 마진 줌
  margin-right: 10px; // nav bar 업데이트 : 고정값 주어 navigation 바 일관성 있는 마진 줌
}

하지만 화면의 크기가 더 작아질 때에는 페이지의 모든 링크를 헤더에 표기할 수 없기 때문에, 헤더의 구조를 완전히 바꾸었고, css 코드는 아래와 같다.

@media (max-width: 1200px){ 
  .site-header {
    z-index: 4;
    border-top: 0px solid $border-color-03;
    border-bottom: none;
    min-height: $spacing-unit * 1.5;
    line-height: $base-line-height * $base-font-size * 2.25;
    // Positioning context for the mobile navigation icon
    position: sticky;
    top: 0px;
    padding-top: 3px;
    background-color: #2E2E2E;
  }
  .page-trigger{
    display: none;
  }
  .page-link{
    display: none;
  }
}


@media (max-width: 600px){ 
  .site-header {
    z-index: 4;
    border-top: 0px solid $border-color-03;
    border-bottom: none;
    min-height: $spacing-unit * 1.5;
    line-height: $base-line-height * $base-font-size * 2.25;
    // Positioning context for the mobile navigation icon
    position: sticky;
    top: 0px;
    padding-top: 3px;
    background-color: #2E2E2E;
  }
  .page-trigger{
    display: none;
  }
  .page-link{
    display: none;
  }
}

크게 변경된 것은 없고, 그저 화면 크기 (1200px, 600px)에 따라 헤더의 높이가 달라진다는 것 (min-height, line-height), 그리고 background-color의 값을 회색으로 주어 가독성을 높였다는 것이 변경되었을 뿐이다.

또한 특정 화면 크기 이하에서는 페이지 링크 텍스트 (page-trigger, page-link)가 표기되지 않도록 하였다.

2. 휴대폰 화면에서의 메뉴 구성

위 단락에서 설명했듯이, 휴대폰 화면에서는 헤더 내에 모든 페이지 링크 텍스트를 한번에 담아둘 수 없기 때문에, menu icon을 따로 설정해두어서, 사용자가 이 menu icon을 클릭했을 때, 여러 페이지 링크를 담은 또 다른 창이 나타나도록 하였다.

첫번째로, 메뉴 아이콘을 header.html 내 다음과 같이 삽입하였다.

<header class="site-header">
  <div class="header-wrapper"><nav class="site-nav">
        <span id="menu">
          <svg viewBox="0 0 18 15" width="17px" height="17px">
            <path d="M18,1.484c0,0.82-0.665,1.484-1.484,1.484H1.484C0.665,2.969,0,2.304,0,1.484l0,0C0,0.665,0.665,0,1.484,0 h15.032C17.335,0,18,0.665,18,1.484L18,1.484z M18,7.516C18,8.335,17.335,9,16.516,9H1.484C0.665,9,0,8.335,0,7.516l0,0 c0-0.82,0.665-1.484,1.484-1.484h15.032C17.335,6.031,18,6.696,18,7.516L18,7.516z M18,13.516C18,14.335,17.335,15,16.516,15H1.484 C0.665,15,0,14.335,0,13.516l0,0c0-0.82,0.665-1.483,1.484-1.483h15.032C17.335,12.031,18,12.695,18,13.516L18,13.516z"/>
          </svg>
        </span>

        <ul class="page-trigger">
            <!--코드 생략-->
        </ul>
      </nav></div>
</header>

해당 메뉴아이콘은 휴대폰 화면일 때, 혹은 데스크탑의 축소화면일 때에만 나타나야 하기 때문에, css 코드를 다음과 같이 구성하였다.

#menu { // 폰 날개 업데이트 : 폰 메뉴 로고
cursor: pointer;
display: block;
font-size: 3px;
height: 40px;
margin-top: 3px;

-webkit-tap-highlight-color: transparent;
> svg path{
    fill: $border-color-03;
}
position: fixed;
text-align: center;
}