예제: 페이징 갤러리 UI
0
이번 포스팅에 언급할 갤러리는 왼쪽에서 큰 이미지를 확인할 수 있고, 오른쪽에 썸네일이 제공되는 형식의 갤러리 입니다.
마크업에 사용된 왼쪽의 큰 이미지와 썸네일은 이름은 같고 확장자는 다른 형태로 되어있으며
썸네일을 클릭 시 왼쪽 <p> 테그의 배경이미지가 바뀌고,
썸네일에 적용된 <alt>테그의 내용이 블라인드 텍스트로 제공되는 형태입니다.
이 블로그에 업데이트되는 모든 레퍼런스는 개인적인 스터디의 결과물이며,
더 나은 마크업및 스크립트의 작성방식이 존재할 수 있습니다.
해당내용 참고시 주의 부탁드립니다.
자세한 내용은 예제화면을 확인하시면 됩니다.
해당 예제는 IE 8이하 버전, 크롬 9.0 버전, 사파리 5.0 버전, 파이어폭스 6 버전, Opera 11버전에서 테스트 완료되었으며
w3cThe World Wide Web Consortium의 표준안을 준수하여 마크업 하였습니다. Check the markup