How To – 이미지를 나란히 정렬

w3.css

이미지를 나란히 정렬

CSS를 사용하여 이미지를 나란히 정렬하는 방법을 알아보자.

이미지를 나란히 배치하는 방법

1단계) HTML 추가

<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>

2단계) CSS 추가

CSS float 속성을 이용하여 나란히 이미지를 생성하는 방법

/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 33.33%;
  padding: 5px;
}

/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}

CSS flex 속성을 이용하여 나란히 이미지를 생성하는 방법

.row {
  display: flex;
}

.column {
  flex: 33.33%;
  padding: 5px;
}

반응성 추가

선택적으로 특정 화면 너비에서 이미지가 서로 옆에 떠 있는 대신 서로 위에 쌓이도록 미디어 쿼리를 추가할 수 있다.

다음 예에서는 너비가 500px 이하인 화면에 이미지를 수직으로 쌓는다.

예제

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}