CSS로 이미지를 나란히 정렬하는 방법 (float 활용 예제)

CSS의 float 속성을 활용하면 여러 이미지를 화면에 가로로 나란히 쉽게 배치할 수 있습니다. 아래 예제에서는 각 이미지를 감싸는 컬럼 요소에 float: left와 너비 25%를 지정하여, 4개의 이미지가 한 줄에 정렬되도록 구현했습니다.

예제 코드

<!DOCTYPE html>
<html>
<head>
<style>
* {
    box-sizing: border-box;
}
.imageColumn {
    float: left;
    width: 25%;
    padding: 10px;
}
h1 {
    text-align: center;
}
</style>
</head>
<body>
<h1>Images Aligned Side by Side example</h1>
<div class="alignRow">
<div class="imageColumn">
<img src="https://i.picsum.photos/id/811/400/400.jpg" alt="Snow" style="width:100%">
</div>
<div class="imageColumn">
<img src="https://i.picsum.photos/id/871/400/400.jpg" alt="Forest" style="width:100%">
</div>
<div class="imageColumn">
<img src="https://i.picsum.photos/id/471/400/400.jpg" alt="Mountains" style="width:100%">
</div>
<div class="imageColumn">
<img src="https://i.picsum.photos/id/271/400/400.jpg" alt="Snow" style="width:100%">
</div>
</div>
</body>
</html>

코드 설명

* { box-sizing: border-box; } : 모든 요소의 패딩과 테두리가 너비 계산에 포함되도록 설정하여 레이아웃이 어긋나는 것을 방지합니다.
.imageColumn { float: left; width: 25%; } : 각 이미지 컬럼을 왼쪽으로 띄우고 전체 너비의 25%씩 차지하게 하여, 한 줄에 4개의 이미지가 나란히 배치됩니다.
padding: 10px; : 이미지 사이에 적절한 여백을 만들어 시각적인 간격을 확보합니다.
img { width: 100%; } : 이미지가 자신이 속한 컬럼의 너비에 맞춰 반응형으로 조절되도록 합니다.

실행 결과

위 코드를 실행하면 다음과 같이 4개의 이미지가 가로 방향으로 나란히 정렬된 화면을 확인할 수 있습니다.

CSS로 이미지를 나란히 정렬하는 방법 (float 활용 예제)

참고로 최신 프로젝트에서는 float 대신 Flexbox(display: flex)나 CSS Grid를 사용하면 더 유연하고 직관적으로 이미지를 정렬할 수 있으니, 상황에 맞게 선택해서 활용하시기 바랍니다.