웹 접근성을 준수하여 기업 웹사이트 제작하기 Part.4 (학습 73일차 TIL)

210929 오늘은 어제 완성한 main 페이지에 제이쿼리를 추가해서 동적인 효과를 구현하는 시간을 가졌다.

Must Remember

• header가 apsolute or fixed로 띄워져야 할 때 header 다음 형제요소에 margin이나 padding을 주는 것이 아니라 !!body에 padding-top을 준다.
• footer에 heading 요소를 넣지 않음.
• inline-block으로 나란히 정렬할 경우 알 수 없는 여백이 생기는데, 이를 해결하기 위한 방법을 숙지해 두자.(참고 https://shaka.tistory.com/57)
• 제이쿼리로 내비게이션 높이를 0에서 해당 엘리먼트의 크기만큼 늘려야 할 때 padding값은 계산이 되지 않으므로 잘 생각해서 마크업을 해야한다.

<!--.gnb_sub의 높이만큼 늘어나야 되지만 padding으로 레이아웃을 잡아서, 겉에 div로 한 번 감싸주고 margin을 주었다.-->
<ul class="gnb_list">
  <li><a href="#">기업정보</a>
    <div>
      <ul class="gnb_sub">
        <li><a href="#">기업소개</a>
          <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>
        </li>
    </div>
  </li>
</ul>

/* .gnb_sub를 감싸고 있는 div를 absolute로 위치를 잡아주고 */
.gnb_list > li > div {
  display: none;
  position: absolute;
  left: 0;
  width: 100%;
  line-height: 40px;
}
.gnb_list > li.on div {
  display: block;
}
/* gnb_sub */
.gnb_sub {
  margin: 40px 0;
}

$("#gnb > ul > li > a").bind("mouseover focus", function() {
    var ht = $(this).next().height();
    
    $('#gnb > ul > li').removeClass("on");
    $(this).parent().addClass("on");
    
    $(".header_wrap").stop().animate({"height": 70 + ht}, 300, "linear");
});

$("#gnb").bind("mouseleave focus", function() {
  $('#gnb > ul > li').removeClass("on");
  $(".header_wrap").stop().animate({"height": "70px"}, 300, "linear");
});