CSS에서 가로 스크롤 가능 섹션 만들기

가로로 스크롤 가능한 섹션은 뷰포트 너비를 초과하는 콘텐츠를 표시하는 데 사용되는 일반적인 웹 디자인 패턴입니다. 이 디자인 패턴을 사용하면 사용자가 가로로 스크롤하여 큰 이미지, 갤러리, 타임라인, 지도 및 기타 콘텐츠를 표시하는 독특하고 매력적인 방법을 제공할 수 있습니다. 이는 Overflow−x: auto 또는 Overflow−x: 스크롤과 같은 CSS 속성을 사용하여 달성됩니다.

가로 스크롤을 위한 기본 브라우저 기능을 사용하며 여러 장치에서 반응합니다. 콘텐츠를 쉽게 탐색하고 탐색할 수 있습니다. 추가 라이브러리나 플러그인이 필요하지 않습니다.

알고리즘

• 컨테이너 요소를 정의하려면 "컨테이너" 클래스를 사용하세요.

• 가로 스크롤을 활성화하려면 컨테이너의 "overflow−x" 속성을 "auto"로 설정하세요.

• 섹션이 다음 줄로 넘어가는 것을 방지하려면 컨테이너의 "white−space" 속성을 "nowrap"으로 설정하세요.

• 클래스를 사용하여 "섹션"에 대한 섹션 요소를 정의하세요.

• 각 섹션의 "표시" 속성을 "인라인 블록"으로 설정하면 나란히 표시됩니다.

• 각 섹션의 "너비" 속성을 "100vw"로 설정하여 각 섹션의 너비를 전체 뷰포트 너비로 설정하세요.

• 각 섹션의 "높이" 속성을 "80vh"로 설정하여 각 섹션의 높이를 뷰포트 높이의 80%로 설정합니다.

• "margin−right" 속성을 사용하여 각 섹션의 오른쪽에 여백을 추가합니다.

• 각 섹션의 상단을 컨테이너 상단과 정렬하려면 "수직 정렬" 속성을 사용하세요.

• 섹션 요소를 컨테이너 요소 안에 배치하세요.

예

으아악

페이지 매김이나 탭을 사용하여 콘텐츠를 여러 섹션으로 구분하는 전통적인 수직 스크롤을 통해서도 이 작업을 수행할 수 있습니다. 가로 스크롤에 의존하지 않고 반응성이 뛰어나고 시각적으로 매력적인 방식으로 콘텐츠를 표시하려면 그리드 또는 Flexbox 레이아웃을 사용하세요.

결론

디자인할 때 다음 지침을 염두에 두세요.

• 간단하게 유지하세요. 모든 영역을 정보로 채우지 마세요. 핵심 사항을 간결하고 명확하게 설명하는 데 중점을 둡니다.

• 시선을 사로잡는 시각적 요소 사용: 청중의 참여를 유도하고 섹션을 더욱 재미있게 만들려면 최고의 사진, 비디오 또는 애니메이션을 사용하십시오.

• 일관적인 디자인 사용: 전체적으로 매끄러운 모양과 느낌을 생성하려면 모든 영역이 일관된 디자인을 가지고 있는지 확인하세요.

• 내비게이션 제공: 사용자가 가로로 스크롤되는 페이지의 섹션 사이를 쉽게 이동할 수 있도록 합니다. 이동하게 하려면 화살표, 점 및 탐색 연결을 추가할 수 있습니다.

위 내용은 CSS에서 가로 스크롤 가능 섹션 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!