이번에는 ‘요기보드’에 대한 사용자 디자인 style.css 파일을 볼거야.
요기보드는 디자인 거의 대부분을 W3CSS 으로 꾸몄기 때문에 별도의 스타일 파일이 없어도 잘 돌아가.
그러나 만일 W3CSS에 없는 디자인이나 W3CSS의 속성을 변경할 필요가 있을 때 이 style.css 에서 내용을 추가하면 돼.
현재 스타일에는 어떤 내용이 있는지 한 번 볼까?

/**** 요기보드에서 사용하는 스타일 *******************/

.yg-bbslink a:link {color:black; text-decoration:none;}     /* 게시판 제목 링크 글자색 */
.yg-bbslink a:visited {color:silver; text-decoration:none;} /* 게시판 제목 방문후 글자색 */
.yg-silver,.yg-hover-silver:hover{color:#000; background-color:silver} /* 기본 은색*/
.yg-clearfix::after{ clear:both; content:""; display:block; }  

.yg-w10 { width: 10%}  /* 넓이% */
.yg-w20 { width: 20%}
.yg-w100 { width: 100%}

.yg-noflow { /* 게시글 작성자가 길때 아래줄로 안가고 ...로 표시 */
  text-overflow: ellipsis; 
  overflow: hidden; 
  white-space:nowrap;
}

/**** 내 스타일은 여기서 부터 사용하세요 *************/

body {
  background-color: #eee;
  font-family: '맑은 고딕',나눔고딕,돋움,Dotum,굴림,Gulim,'Apple SD Gothic Neo',sans-serif;
  font-size: 15px;
  color: #222;
  letter-spacing: -0.05em;
  line-height: 1.8;
}

몇 줄 없지?
요기보드에서는 가급적 최대한 W3CSS 를 사용했기 때문이야.
W3CSS 에는 없어서 새로 만든 CSS 에는 이름 앞에 yg- 라는 전치사를 붙여서 요기보드용 CSS 라는 표시를 했어.
현재는 w3css 의 스타일 외에 요기보드 전용으로 사용한 스타일은 다음 몇개 밖에 없어.

• yg-bbslink : 게시판 볼때 게시글 링크의 색상과, 읽고 났을 때의 색상
• yg-silver : 리스트 상단의 제목 부분의 색상
• yg-w10, 20, 100 : 테이블의 컬럼별 간격 비율(%)
• yg-noflow : 게시글 리스트에서 작성자 이름이 길때 아래 줄로 밀려나가는 것을 방지

여기에 여러분의 스타일을 추가하고 싶으면 아래쪽에 추가하고 사용하면 되겠지?
예를들어 설치할 때 기본으로 사용하고 있는 스타일은 이곳에 두었어.
이곳에서 body 를 수정하면 내 웹페이지의 본문자리의 기본 스타일이 잡힐거야.

다른 웹보드를 보면 무슨 스타일이 그렇게 많은지 도대체 정신이 없는 경우가 많아.
그것을 찾아 쓰느니 차라리 그냥 내가 새로 만드는게 더 좋을 정도이니..
요기보드에서 w3css 이외에 기본 스타일을 최소화한 이유도 이 때문이야.
w3css 이외의 스타일은 여러분이 직접 만들어 쓰는게 오히려 머리가 더 편할 것 같아서..

▶ 내 디자인 만들기

학습에서 사용한 ‘요기보드’의 기본 디자인은 w3css 의 기본 템플릿 화면 중 하나를 기초로 만들었어.
이 디자인 양식은 요즘 홈페이지와 스마트폰 양쪽에서 다 무난히 사용할 수 있어서 꽤 인기 있는 형태이기는 하지만 사용자마다 취향이 다를 수 있을 거야.

디자인을 변경하기 우해 여러분이 가장 먼저 살펴봐야 할 곳은 우선 w3css 의 공식 사이트야

홈페이지의 메인화면을 html/css와 부트스트랩만으로 완성하는 게 시작이야.
메인화면이 완성되면 내가 한 것처럼 이제 이 파일의 내용을 상단, 사이드, 본문, 하단으로 잘라서 layout1, 2.php menu_sub.php footer.php로 나누고 손질하는 거야.
이름은 꼭 layout1, layout2, menu_sub…가 아니어도 좋아.
아니, 초보일 때는 꼭 다른 이름으로 해.(예: my-layout.php my-submenu . . 처럼 다른 이름으로)
그리고 include(layout1.php) 자리를 include(my-layout.php) 이런식으로 바꿔 주면 되잖아.

그래야 요기보드 기본 디자인도 쓰고, 여러분의 디자인을 추가하는 것이니까.
또 여러분의 디자인 파일로 적용했는데 제대로 작동 안하면 요기보드의 기본파일과 비교해 보면서 어디가 틀려서 안되는 걸까?. . 하면서 비교해 보면 좋을거야.

본문의 게시판이나 입력폼도 마찬가지야.
게시판리스트의 게시글 출력 테이블 디자인이나 형태를 바꾸고 싶으면. .

1. bbs_list.php 파일을 bbs_list2.php 같은 이름으로 복사한다.
2. bbs_list2.php 파일을 열어 디자인 또는 기능을 변경한다.
3. bbs.php 파일에서 include(YOGI . '/bbs_list.php) 라는 라인을 찾아 include(YOGI . '/bbs_list2.php) 로 수정한다.

이렇게 하면 기존 bbs_list.php 는 그대로 있으면서 여러분의 새 리스트가 만들어 지는거지.
어때 쉬울 것 같지 않아?
멋진 홈페이지가 완성되면 나에게도 꼭 알려줘…. ^^