갤러리
-
(HTML/CSS/JS) 사진 갤러리 만들기HTML CSS JS 2021. 8. 17. 11:24
- 웹사이트를 돌아다니다 보면 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다. 예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다. - 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자. - HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다. - 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19..