흔한 개발자 이야기

긴 웹페이지에서 A태그를 사용해서 섹션별로 이동할 수 있도록 만들었는데, fixed로 고정되어있는 헤더가 이동한 섹션 일부를 가리는 문제가 발생했다. 다음은 이런 문제가 생기는 예제 코드이다. (문서 내용은 한글 Lorem Ipsum을 사용했다.)

위의 코드에서 헤더에 있는 각 링크를 클릭하면 동일한 페이지의 해당하는 섹션으로 이동하는데, 상단의 헤더가 고정되어 가리게 된다. 이 문제를 해결하기 위해서 스크립트를 사용하지 않고 CSS 스타일만으로 해결되는 간단한 방법이 없을지 여러 방법들을 테스트하다가 아래와 같이 코드를 작성하였다.

이 해결 방법의 핵심은 이동할 섹션 바로 앞쪽에 보이지 않는 요소를 헤더와 동일한 높이로 만들어서 섹션 id를 지정한다는 것이다. 바로 아래와 같은 코드이다.

/* CSS */
.anchor{
    display: block;
    height: 100px;       /* 헤더의 height와 동일한 값 */
    margin-top: -100px;  /* 헤더의 height와 동일한 값 */
    visibility: hidden;
}

<!-- HTML -->
...
<span class="anchor" id="section1"></span>
<div class="section">
...

참고 : http://pixelflips.com/blog/anchor-links-with-a-fixed-header