본문 바로가기

테스트페이지 갤러리펀치 - 그누보드5용 포트폴리오 테마


테스트페이지 HOME


일반PHP파일 링크입니다.

g5폴더/theme/gPunch/pages/testPage.php

본 페이지를 사용하는 이유

그누보드에서 기본으로 제공하는 내용관리, 게시판관리 및 게시판그룹으로의 링크로는 해결이 안되는 커스텀 페이지가 필요 할 경우 본 페이지를 참고하여 일반 링크 페이지를 작성하실 수 있습니다.
본페이지의 html 내용을 참고하시어 내용을 작성해 주시기 바랍니다.
테마 구매 후 본 페이지를 메모장 또는 편집프로그램(에디트플러스, 울트라 에디트, 노트패드 등)으로 오픈하신 후 아래 제공되는 HTML 샘플 구조를 베이스로 페이지를 작성하시기 바랍니다. 메뉴관리에서 http 를 포함한 링크를 넣어주시면 자동으로 활성화 됩니다.

pages 폴더를 그누보드가 설치된 폴더에 넣어주시면 아래와 같은 주소로 이용이 가능합니다.
테마 폴더가 아닌 그누보드 설치폴더로 이동하시는 경우 g5폴더/theme/gPunch/pages/_common.php 파일의 주석 내용을 확인해 주시기 바랍니다.
http://도메인/pages/testPage.php


HTML STYLE SAMPLE
아래 html 코드를 활용하여 내용관리의 html 입력으로 페이지를 꾸미실 수 있습니다.

관련 css : 설치된테마폴더/css/contents.css

class="h2_title" H2 제목 적용

class="h3_title" H3 제목 적용

class="cont_text_important" 중요한 내용
class="cont_text" 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다.
class="cont_text_info" 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다. 중요한 내용이 있을경우 사용할 수 있는 점선박스입니다.

내용의 좌측에 이미지 적용

이미지에 class="cont_img_left50p" 추가
class="cont_text" 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다.

내용의 우측에 이미지 적용

이미지에 class="cont_img_right50p" 추가
class="cont_text" 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다. 일반적인 텍스트 내용일때 사용 되는 클래스입니다.

아이콘과 함께 사용되는 도형

Font Awesome 버전 참고 -> https://fontawesome.com/v4.7.0/icons/
  • WEBSITE 웹사이트 제작 및 관리
  • MOBILE 모바일 웹사이트 제작 및 관리
  • E-commerce 쇼핑몰 제작 및 운영대행
  • Application 웹 어플리케이션 개발 및 운영

테이블 스타일

table 을 감싼 DIV에 class="basic_table" 클래스 추가

THEAD TH THEAD TH THEAD TH THEAD TD
TBODY TH TBODY TD TBODY TD TBODY TD
TBODY TH TBODY TD center TBODY TD TBODY TD
TBODY TH TBODY TD TBODY TD TBODY TD
TBODY TH TBODY TD TBODY TD TBODY TD
TFOOT TH TFOOT TD TFOOT TD TFOOT TD
TFOOT TH TFOOT TD TFOOT TD TFOOT TD center

TBODY TH TBODY TD TBODY TD TBODY TD
TBODY TD center TBODY TD TBODY TD
TBODY TH TBODY TD TBODY TD TBODY TD
TBODY TH TBODY TD TBODY TD TBODY TD
TFOOT TH TFOOT TD TFOOT TD TFOOT TD
TFOOT TD center


프로필 포토카드

1, 2, 3단 이용 가능 / profileWr1D , profileWr2D , profileWr3D

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.

웹사이팅의 디자인은 철학에서 시작하여 비전으로 제시되고 문화로 표현할려고 노력하고 있습니다. 다년간의 프로젝트 수행 능력과 고객에 대한 서비스마인드, 다양한 고객과의 커뮤니케이션 능력을 바탕으로 기업들의 수 많은 프로젝트들을 성공적으로 이끌어온 전문가 그룹입니다. 고객의 니즈에 맞는 최고의 품질과 서비스,그리고 나아가 고객이 기대하는 그 이상의 서비스를 제공함으로서 고객과의 탄탄한 신뢰를 이끌어 가겠습니다.

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.

Profile Hong gil-dong

웹사이팅은 고객의 가치를 최우선으로 하는 크리에이티브 디자인 그룹입니다.
Tool : Photoshop, illustrator, Editplus, inDesign, Figma, VScode
웹사이팅은 다양한 접점에서 브랜드의 경험을 기획하고 최적의 디자인 산출물을 제안하는 파트너 입니다. 고객님의 브랜드를 보다 가치있게 만들어 주며 귀사의 비즈니스에 새로운 생명력을 부여하여 한 차원 더 업그레이드 시키고 있습니다. 언제나 웹사이팅을 통하여 새로운 경험을 만나실 수 있습니다.


이미지 배너

1, 2, 3, 4단 이용 가능 / customBan1D + customBan2D, customBan3D, customBan4D



내용관리에 반응형 유튜브영상 삽입

유튜브 퍼가기소스 아이프레임을 감싼 DIV에 class="youtube_area" 클래스 추가