CSS와 JavaScript로 목록·그리드 뷰 전환 기능 만드는 방법

웹 페이지에서 콘텐츠를 목록 뷰(List View)와 그리드 뷰(Grid View) 사이에서 자유롭게 전환할 수 있는 UI는 사용자 경험을 크게 향상시켜 줍니다. 대표적으로 쇼핑몰 상품 목록, 이미지 갤러리, 게시판 등에서 널리 활용되는 패턴입니다.

핵심 원리

구현 방식은 생각보다 간단합니다. 버튼을 클릭하면 JavaScript가 각 컬럼(column) 요소의 width 값을 변경하는 것이 전부입니다. 너비를 50%로 설정하면 두 개의 열이 나란히 배치되어 그리드 뷰가 되고, 100%로 설정하면 요소들이 세로로 쌓여 목록 뷰가 됩니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
    * {
        box-sizing: border-box;
    }
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    /* 나란히 배치되는 두 개의 균등한 열 생성 */
    .column {
        float: left;
        width: 50%;
        padding: 10px;
        color: white;
    }
    /* 열(column) 이후 float 해제 */
    .row:after {
        content: "";
        display: table;
        clear: both;
    }
    /* 버튼 스타일 */
    .btn {
        border: none;
        outline: none;
        padding: 12px 16px;
        background-color: #f1f1f1;
        cursor: pointer;
    }
    .btn:hover {
        background-color: #ddd;
    }
    .btn.active {
        background-color: #666;
        color: white;
    }
</style>
</head>
<body>
<h1>목록·그리드 뷰 예제</h1>
<h2>아래 버튼을 클릭하여 뷰를 전환해 보세요</h2>
<div id="btnContainer">
<button class="btn" onclick="listView()">목록</button>
<button class="btn active" onclick="gridView()">그리드</button>
</div>
<br />
<div class="row">
<div class="column" style="background-color:rgb(154, 9, 173);">
<h2>컬럼 1</h2>
</div>
<div class="column" style="background-color:rgb(113, 35, 216);">
<h2>컬럼 2</h2>
</div>
</div>
<div class="row">
<div class="column" style="background-color:rgb(19, 143, 85);">
<h2>컬럼 3</h2>
</div>
<div class="column" style="background-color:rgb(207, 69, 27);">
<h2>컬럼 4</h2>
</div>
</div>
<script>
    var elements = document.querySelectorAll(".column");
    function listView() {
        Array.from(elements).forEach(item => {
            item.style.width = "100%";
        });
        Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
            if (index === 0) item.classList.add("active");
            else item.classList.remove("active");
        });
    }
    function gridView() {
        Array.from(elements).forEach(item => {
            item.style.width = "50%";
        });
        Array.from(document.querySelectorAll(".btn")).forEach((item, index) => {
            if (index === 1) item.classList.add("active");
            else item.classList.remove("active");
        });
    }
</script>
</body>
</html>

코드 상세 설명

CSS 부분

.column: float: left와 width: 50%를 적용해 두 개의 균등한 열을 만듭니다. box-sizing: border-box 덕분에 패딩이 포함된 상태에서도 정확히 절반씩 차지합니다.
.row:after: 가상 요소를 이용해 float를 해제(clear)함으로써, 다음 행의 레이아웃이 무너지지 않도록 합니다.
.btn / .btn.active: 버튼의 기본 스타일과 마우스 오버(hover) 효과를 정의하고, .active 클래스로 현재 선택된 뷰 모드를 시각적으로 표시합니다.

JavaScript 부분

listView(): 모든 .column 요소의 너비를 100%로 변경하여 세로로 쌓인 목록 형태로 전환하고, 첫 번째 버튼에 active 클래스를 추가합니다.
gridView(): 너비를 50%로 되돌려 2열 그리드 형태로 전환하고, 두 번째 버튼에 active 클래스를 추가합니다.
querySelectorAll과 forEach를 조합해 여러 요소를 한 번에 처리하므로, 컬럼 개수가 늘어나도 코드 수정 없이 동작합니다.

실행 결과

위 코드를 실행하면 초기 화면은 그리드 뷰(2열 배치)로 표시됩니다.

CSS와 JavaScript로 목록·그리드 뷰 전환 기능 만드는 방법

[목록] 버튼을 클릭하면 아래와 같이 모든 컬럼이 세로로 정렬된 목록 뷰로 전환됩니다.

CSS와 JavaScript로 목록·그리드 뷰 전환 기능 만드는 방법

참고: 최신 CSS 기술 활용하기

float 방식은 구형 브라우저 호환성에는 유리하지만, 최신 프로젝트에서는 Flexbox나 CSS Grid를 사용하는 것이 좋습니다. 예를 들어 .row { display: flex; flex-wrap: wrap; }로 선언한 뒤 컬럼 너비만 JavaScript로 조절하면 float 해제 없이도 동일한 결과를 더 깔끔하게 얻을 수 있습니다.