가로 스크롤이란 무엇이며 구현 방법
세로 스크롤은 나쁜 것이 아닙니다. 그러나 X축에 대응하는 가로 스크롤은 어떻습니까? 그것이 무엇인지, 장점이 무엇인지, 어디에 사용할 수 있는지 알고 계십니까? 이 기사에서 이러한 질문에 답한 다음 귀하의 사이트에 적합한 경우 CSS 및 HTML을 사용하여 기본 가로 스크롤을 만드는 방법을 보여 드리겠습니다.
수평 스크롤이란 무엇입니까?
가로로 스크롤하면 사용자가 왼쪽과 오른쪽으로 스크롤할 때 창이나 컨테이너의 측면에서 콘텐츠가 표시됩니다. 가로 스크롤 막대를 클릭하고 끌거나, 마우스 또는 트랙패드로 옆으로 밀거나, 왼쪽 또는 오른쪽 화살표 키를 누르거나, 터치스크린을 사용하여 손가락으로 옆으로 밀면 가로로 스크롤할 수 있습니다.
가로 스크롤이 사용자 경험에 좋을 수 있는 경우
이러한 시나리오에서 수평 스크롤은 우수한 사용자 경험을 제공합니다.
한 눈에 확인하기 어려운 정보
가로 스크롤의 장점:
HTML 및 CSS로 가로 스크롤을 만드는 방법
1단계: HTML 추가
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>
Making a div horizontally
scrollable using CSS
</title>
</head>
<body>
<center>
<h1>Hashnode</h1>
<h2>
Making a div horizontally
scrollable using CSS
<div class="scroll">
<a href="#home">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="#support">Support</a>
<a href="#blog">Blog</a>
<a href="#tools">Tools</a>
<a href="#base">Base</a>
<a href="#custom">Custom</a>
<a href="#more">More</a>
</div>
</center>
</body>
</html>
2단계: CSS를 사용하여 스크롤 동작을 적용합니다.
h1 {
color: blue;
}
div.scroll {
margin: 4px, 4px;
padding: 4px;
background-color: #08c708;
width: 300px;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
}
우리 대부분은 반사적으로 수직으로 스크롤합니다. 수평으로 스크롤하는 것보다 더 의미가 있습니다. 그럼에도 불구하고 가로 스크롤은 여전히 현대적인 디자인에 자리 잡고 있습니다. 이 방법을 신중하고 의도적으로 사용할 때마다 페이지가 구조화되고 콘텐츠가 효과적으로 표시됩니다.
산출:
You can now extend your support by buying me a Coffee.😊👇
읽어주셔서 감사합니다 😊
Reference
이 문제에 관하여(가로 스크롤이란 무엇이며 구현 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/muthuannamalai12/what-is-horizontal-scrolling-and-how-to-implement-it-ndi텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
