링크로 섹션이동시 고정헤더에 h태그가 가리는 이슈

문제 : 링크로 섹션 이동시에 고정헤더에 h태그가 가려짐

 

<a href = '#cc'>cc</a>

<h3 id = 'cc'>cc</h3>

위 gif처럼 링크로 섹션이동시에 해당 id를 가진 h태그가 고정헤더에 가려지는 이슈가 있었다.

해결 ':target'과 가상선택자 '::before' 이용

:target을 이용하여 해당 링크로 이동했을때의 스타일을 다음과 같이 지정해주었다.

.anchor{
	&:target::before {
    content: "";
    display: block;
    height: 86px; /* 헤더의 높이와 동일 */
    margin-top: -86px; /* 음수 마진으로 헤더 높이만큼 오프셋 조정 */
    visibility: hidden;
  }
}

<h3 className={styles.anchor} id={children as string}>
	{children}
</h3>

 

이젠 고정헤더에 가려지지 않는다.

 

---

https://dev.meye.net/entry/%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%81%ED%81%AC-%EC%9D%B4%EB%8F%99-%EA%B3%A0%EC%A0%95-%ED%97%A4%EB%8D%94-%EA%B0%80%EB%A6%AC%EB%8A%94-%EB%AC%B8%EC%A0%9C

동일 페이지에서 링크로 섹션 이동시 고정 헤더에 가리는 문제

참고