[CSS] 가로 스크롤 메뉴

소요 시간: 3분 조회수: 110

가로 스크롤 메뉴를 구현하기 위해, 먼저 브라우저의 폭을 넘어가는 많은 메뉴 항목을 만듭니다. 아래 예시 코드를 참고하세요:

<div class="scroll">
    <a href="#">메뉴1</a>
    <a href="#">메뉴2</a>
    <a href="#">메뉴3</a>
    <a href="#">메뉴4</a>
    <a href="#">메뉴5</a>
    <a href="#">메뉴6</a>
    <a href="#">메뉴7</a>
    <a href="#">메뉴8</a>
    <a href="#">메뉴9</a>
</div>


메뉴 스타일 설정

이제 메뉴의 스타일을 설정합니다. scroll 클래스는 배경색, 오버플로우 처리, 스크롤바 숨기기 등의 스타일을 정의합니다..

.scroll {
    background-color: black;
    overflow: auto;white-space: nowrap;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}

overflow 속성은 내용물이 블록의 너비를 넘어갔을 때 어떻게 처리할지 설정하는 속성입니다. 여기서는 auto 값을 사용하여 필요에 따라 스크롤바를 표시합니다.

white-space 속성은 공백 문자를 어떻게 처리할지 정의합니다. nowrap 값을 사용하면 공백 문자들을 한 개의 공백으로 바꾸어 줄바꿈 없이 한 줄로 표시됩니다.


메뉴 항목 스타일

a 태그에도 스타일을 적용하여 좀 더 깔끔한 디자인을 완성합니다.

div.scroll a {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px;
    text-decoration: none;
}
div.scroll a:hover {
    background-color: #777;
}

여기서 display: inline-block을 사용하여 a 태그를 블록처럼 취급하지만, 한 줄로 나열할 수 있게 합니다. color와 background-color를 통해 텍스트와 배경 색상을 지정하고, padding을 통해 클릭 가능한 영역을 넓혀 사용자 경험을 개선합니다. text-decoration: none으로 링크의 기본 밑줄을 제거하고, hover 상태에서 배경 색상을 변경하여 인터랙티브한 요소를 추가합니다.


전체 코드

위의 모든 스타일을 적용한 전체 코드는 다음과 같습니다:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>가로 스크롤 메뉴</title>
    <style>
        .scroll {
            background-color: black;
            overflow: auto;
            white-space: nowrap;
            -ms-overflow-style: none; /* IE and Edge */
            scrollbar-width: none; /* Firefox */
        }

        .scroll::-webkit-scrollbar {
            display: none; /* Chrome, Safari, Opera */
        }

        div.scroll a {
            display: inline-block;
            color: white;
            text-align: center;
            padding: 14px;
            text-decoration: none;
        }

        div.scroll a:hover {
            background-color: #777;
        }
    </style>
</head>
<body>
    <div class="scroll">
        <a href="#">메뉴1</a>
        <a href="#">메뉴2</a>
        <a href="#">메뉴3</a>
        <a href="#">메뉴4</a>
        <a href="#">메뉴5</a>
        <a href="#">메뉴6</a>
        <a href="#">메뉴7</a>
        <a href="#">메뉴8</a>
        <a href="#">메뉴9</a>
    </div>
</body>
</html>

인기글

CSS 리스트