c24. CSS 반응형 이미지 갤러리

CSS 반응형 이미지 갤러리

빈센트 반 고흐 갤러리

Wheatfield with Crows, c.1890
빈센트 반 고흐

Starry Night, c.1889
빈센트 반 고흐

The Bedroom at Arles, c.1887
빈센트 반 고흐

The Mulberry Tree,
c. 1889
빈센트 반 고흐

CSS 로 이미지 갤러리를 만들 수 있습니다. 
이미지 갤러리는 반응형 (responsive) 으로 만들어서, 브라우저 화면의 크기에 따라, 이미지의 크기와 배치가 조절되도록 하는 것이 일반적입니다.

---

이미지와 설명글을 묶어서 div 태그로 둘러 싸고 img 클래스 라고 하고, div.img {} 선택자에서 스타일을 바깥 테두리에 1px 실선을 그렸습니다.

그리고 div.img:hover {} 는 가상-클래스 (pseudo-class) 인데, "img 클래스를 갖는 div 태그에 마우스가 올라가면" 이라는 의미입니다. 이때 테두리 색상을 좀더 진하게 (#777) 해 주어 눈에 띄게 해 주었습니다.

div.img img {} 는 후손 선택자라고 하는데, "img 클래스를 갖는 div 태그의 아래에 있는 모든 (후손) img 태그들" 이라는 의미입니다.

여기서는 img 클래스를 갖는 div 태그 (div.img) 에서 폭을 지정하므로, img 태그에서는 width: 100%; 로 하여, div 내에 꽉 채웠습니다.

div.img img {
width: 100%;
height: auto;
}

반면 모두 이미지가 4장 이므로 div 태그 하나당 150px 로 하고 테두리까지 더하면 608px 가 되는데, 이보다 크면 4장이 한줄에 보이고, 작으면 세줄, 두줄, 한줄로 보일 것입니다.

그러나, 여기에서는 반응형 이미지 갤러리로 하기 위해, /*float: left; width: 150px;*/ 은 주석 처리하였습니다.

즉 img 클래스를 갖는 div 태그의 폭은, .responsive {} 클래스에서 화면의 크기에 따라 정해 줄 것입니다.

<style>
div.img {
border: 1px solid #ccc;
/*float: left;
width: 150px;*/
}

div.img:hover {
border: 1px solid #777;
}

div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}
</style>
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg">
<img src="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg" alt="Wheatfield with Crows" width="473" height="269">
</a>
<div class="desc">Wheatfield with Crows, c.1890 <br />
빈센트 반 고흐</div>
</div>

---

responsive 클래스를 갖는 태그들은 폭이 25% 가 안되게 갖으므로 div 태그가 4장이 가로로 배치될 것입니다.

그러나 스크린 크기가 최대 700px 까지는 태그당 폭이 50% 미만이 되어 한줄에 2개씩 배치됩니다.

그리고 400px 이하에서는 태그당 폭을 100% 로 하여 한줄에 하나씩 배치되게 됩니다.

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 400px){
    .responsive {
        width: 100%;
    }
}
이렇게 하여 스크린 사이즈에 따라 이미지들이 재배치되었습니다. 이것을 "미디어 쿼리" 라고 하는데 뒤에 반응형 웹 디자인에서 다룰 것입니다.

브라우저 창의 크기를 조절해 보세요. 이미지 크기와 배치가 자동으로 조절될 것입니다.

---

.clearfix:after {content: "";} 는 clearfix 클래스를 갖는 태그의 바로뒤에 "" 빈 내용이 오게하고 플로우팅을 종료시키기 위한 가상 클래스입니다.

원래 div 태그는 블록 태그에 속하므로, 자동 줄바꿈이 되나, 반응형 웹 디자인에서는 아래와 같이 한 줄에 여러개의 div 태그를 배치하기 위해 아래와 같이 플로우팅 속성을 부여하였었습니다.

.responsive {float: left;}

그러나, 반응형 이미지 갤러리가 끝나는 곳에서는 플로우팅을 중단시켜, 정상적으로 줄바꿈이 되도록 하여야 합니다.

따라서 clear: both; 속성값을 주어 그 이후 태그들이 플로우팅 되지 않도록 하였습니다.
<style>.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
</style>
<div class="clearfix"></div>

---

<style>
div.img {
border: 1px solid #ccc;
}

div.img:hover {
border: 1px solid #777;
}

div.img img {
width: 100%;
height: auto;
}

div.desc {
padding: 15px;
text-align: center;
}

* {
box-sizing: border-box;
}

.responsive {
padding: 0 6px;
float: left;
width: 24.99999%;
}

@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}

@media only screen and (max-width: 400px){
.responsive {
width: 100%;
}
}

.clearfix:after {
content: "";
clear: both;
}
</style>

<h3 style="text-align:center">빈센트 반 고흐 갤러리</h3>

<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg">
<img src="http://imgc.allpostersimages.com/images/P-473-488-90/27/2709/JS5ND00Z/posters/vincent-van-gogh-wheatfield-with-crows-c-1890.jpg" alt="Wheatfield with Crows" width="473" height="269">
</a>
<div class="desc">Wheatfield with Crows, c.1890 <br />
빈센트 반 고흐</div>
</div>
</div>

<div class="responsive">
<div class="img">
<a target="_blank" href="http://cache2.allpostersimages.com/p/LRG/39/3996/FK7WF00Z/posters/vincent-van-gogh-starry-night-c-1889.jpg">
<img src="http://cache2.allpostersimages.com/p/LRG/39/3996/FK7WF00Z/posters/vincent-van-gogh-starry-night-c-1889.jpg" alt="Starry Night" width="400" height="301">
</a>
<div class="desc">Starry Night, c.1889 <br />
빈센트 반 고흐</div>
</div>
</div>

<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/27/2744/N2BTD00Z/posters/vincent-van-gogh-the-bedroom-at-arles-c-1887.jpg">
<img src="http://imgc.allpostersimages.com/images/P-473-488-90/27/2744/N2BTD00Z/posters/vincent-van-gogh-the-bedroom-at-arles-c-1887.jpg" alt="The Bedroom at Arles" width="473" height="355">
</a>
<div class="desc">The Bedroom at Arles, c.1887 <br />
빈센트 반 고흐</div>
</div>
</div>

<div class="responsive">
<div class="img">
<a target="_blank" href="http://imgc.allpostersimages.com/images/P-473-488-90/64/6409/76Z9100Z/posters/vincent-van-gogh-the-mulberry-tree-c-1889.jpg">
<img src="http://imgc.allpostersimages.com/images/P-473-488-90/64/6409/76Z9100Z/posters/vincent-van-gogh-the-mulberry-tree-c-1889.jpg" alt="The Mulberry Tree" width="473" height="405">
</a>
<div class="desc">The Mulberry Tree, <br /> c. 1889 <br />
빈센트 반 고흐</div>
</div>
</div>

<div class="clearfix"></div>

---

[광고] Udemy 동영상 강의로 보기