웹 개발 & 정보/그누보드

혼자 만들어본 그누보드 게시판 반응형 스킨

Rozera 2017. 12. 10. 19:21
반응형


제목 

- 그누보드 게시판 반응형 스킨 (부트스트랩 기반)


간략 소개 

- 디자인 따위는 생략하고 심플함을 내세운 그누보드 게시판 반응형 스킨


주요 정보 

- 그누보드 기본 게시판 스킨을 뼈대로 작업하였음

- 일부 디자인 (input, 버튼 등) 과 기능을 위해 부트스트랩 (최신버전) 사용 

(부트스트랩을 필수로 사용해야 적용 가능한 스킨입니다. 부트스트랩이 필요없는 버전은 따로 제작할 예정)

- 일부 디자인을 위해 Font Awesome (v4.6.3) 사용 (최근에 출시된 Font Awesome 5 버전은 테스트 해보지 않았음)

- 크롬, 파이어폭스, 오페라, ie8+ 작동 테스트 완료

- PC 브라우저에서 화면 크기를 모바일 수준으로 줄인 화면과, 실제 모바일 기기 브라우저의 화면이 다를 수 있음.


화면 크기별 구분

- PC : 최대 width ~ 768px (최대 width 값은 기본 100% 이며, 직접 지정 가능함)

- 태블릿 : 767px ~ 481px

- 모바일 : 480px ~


스크린샷 

- 스크린샷은 PC / 태블릿 / 모바일 화면 크기 순

- 태블릿 ↔ 모바일은 크게 디자인 차이가 없음


게시판 리스트 화면입니다.



게시판 글쓰기 화면입니다.



게시판 글보기 화면입니다.



해당 반응형 게시판 스킨은 링크를 통하여 직접 보실 수 있습니다. 

→ 스킨 데모 : http://sterster3832.iwinv.net/bbs/board.php?bo_table=free 사이트 유지보수 중


제가 좋아하는 컬러로 포인트를 잡고, 반응형 게시판 스킨을 제작해보았습니다.

디자인은 딱히 없습니다. 개발자 출신이라 디자인은 할 줄 모르기 때문에...


만들어놓고 보니 뭔가 정돈이 안 되어있고 내부 소스가 지저분하여 추후에 한번 뒤엎을 생각입니다.

내부적으로나 외부적으로나 좀 더 깔끔하게...


반응형