[HTML/CSS]a태그 클릭시 섹션 부드럽게 넘어가기(scroll-behavior)

안녕하세요 :) 무택입니다🧔

오늘은 간단하지만 인풋대비 좋은 아웃풋을 낼 수 있는 기능을 가져왔습니다.

홈페이지에서는 잘 사용하지 않지만 원페이지로 되어있는 있고 페이지의 길이가 긴 경우에 사용하기 좋은 기능입니다.

바로 scroll-behavior 설정입니다.

 

See the Pen [CSS]a태그 클릭시 섹션 부드럽게 넘어가기(scroll-behavior) by TytanLee (@TytanLee) on CodePen.

 

위처럼 html에  'scroll-behavior: smooth;' 값을 주면 페이지 전체에 a태그 클릭 시 부드럽게 이동하는 효과를 적용할 수 있습니다.

서치 하다 보니 옛날에는 js라이브러리를 이용해서 구현했던 것 같은데 지금은 위 기능으로도 충분히 좋은 ux를 적용할 수 있으니 시대가 편해진 것 같습니다.