CSS로 화면을 50:50으로 나누는 분할 화면(Split Screen) 만드는 방법

CSS를 활용하면 화면을 좌우로 정확히 반반씩 나누는 분할 화면(Split Screen) 레이아웃을 아주 간단하게 구현할 수 있습니다. 핵심은 position: fixed 속성과 width: 50% 값을 조합하는 것입니다.

아래 예제 코드를 통해 직접 확인해 보겠습니다.

예제

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    body {
        font-family: Arial;
        color: white;
    }
    h1 {
        padding: 20px;
    }
    .left, .right {
        height: 100%;
        width: 50%;
        position: fixed;
        z-index: 1;
        top: 0;
        overflow-x: hidden;
        padding-top: 20px;
    }
    .left {
        left: 0;
        background-color: rgb(36, 0, 95);
    }
    .right {
        right: 0;
        background-color: rgb(56, 1, 44);
    }
    .centered {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    .centered img {
        width: 150px;
        border-radius: 50%;
    }
</style>
</head>
<body>
<div class="left">
<h1>왼쪽 영역에 들어갈 텍스트입니다</h1>
</div>
<div class="right">
<h1>오른쪽 영역에 들어갈 텍스트입니다</h1>
</div>
</body>
</html>

출력 결과

위 코드를 실행하면 화면이 좌우 두 개의 영역으로 정확히 절반씩 나뉘어 표시됩니다.

CSS로 화면을 50:50으로 나누는 분할 화면(Split Screen) 만드는 방법

코드 동작 원리

width: 50%; — 왼쪽(.left)과 오른쪽(.right) 패널이 각각 화면 너비의 절반을 차지하도록 설정합니다.
position: fixed; — 두 패널을 뷰포트 기준으로 고정시켜, 스크롤 여부와 관계없이 항상 전체 화면을 채우도록 합니다.
left: 0 / right: 0; — 왼쪽 패널은 화면 왼쪽 끝에, 오른쪽 패널은 화면 오른쪽 끝에 배치하여 자연스럽게 반반 구조를 만듭니다.
height: 100%; — 패널의 높이를 화면 전체 높이로 지정합니다.
.centered 클래스 — transform: translate(-50%, -50%)를 활용해 이미지나 텍스트 같은 콘텐츠를 패널의 정중앙에 배치할 수 있습니다.

이 방식은 포트폴리오 소개 페이지, 로그인·회원가입 화면, 제품 비교 페이지 등 좌우 대비 구도가 필요한 다양한 웹 디자인에서 유용하게 활용할 수 있습니다.