[ 프론트 버튼테마 기본형 ]

[비타주리]

테마 소개	1. 바로가기 - http://gnuworld.kr/_theme/front_1/ 2. 첨부 압축파일을 다운로드 받아 폴더째 업로드 하면 링크 페이지와 완벽하게 똑같은 페이지가 생겨납니다. 3. 이 테마는 DB를 하나도 사용하지 않고 오직 프론트에서만 구현하였습니다. 4. 따라서 로그인이나 게시판은 없습니다. 당연히 그누보드가 설치되거나 않거나 전혀 구애받지 않습니다. 5. 이벤트 페이지 내지는 소형 홈페이지용으로 적합합니다.
기본 옵션	1. 루트/config.php 를 열어보면 기본 옵션 사항이 나옵니다. 2. $xw_number = [2, 4, 4]; - 각기 모바일 세로, 모바일 가로, pc 에서의 버튼 가로 숫자입니다. 3. $pc_width = "960px"; - pc 에서 몸통 부분의 가로 픽셀값입니다. 4. $bar_padding = "10%"; - pc 에서만 나타나는 상단 회색 메뉴바의 양쪽 간격입니다. 5. $to_mail = "mail@login365.net"; - 폼메일에서 홈페이지 주인장의 메일 주소를 입력합니다. 6. $menu_button[1] = ["#db5462", "회사 소개"]; 1) 메인 페이지의 버튼 색상과 텍스트 입니다. 2) 1번부터 12번이 기본이고 번호를 줄이거나 늘이면서 옵션을 적어주면 자동으로 버튼과 링크가 만들어집니다. 3) 텍스트는 단지 메인페이지의 사각버튼에만 적용되는 것이 아니라 pc 상단의 회색 메뉴바와 좌상단의 숨은 아이콘 메뉴 버튼까지 3가지가 같이 연동됩니다.
인클루드 문서	1. 루트/common/head.php 와 루트/common/tail.php 가 모든 문서의 상하단에 인클루드되어 들어가는 공통문서입니다. 2. 인클루드 문서의 css 는 따로 만들지 않았고 php 파일에 직접 삽입하였습니다. 3. 루트/common 디렉토리 안에는 form_mail.php 라는 폼메일 액셔 문서가 하나 더 들어가 있습니다.
메인 인덱스	1. 루트/index.php 는 건드리지 않습니다. 2. 루트/main/index/index.php 가 메인 인덱스 페이지의 본문입니다. 3. 메인 페이지의 슬라이딩 갤러리 1) 슬라이딩 이미지는 루트/main/index/gallery/images 안에 있는 이미지를 불러옵니다. 2) 이 디렉토리 안에는 슬라이딩 이미지 jpg 만을 넣어두고 다른 파일은 넣지 않습니다. 3) 각기 1jpg 부터 7.jpg 까지 있는데 5.jpg 까지 있으면 5장 슬라이딩, 11.jpg 까지 있으면 11장 슬라이딩이 되어 이 디렉토리에 넣어둔 이미지 만큼의 슬라이딩 갤러리가 됩니다. 슬라이딩 이미지는 1.jpg 부터 번호를 하나씩 더한 이름을 주세요. 4) 슬라이딩 이미지의 사이즈는 원본하고 똑같이 960-540 사이즈로 맞춰 주세요. 4. css 는 문서에 직접 삽입하였습니다. 5. 나머지 부분은 본인들이 알아서 퍼블리싱 하시기 바랍니다.
폼메일 페이지	1. 메뉴 우상단의 메일 모양 아이콘을 클릭하면 홈페이지 주인장에게 손님들이 문의사항을 보낼 수 있게 간단한 폼메일을 만들어 놓았습니다. 2. 위에서 언급했듯이 폼메일의 액션 문서는 루트/common/form_mail.php 입니다.
개별 페이지	1. 개별 페이지는 기본형으로 1번에서 12번 페이지까지 있습니다. 2. 개별 페이지의 내용은 상하단 인클루드 문서를 제외한 몸통 부분은 가령 3번 문서를 예로 들면 루트/main/3/index.php 가 됩니다. 3. 몸통 문서는 단순하게 table 로 퍼블리싱 하였습니다. 역시 css 도 개별문서의 상단에 직접 넣었습니다. 본인이 원하는 방식대로 퍼블리싱 하세요. 4. 개별 문서는 동일한 패턴으로 디렉토리와 index.php 를 줄이거나 늘여주면 되겠습니다. 단 디렉토리의 숫자는 기본 옵션에서 언급한 $menu_button[n] 과 짝을 맞추어야 합니다. 5. 개별 페이지의 디렉토리의 경로는 디렉토리 안의 index.php 에서 <?php echo $this_path; ?> 로 자신의 폴더를 호출합니다.
유튜브 페이지	1. 개별 페이지 중 9번 페이지는 유튜브 페이지로 단순 퍼블리싱 이외에 자바스크립트가 들어가 있습니다. 2. <img class="click-image" alt="qKkp-47stm0" title="[MV] BOL4(볼빨간사춘기) - Travel(여행)"> 이 부분을 동일한 패턴으로 테이블의 틀에 맞추어 더하거나 빼 나가세요. 3. alt 부분에는 유튜브의 아이디를 적어 주고 title 부분에는 유튜브의 제목을 적어 주면 자동으로 유튜브 페이지가 완성됩니다. 4. 유튜브 썸네일은 유튜브 옵션에서 받아오기 때문에 썸네일이 없는 유튜브 동영상은 처음부터 사용하지 않는 것이 "정신건강"에 이롭습니다. 5. 단순하게 테이블의 형태에 맞추어 <td> 안에만 넣어주면 특별히 어려운 것은 없습니다. 6. 꼭 9번 문서일 필요는 없고 다른 번호를 주거나 2개 이상의 유튜브 페이지를 만들어도 상관이 없습니다.
포토 갤러리	1. 개별 페이지 중 10번 페이지는 포토 갤러리 페이지로 단순 퍼블리싱 이외에 자바스크립트가 들어가 있습니다. 2. <img class="click-image" src="<?php echo $this_path; ?>/images/1.jpg"> 이 부분을 동일한 패턴으로 테이블의 틀에 맞춰 더하거나 빼 나가세요. 3. src 부분이 포토 갤러리의 개별 이미지 경로입니다. 4. 모든 이미지의 사이즈는 가로와 세로가 똑같은 사이즈로 맞추는 것이 "정신건강"에 이롭습니다. 본인이 포토샵에서 조금만 시간을 투자하면 될 일입니다. 사이즈가 다른 이미지를 넣어서 보기 싫은 형태가 나오니 어찌하느냐는 질문은 "절대로" 받지 않습니다.^^ 5. 단순하게 테이블의 형태에 맞추어 <td> 안에만 넣어주면 특별히 어려운 것은 없습니다. 6. 꼭 10번 문서일 필요는 없고 다른 번호를 주거나 2개 이상의 포토 갤러리 페이지를 만들어도 상관이 없습니다.
구글지도 페이지	1. 개별 페이지 중 12번 페이지는 구글 지도를 아이프레임으로 넣은 페이지입니다. 2. 원하는 주소를 구글지도에서 찾아 아이프레임의 src 에 넣어 주세요.
이미지 바꾸기	1. 버튼 아이콘 이미지 등 이미지를 바꾸고 싶을 때는 이미지의 경로를 찾아서 바꿔 줍니다. 2. 이미지를 바꿀 때는 원본 이미지와 동일한 확장자와 동일 사이즈의 이미지로 바꾸는 것이 "정신건강"에 이롭습니다. 본인이 포토샵에서 조금만 시간을 투자하면 될 일입니다. 사이즈가 다른 이미지를 넣어서 보기 싫은 형태가 나오니 어찌하느냐는 질문은 "절대로" 받지 않습니다.^^
질문 금지 사항	1. html, css 와 연관되는 단순 퍼블리싱 질문은 "절대로" 받지 않습니다. 기본 퍼블리싱도 공부하지 않고 웹페이지를 손 댄다는 것 자체가 저로서는 "언어도단"이라 생각합니다. 2. 비타주리가 판단하기로 20분 이상이 걸리는 대답이 필요한 질문은 죄송스럽지만 사양하겠습니다.^^ 3. 쪽지 질문은 결단코 사절합니다. 쪽지는 비타주리에게서 공으로 100포인트를 날려 먹는 일입니다. 본인의 이기적인 욕심 때문에 제 포인트 100점을 헌납할 만큼 저는 대인배가 아니라는 점을 송구스럽게 생각합니다. 4. 이도 저도 안 된다면 제작의뢰를 해 주세요.
라이센스	1. 이 테마는 완전히 오픈해 놓겠습니다. 2. 이 테마의 원본이나 재가공물로 그누 사이트에서 나누기 하는 것은 환영하지만 타사이트에서 나누기 할 수는 없습니다. 3. 이 테마의 원본이나 재가공물을 "유료"로 판매하는 것은 반드시 제게 허락을 받으시기 바랍니다.
참고 사항	1. 프론트 테마라는 걸 감안해서 게시판과 페이징 처리는 순수 자바스크립트로 만들 생각입니다만 기약은 없습니다. 2. 프론트의 보안상 취약점 때문에 중요한 정보는 올리지 마세요. 뭐 로그인이 없는 테마이니 회원 개인 정보 자체가 존재하지 않는다는 점은 있겠지만요.

front_1.zip

16.09MB