■ 메인화면 (index.php) 수정
브라우저에서 여러분의 홈페이지 주소를 입력했을 때 가장 먼저 실행되는 파일이 index.php 라는 것은 앞서 설명했어.
그러니 메인페이지의 첫 화면은 이 index.php 에 있다고 추측할 수 있겠지?
확인해 보자구.
에디터로 g5/myTheme 폴더에 있는 index.php 를 열어봐.
큰 구조만 살펴 보면 아래와 같아.
<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
if(G5_COMMUNITY_USE === false) {
include_once(G5_THEME_SHOP_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<h2 class="sound_only">최신글</h2>
<div class="latest_top_wr">
... 생략 ...
</div>
<div class="latest_wr">
... 생략 ...
</div>
<div class="latest_wr">
... 생략 ...
</div>
<?php
include_once(G5_THEME_PATH.'/tail.php');
▶ if (G5_IS_MOBILE) { ...if(G5_COMMUNITY_USE === false) {
이 부분은 바로 전 head.php 에서 설명했지?
폰 화면과 그누보드로 쇼핑몰만 사용할 것이면 아래쪽은 무시하고 각각(폰,쇼핑몰)으 메인화면으로 이동하라는 코드야.
이 경우에는 각각의 폴더에 있는 index.php 를 수정해야겠지?
▶ include_once(G5_THEME_PATH.'/head.php');
화면 상단의 기능과 출력을 담당하는 head.php 를 불러오고 있어.
이 head.php 에 대해서는 이미 바로 전 강의에서 설명했어.
이제 아래에 있는 html 코드 부분들이(맨 아래 2줄 바로 위까지) 바로 메인화면의 내용을 출력하는 부분들이야.
그누보드 설치후의 기본은 각 게시판의 최신글들을 출력하는 코드들을 보여 주고 있는데 이것을 모두 삭제하고 여러분이 직접 꾸민 내용을 입력하면 돼.
내가 디자이너라면 멋진 내용으로 강의하겠지만 디자인은 꽝인 만큼 그냥 문장으로 꾸며 볼께.
아래와 같이 연습용 문장을 입력해 봐.
<?php
if (!defined('_INDEX_')) define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
if(G5_COMMUNITY_USE === false) {
include_once(G5_THEME_SHOP_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<h1>내 테마 메인화면 </h1>
<h2>아버지는 나귀타고 장에 가시고</h2>
<h3>할머니는 건너마을 아저씨 댁에</h3>
<h4>고추먹고 맴맴, 달래먹고 맴맴</h4>
<?php
include_once(G5_THEME_PATH.'/tail.php');
저장해서 서버에 업로드 한 뒤, 브라우저에서 다시 메인화면을 확인해 봐.
이제 어디를 수정해야 하는지 확실하게 알았지?
■ Default.CSS
그런데 결과를 보면 조금 이상한 점이 있어.
위에 수정코드에 <h1><h2><h3><h4> 를 넣었는데 다 똑같이 보여.
나도 왜 그렇지? 하면서 열심히 찾아 보았는데 이유는 default.css에 있었어.
g5/myTheme 폴더에 가면 default.css 라는 파일이 있어.
그누보드의 전반적인 디자인을 담당하는 css 파일이야.
@charset "utf-8";
/* 초기화 */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
. . 생략 . .
여기서 7 번째줄의 아래 라인을 삭제하거나 주석 처리를 하고 저장해.
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
이제 다시 브라우저에서 새로고침해서 보면 h 태그들이 제대로 보이는 것을 확인할 수 있어.
이 자리에서 모든 h 태크의 크기를 1em 으로 정해서 발생하는 문제야
이 라인이 왜 있는지 "버그인지? 다른 이유가 있는지?" 한 참 고민해 보았는데 결국 이유를 알 수 없었어.
이 default.css 는 그누보드 디자인의 기본 css 이므로 전반적인 디자인은 모두 여기서 담당해.
여러분 만의 홈페이지가 되기 위해서 꼭 자세하게 살펴 보아야 할 파일이야.