HTML&CSS

부드러운 스크롤과 여백 설정으로 사용자 경험 개선하기

짐코딩 2024. 10. 31. 13:01

안녕하세요! 이번 글에서는 웹사이트의 스크롤 이동을 더욱 부드럽고 자연스럽게 만들며, 고정된 헤더로 인해 콘텐츠가 가려지지 않도록 하는 방법을 소개합니다. 이 간단한 코드만으로도 사이트의 사용자 경험을 크게 개선할 수 있어, 블로그, 쇼핑몰, 포트폴리오 등 어떤 사이트에도 유용하게 적용할 수 있습니다. 지금 바로 아래 코드를 확인해 보세요!

부드러운 스크롤 효과 적용하기

페이지 내 링크를 클릭했을 때 해당 섹션으로 부드럽게 이동하도록 설정하면 사용자 경험이 한층 더 좋아집니다. HTML의 `<html>` 태그에 `scroll-smooth` 클래스를 추가하면 Tailwind CSS 유틸리티를 통해 자연스러운 스크롤을 구현할 수 있습니다. 추가적인 JavaScript 코드 없이 간단하게 설정할 수 있다는 장점도 있습니다.

<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
  <head>
    <!-- 기존의 head 내용 -->
  </head>
  <body>
    <!-- 페이지 내용 -->
  </body>
</html>

스크롤 여백 설정하기

고정된 헤더가 있는 경우, 페이지 내 앵커 링크로 이동할 때 해당 섹션이 상단 헤더에 가려질 수 있습니다. 이 문제를 해결하려면 CSS의 `scroll-margin-top` 속성을 사용하여 여백을 추가하면 됩니다. 이 설정을 통해 고정 헤더로 인해 콘텐츠가 잘리지 않고 자연스럽게 보이도록 할 수 있습니다.

<style>
  [id] {
    scroll-margin-top: 64px; /* 원하는 여백 값으로 설정 */
  }
</style>


위 스타일은 `[id]` 속성이 있는 모든 요소에 적용되며, 링크 클릭 시 해당 섹션이 상단에 64px의 여백을 두고 나타납니다. 여백 크기를 사이트의 고정 헤더 높이에 맞게 조정해 보세요.

 

결론: 작은 디테일로 사용자 경험을 업그레이드하기

이 두 가지 방법은 간단한 코드 추가만으로도 사이트의 사용자 경험을 크게 개선할 수 있습니다. 웹사이트에서 스크롤이 매끄럽게 동작하고, 링크 이동 시 콘텐츠가 명확히 드러나는 것만으로도 방문자가 사이트를 훨씬 더 쾌적하게 이용할 수 있게 됩니다.


#사용자경험 #웹사이트개선 #부드러운스크롤 #CSS트릭 #웹개발 #프론트엔드 #TailwindCSS #웹디자인 #포트폴리오제작 #강의추천

이런 웹사이트 사용자 경험 개선에 관심이 있으신가요?

아래 강의에서 HTML, CSS, JavaScript를 활용한 웹사이트 구축과 사용자 경험을 위한 다양한 방법들을 자세히 배우실 수 있습니다. 강의에서 여러분을 만나 뵙기를 기대하겠습니다! 😊

 

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편

 

포트폴리오 사이트 만들고 배포까지! : 웹 개발 입문 활용편 강의 | 짐코딩 - 인프런

짐코딩 | HTML&CSS, 자바스크립트를 배웠다면 이를 활용하여 직접 포트폴리오 사이트를 만들고 배포해 보세요. 실제로 써 보는 것은 우리의 실력을 향상시키는 데 큰 도움이 될 것입니다., [임베딩

www.inflearn.com

TailwindCSS 완전 정복: 포트폴리오부터 어드민까지!

 

TailwindCSS 완전 정복: 포트폴리오부터 어드민까지! 강의 | 짐코딩 - 인프런

짐코딩 | 한 강의로 끝내는 TailwindCSS 입문부터 실전까지! 두 개의 프로젝트와 함께 레이아웃 구성부터 반응형 디자인! 다크모드! 까지 완벽하게 배워보세요., TailwindCSS 완전 정복: 포트폴리오와

www.inflearn.com