테스트 사이트 - 개발 중인 베타 버전입니다

CSS Grid를 활용한 갤러리

gridgallery.png

CSS Grid는 웹디자인 레이아웃을 위한 최고의 모듈이며 웹상에서 html 엘리먼트 배치를 자유롭게 할 수 있습니다.

 

강좌를 진행하면서 그누보드5.3x PC버전용 갤러리 스킨을 만들어봤습니다.

 

CSS Grid는 반응형에 최적화되어 있지만 그누보드5.3 기본배포판 PC버전용으로 만들었고, 모바일용은 별의미가 없어 보였습니다.

 

특징 :

이미지중 특정 번째 이미지 사이즈를 크게 했습니다. 여기서는  6번째입니다.

 

적용방법 : 

일반 게시판 스킨 적용방법과 같습니다.

1. 첨부화일 다운로드후 압축 해제

2. 그누보드설치 폴더 게시판  스킨 위치에 업로드

3. 관리자 > 게시판 추가후 그리드갤러리스킨 적용

4. 게시판 설정에서 썸네일이미지를 특정 이미지 사이즈 크기로 설정하세요.(여기서는 400x 300)

5. 하단이 자연스럽게 마무리 될려면 페이지당 이미지 갯수도 고려하세요.(여기서는 13)

 

주의사항 :

CSS Grid는 ie는 지원하지 않습니다.

 

링크 1 : 데모사이트

링크 2 : CSS Grid강좌

 

 

 

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 23개

감사합니다.~
익스에선 안되는군요ㅠㅠㅠ좋은 스킨 감사합니다!
감사합니다
감사합니다`~^^ ie에서 안되는 점이 아쉽네요..ㅜㅜ
네 도움이 되길 바랍니다.
잘쓰겠습니당~~
도움이 되길 바랍니다.
좋은시킨이네요 감사합니다~
도움되길 바랍니다.
도움되길 바랍니다.

게시판 목록

그누보드5 스킨

좋은 댓글과 좋아요는 제작자에게 큰힘이 됩니다.
글쓰기
🐛 버그신고