이미지를 나열하는 방법
- 이전 페이지 스크롤할 때 배경을 전환
- 다음 페이지 원형 이미지
CSS를 사용하여 이미지를 나열하는 방법을 배웁니다.
가로의 이미지 갤러리
이미지를 병렬로 배치하는 방법
첫 번째 단계 - 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>
두 번째 단계 - CSS 추가:
CSS를 사용하여 어떻게 사용할 수 있는지 浮动 행렬 이미지를 병렬로 만드는 속성:
浮动 예제
/* 세 개의 이미지 컨테이너(네 개의 이미지 컨테이너는 25%, 두 개의 이미지 컨테이너는 50%, 이와 같이 계속됩니다) */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* 이미지 컨테이너 뒤의 float을 지우기 */
.row::after {
content: "";
clear: both;
display: table;
}
CSS를 사용하여 어떻게 사용할 수 있는지 flex 행렬 이미지를 병렬로 만드는 속성:
플렉스 블록 예제
.row {
display: flex;
}
.column {
flex: 33.33%;
padding: 5px;
}
주의:플렉스 블록은 인터넷 익스플로러 10 및 이전 버전을 지원하지 않습니다. 세 개의 열을 만들기 위해 float나 flex를 사용할지 여부는 여러분의 선택입니다. 그러나 IE10 및 이하 버전을 지원해야 한다면, float를 사용해야 합니다.
팁:플렉스 블록 레이아웃 모듈에 대한更多信息를 알고 싶다면, 우리의 CSS Flexbox 튜토리얼。
반응성 추가
또는, 특정 스크린 너비에서 이미지를 겹치게 배치하며 병렬로 배치하지 않도록 하는 미디어 쿼리를 추가할 수 있습니다.
다음 예제는 500px 또는 더 작은 화면에서 이미지를 세로로 겹치게 배치합니다:
반응형 예제
/* 반응형 레이아웃 - 세 개의 열을 겹치게 만들어서 병렬로 배치하지 않도록 합니다 */
@media screen and (max-width: 500px) {
.column {
width: 100%;
}
}
미디어 쿼리에 대한更多信息를 알고 싶다면, 우리의 CSS 미디어 쿼리 튜토리얼。
관련 페이지
教程：CSS 이미지
教程：CSS 흐름
- 이전 페이지 스크롤할 때 배경을 전환
- 다음 페이지 원형 이미지
