웹솔루션개발 25년 노하우! 해피CGI의 모든것

PC 에서는 위와 같이 반응형으로 모바일 사이즈에서는 위와 같이 나타납니다. 사용법은 간단합니다. js 선언 후 탭 디자인은 위와 같은 형태로 한후 스크립트 옵션 조절하여 사용하시면 되겠습니다. https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion 위의 링크에서도 동일 내용 확인 가능하니 위의 링크도 같이 확인해 보세요~

탭메뉴는 올바르게 디자인된 경우 매우 편리하고 유용한 인터페이스 요소가 될 수 있습니다. 그러나 모바일 장치와 같은 작은 화면에서 작동하는 반응형 웹 사이트를 구축할 때 탭 기반 인터페이스는 특히 CSS를 통해 모양을 수정하기 어려울 때 큰 문제가 될 수 있습니다. 미디어 쿼리를 삽입하여 탭의 HTML 코드를 수정할 수 있습니다. 그러나 HTML을 수동으로 변경해야 하기 때문에 이것은 매우 어려운 작업입니다. 또는 해당 자료에서 제공할 jQuery 반응형 탭 스크립트를 사용하여 모바일 장치 와 같은 작은 화면에서 탭을 아코디언 인터페이스로 전환하여 모든 공간을 더 중요한 정보에 사용해 보세요. # 일반화면 # 모바일과 같은 가로 디바이스가 작은 화면 사용방법 안내 입니다. 1. 탭메뉴 CSS 호출 2. ..

css로 제작된 반응형 탭 브라우저의 크기에 따라 탭의 디자인 간소화 됩니다. 브라우저의 크기가 900px 이상일때 브라우저의 크기가 900px 미만일때 탭의 텍스트가 사라집니다.

이미지를 확대해서 보여주는 이미지뷰어 플러그인 입니다. 다운로드 받은 파일의 압축을 해제하고, examples 폴더내의 몇몇 html 파일을 웹브라우저로 열어보면 샘플확인이 가능합니다. 작은 이미지를 클릭하면 위 그림상 아래에 표시되는 것 처럼 상세한 이미지를 표시해줍니다. 확대, 축소 및 다음 이미지, 이전 이미지를 선택해서 보는게 가능합니다. 화면 크기에 맞춰서 이미지뷰어의 크기가 조절이 됩니다. 전체화면 및 이미지 회전 등의 기능이 있습니다. 한번에 여러개 이미지뷰어가 되며, 각 이미지뷰어를 드래그해서 위치 조절도 가능합니다. 이미지뷰어를 커스터마이징 하기 위해서, 여러가지 옵션들을 제공을 해주네요.

적용해야할 CSS와 JS 소스를 아래와 같은 형태로 추가하시고 위 소스를 기본하여 반영하고싶은 table 소스내에 아래와 같은 class 를 반영해주시고 마지막 하단에 실행시켜주는 스크립트 소스를 추가하시면 반응형 테이블 효과를 사용하실 수 있습니다. 반영된 예제는 아래와 같습니다. 자세한 사항은 데모사이트를 참고하여 주시기 바랍니다.

막대형, 원형, 반원, 커스트텀 몇가지 모양을 선택할수 있습니다. 사이트에서 소스를 확인할 수 있습니다. 다운로드 버튼을 클릭해서 소스와 안내서를 다운로드 받을수 있습니다.