[UI 개발] responsive image gallery(반응형 이미지갤러리)

오늘 예제는 반응형 이미지갤러리입니다.

자바스크립트나 jQuery를 활용하지 않고, 순수 HTML, CSS 코딩을 통해 반응형 이미지갤러리를 구현하는 것이 포스팅의 목표입니다.

바로 예제를 보면서 시작해보겠습니다.

HTML 시맨틱마크업

---

CSS3

---

이미지는 각자 파일의 경로에 맞춰서 작성해주시기 바랍니다. 

위의 코드는 브라우저나 디바이스의 크기에 따라 유동적으로 변하게 만들어 줍니다. 맨 위의 @media all and (min-width: 960px)는 960px 이상 사이즈부터는 #gallery_layout을 가로, 세로 가운데 정렬을 시켜주기 위해 사용했습니다.

테스트는 하단의 URL에서 확인하실 수 있습니다.

http://mismaven.kr/test/responsive_gallery/index.html

오늘 강의에서는 사이즈가 사용자들이 사용하는 디바이스와 브라우저의 크기에 따라 유동적으로 변하는 반응형 이미지갤러리를 구현해봤습니다. 

다음 강의에서는 여기에서 추가적으로 jQuery를 활용해서 클릭을 했을 때, 해당 이미지를 미리볼 수 있게 해주는 기능을 추가하도록 하겠습니다.