반응형
CSS를 사용하여 이미지 갤러리를 만들 수 있다.
CSS Image Gallery
| <!DOCTYPE html> <html> <head> <style> div.gallery { margin: 5px; border: 1px solid #ccc; float: left; width: 180px; } div.gallery:hover { border: 1px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; } </style> </head> <body> <div class="gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> </body> </html> |
div요소에 gallery 클래스에 float left, width 180px를 설정하여 너비가 180px 이미지 영역을 스타일을 정의한다.
div요소에 gallery 클래스에 hover상태이면 border 1px solid #777색으로 현재 커서 위치와 이미지 선택이 어디인지를 알려준다.
div 요소에 gallery 클래스에 img 요소는 width 100%, height auto로 설정하여 width 180px에 자동으로 높이가 조절이 된다.
위의 코드를 실행한 결과는 아래 그림과 같다.
Responsive Image Gallery
CSS 미디어 쿼리를 사용하여 데스크톱, 태블릿 및 스마트폰에 잘 어울리는 응답성 이미지 갤러리를 만드는 방법.
| <!DOCTYPE html> <html> <head> <style> div.gallery { border: 1px solid #ccc; } div.gallery:hover { border: 1px solid #777; } div.gallery 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: 500px) { .responsive { width: 100%; } } .clearfix:after { content: ""; display: table; clear: both; } </style> </head> <body> <h2>Responsive 이미지 갤러리</h2> <h4>브라우저 창 크기를 조정하여 효과 확인.</h4> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_5terre.jpg"> <img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_forest.jpg"> <img src="img_forest.jpg" alt="Forest" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_lights.jpg"> <img src="img_lights.jpg" alt="Northern Lights" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_mountains.jpg"> <img src="img_mountains.jpg" alt="Mountains" width="600" height="400"> </a> <div class="desc">여기에 이미지 설명 추가</div> </div> </div> <div class="clearfix"></div> <div style="padding:6px;"> <p>이 예에서는 미디어 쿼리를 사용하여 이미지를 다른 화면 크기로 재배치합니다. 너비가 700px보다 큰 화면의 경우 4개의 이미지를 나란히 표시하고 700px보다 작은 화면의 경우 2개의 이미지를 나란히 표시합니다. 500px보다 작은 화면의 경우 이미지가 수직으로(100%) 쌓입니다.</p> <p>CSS 튜토리얼에서 나중에 미디어 쿼리 및 응답형 웹 디자인에 대해 자세히 알게 될 것입니다.</p> </div> </body> </html> |
브라우저 창 크기를 줄이면 아래 그림과 같이 이미지 갤러리가 창 크기에 적응하여 표시된다.
이상으로 지금까지 CSS로 이미지 갤러리를 만드는 실습을 하였다.
꼭 손으로, 눈으로, 머리로 익히며 실습하기를 바란다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
반응형
'HTML > CSS문법' 카테고리의 다른 글
| CSS Attribute Selector(속성 선택자) (0) | 2023.09.06 |
|---|---|
| CSS image sprites (0) | 2023.09.05 |
| CSS dropdown (2) | 2023.09.03 |
| CSS 수평 네비게이션 바 (0) | 2023.09.02 |
| CSS navigation bar (0) | 2023.09.01 |
댓글