CSS로 2열 레이아웃 그리드를 만들려면 position 속성과 함께 왼쪽·오른쪽 영역을 각각 화면 절반 너비로 지정하는 방식을 활용하면 됩니다. 이 방법은 포트폴리오 페이지나 소개 화면처럼 화면을 좌우로 나눠 보여주고 싶을 때 유용하게 사용됩니다.
예제
다음은 CSS만으로 화면을 좌우 두 열로 분할하는 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
color: white;
}
.left, .right {
height: 50%;
width: 50%;
position: fixed;
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>
<h1 style="color: black;">Two column layout grid example</h1>
<div class="left">
<h1>Some random text on the left</h1>
</div>
<div class="right">
<h1>Some random text on the right</h1>
</div>
</body>
</html>출력 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
코드 핵심 설명
예제 코드의 동작 원리를 단계별로 살펴보겠습니다.
1. 좌우 영역 분할
.left와 .right 클래스에 width: 50%를 적용해 각각 화면의 절반을 차지하도록 설정합니다. 여기에 position: fixed를 함께 사용하면 스크롤과 관계없이 두 영역이 항상 화면에 고정됩니다.
2. 위치 지정
.left에는 left: 0, .right에는 right: 0을 지정해 왼쪽 영역은 화면 좌측에, 오른쪽 영역은 우측에 각각 배치합니다. 서로 다른 배경색(rgb(36, 0, 95), rgb(56, 1, 44))을 적용해 두 열이 시각적으로 구분되도록 했습니다.
3. 콘텐츠 중앙 정렬
.centered 클래스는 top: 50%, left: 50%와 transform: translate(-50%, -50%)를 조합하여 요소를 정확히 중앙에 배치하는 대표적인 기법입니다. 프로필 이미지처럼 원형으로 보여주고 싶을 때는 border-radius: 50%를 활용하면 됩니다.
마무리
이처럼 position 속성과 퍼센트 기반 너비만으로도 간단하게 2열 레이아웃 그리드를 구현할 수 있습니다. 반응형 웹을 고려한다면 미디어 쿼리를 추가해 모바일 화면에서는 한 열로 전환되도록 확장하는 것도 좋은 방법입니다.