 
게시판의 디자인 및 레이아웃을 변경하고자 할 경우의 수정방법에 대해서 알아보도록 하겠습니다. 게시판의 디자인 및 레이아웃 수정시에는 CSS를 알아야 작업이 가능합니다. ※ 샘플에 사용된 버튼이미지는 파일로 첨부합니다.
홈페이지에서 해당하는 게시판을 열어보면 아래와 같이 게시판 목록이 출력됩니다. 목록에 있는 검색버튼과 글쓰기버튼을 간단히 수정해보도록 하겠습니다.
기존에 생성된 게시판 중에서 변경하고자 하는 게시판의 "디자인관리"버튼을 클릭합니다.
게시판 스킨선택에서 게시판 스킨명이 "기본게시판(PHPX)"에서 해당 색상을 변경한후 우측의 가져오기버튼을 클릭합니다.
"기본제공 스킨을 복사하시겠습니까? "라는 메시지가 나오면 확인을 누르세요.
새롭게 추가된 "사용자 스킨"을 선택하고 모두저장버튼을 눌러 저장합니다.
현재 추가된 스킨의 우측에 있는 디자인수정 버튼을 클릭합니다.
먼저 검색버튼을 수정해보도록 하겠습니다. 현재 게시판이 일반형이며 변경해야할 부분이 목록화면에 있으므로 PC웹 페이지선택에서 "목록화면(일반형)"을 선택합니다. 편집창을 클릭한후 Ctrl+F키(찾기)를 눌러 "검색"이란 키워드를 찾습니다.
해당부분을 아래와 같이 변경합니다. [변경전] [변경후] 변경후에 게시판을 확인해보면 아래와 같이 나타납니다.
위에서 보면 검색하기 버튼이 추가되었지만 다음줄에 출력되고 있으므로, 이 부분을 수정해보도록 하겠습니다. 소스에서 해당버튼의 위쪽에 위치한 class="btngroup clr" 있는데, 여기서 btngroup을 복사합니다. 게시판 스킨수정에서 "<head>"를 선택하고, 아래쪽의 default.css 파일을 클릭합니다.
새창으로 열린 CSS에서 "btngroup"를 검색(Ctrl+F)하고, 해당 소스를 아래와 같이 수정하고 저장합니다.
해당게시판을 확인해보면 다음과 같이 정상적으로 버튼이 표시됩니다.
동일한 방법으로 글쓰기버튼을 수정해보도록 하겠습니다. 다시 "목록화면(일반형)"을 선택하고, 편집창을 클릭한후 Ctrl+F키(찾기)를 눌러 "글쓰기"란 키워드를 찾아 아래와 같이 수정합니다. [변경전] [변경후] 수정후 해당게시판을 확인하면 글쓰기버튼이 변경된것을 확인할 수 있습니다.
동일한 방법으로 목록화면의 상단메뉴 디자인 및 읽기, 쓰기에서의 디자인도 변경해보시기 바랍니다.
완성화면 : http://uhkr22c.aramschool.co.kr/bbs_shop/list.htm?board_code=bbs1 댓글 2개 |
)
)
)
)
)
)
)
)
)
)
)
[응용] 쇼핑몰을 오픈마켓으로 변경하는 방법
[응용] 견적문의 게시판 만들기
