[jQuery] jQuery CSS 미디어 쿼리 화면 분할

26 Dec 2023

jQuery

웹 디자인의 중요한 측면 중 하나는 반응형 웹 디자인입니다. 브라우저의 크기나 장치의 종류에 따라 컨텐츠를 조정하는 것이 매우 중요합니다. 이러한 작업을 수행하기 위해 CSS 미디어 쿼리를 사용할 수 있으며, jQuery를 사용하면 이를 더욱 용이하게 처리할 수 있습니다.

이번 튜토리얼에서는 jQuery를 사용하여 CSS 미디어 쿼리를 활용하여 화면을 분할하는 방법에 대해 살펴보겠습니다.

1. HTML 구조 설정

우선, 분할하려는 화면을 구성하는 레이아웃을 HTML로 작성합니다. HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>화면 분할</title>
</head>
<body>
    <div class="split-container">
        <div class="left-panel"></div>
        <div class="right-panel"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

2. CSS 설정

다음으로, 분할된 화면의 스타일을 CSS로 정의합니다. 예를 들어, 왼쪽 패널과 오른쪽 패널의 너비 조정에 따라 레이아웃을 변경할 수 있습니다.

/* styles.css */

.left-panel {
    width: 50%;
    float: left;
}

.right-panel {
    width: 50%;
    float: left;
}

@media (max-width: 768px) {
    .left-panel, .right-panel {
        width: 100%;
        float: none;
    }
}

3. jQuery 및 미디어 쿼리 적용

이제 jQuery를 사용하여 미디어 쿼리를 적용해보겠습니다. 화면이 작은 디바이스에서는 왼쪽과 오른쪽 패널을 쌓아올리도록 하겠습니다.

// script.js

$(document).ready(function() {
    function adjustLayout() {
        if ($(window).width() <= 768) {
            $('.left-panel, .right-panel').css({ 'width': '100%', 'float': 'none' });
        } else {
            $('.left-panel').css({ 'width': '50%', 'float': 'left' });
            $('.right-panel').css({ 'width': '50%', 'float': 'left' });
        }
    }

    adjustLayout();

    $(window).resize(function() {
        adjustLayout();
    });
});

위 코드는 브라우저 창의 너비가 변경될 때마다 adjustLayout 함수를 호출하여 화면을 분할하는 레이아웃을 조정합니다.

이제 웹 페이지를 브라우저에서 열어보면, 브라우저 창의 크기를 조정함에 따라 왼쪽과 오른쪽 패널이 나란히 또는 쌓아올리는 것을 확인할 수 있습니다.

이것으로 jQuery를 사용하여 CSS 미디어 쿼리를 활용하여 화면을 분할하는 방법에 대해 알아보았습니다.