HTML&CSS 썸네일형 리스트형 부드러운 스크롤과 여백 설정으로 사용자 경험 개선하기 안녕하세요! 이번 글에서는 웹사이트의 스크롤 이동을 더욱 부드럽고 자연스럽게 만들며, 고정된 헤더로 인해 콘텐츠가 가려지지 않도록 하는 방법을 소개합니다. 이 간단한 코드만으로도 사이트의 사용자 경험을 크게 개선할 수 있어, 블로그, 쇼핑몰, 포트폴리오 등 어떤 사이트에도 유용하게 적용할 수 있습니다. 지금 바로 아래 코드를 확인해 보세요!부드러운 스크롤 효과 적용하기페이지 내 링크를 클릭했을 때 해당 섹션으로 부드럽게 이동하도록 설정하면 사용자 경험이 한층 더 좋아집니다. HTML의 `` 태그에 `scroll-smooth` 클래스를 추가하면 Tailwind CSS 유틸리티를 통해 자연스러운 스크롤을 구현할 수 있습니다. 추가적인 JavaScript 코드 없이 간단하게 설정할 수 있다는 장점도 있습니다... 더보기 HTML class 이름 짓는 법 - BEM 명명 규칙 개요 프로그래밍을 하다 보면 변수나 함수명을 어떻게 짓는지 정말 중요한데요. 이러한 이름을 지을 때 규칙이 없다면 지을 때마다 매번 고민을 해야 하고 많은 에너지를 소비할 수 있습니다. 그리고 이러한 불편함은 CSS 스타일을 위한클래스 이름 짓는 것에서도 느낄 수 있는데요 클래스 명을 지을 때 규칙이 없다면 우리는 역시 매번 고민을 해야하고 불필요한 에너지를 소비할거예요 하지만 올바른 규칙이 있다면 우리의 에너지를 알낄 수 있는 것 뿐만 아니라 코드의 가독성을 향상시켜 협업과 유지 보수를 용이하게 하고요 스타일의 충돌을 방지하여 예기치 않은 결과를 방지할 수 있습니다. 그리고 모듈화된 구조로 개발의 생산성을 높일 수 있어요. 그렇기 때문에 이번 시간에는 CSS 클래스 명명 규칙인 BEM에 대해 알아보도.. 더보기 이전 1 다음
