본문 바로가기

카페24/블로그/카페24

카페24 인터넷쇼핑몰 제작_ 게시판디자인수정/게시판 색상변경

카페24 인터넷쇼핑몰 제작_ 게시판디자인수정/게시판 색상변경
카페24 인터넷쇼핑몰 제작_ 게시판디자인수정/게시판 색상변경

여기서 사용하는 스킨은 카페24 무료스킨 중 카페24 디자인센터의 카페24 디자인 꽃입니다.



고객센터 게시판의 색상을 위에서 아래로 바꿔보겠습니다.



카페24 쇼핑몰 관리자 페이지에 접속을 합니다.
디자인관리-> HTML 디자인 설정-> 게시관리화면New-> 게시판 목록으로 들어갑니다.



페이지 모듈 리스트-> 글목록의 편집으로 들어갑니다.



HTML 편집에서 ctrl+F로 _title02를 찾아 모두 삭제합니다.



삭제한 후 쇼핑몰의 게시판을 확인해 보면 위와 같이 바뀐 것을 확인 할 수 있을 꺼에요.



이제 HTML 편집의 소스를 모두 복사하셔서 드림위버로 가지고 오세요.
아랫부분에 <tr>을 선택하시고 Properties에서 폰트 색상과 배경색상을 설정해 주세요.
그리고 B를 눌러 폰트는 두껍게 변경해 주세요.



그런 다음 <table>을 선택하시고 Rows를 3으로 변경해 주세요.



첫번 째 칸 <tr>을 선택하시고 ctrl+X로 잘라냅니다.



잘라내고 나면 두칸이 남는 데요.
 두번째 칸에 ctrl+V로 붙여넣기 하면 위와 같이 세칸이 생성되고 두번째 칸에 붙여넣어 질꺼에요.
첫번 째 줄 <tr>을 선택하고 Properties의 빨간색 테두리 친 아이콘을 선택해서 셀을 모두 합칩니다.
세번 째 줄도 똑같이 해주세요.



첫번째 줄 <tr>을 선택하시고 배경색상과 높이(H)를 설정합니다.
세번째 줄도 똑같이 해주세요.
저는 높이를 첫번째 줄은 2로 세번째 줄은 1로 설정했습니다.
그럼 아래 그림 처럼 두께가 다르게 설정 됩니다.
첫번째, 세번째 줄을 각각 클릭해서 소스 부분에 &nbsp;를 삭제해 주세요.
변경한 소스를 모두 복사해서 HTML 편집에 붙여넣기 합니다.



여기까지 하면 게시판이 위와같이 변경되어 있을 겁니다.
이제 글목록의 보라색 줄과 보라색 아이콘을 수정해 보겠습니다.



HTML 편집 아랫쪽 글목록의 편집을 선택합니다.

 


소스 아랫부분에 위와 같은 소스가 있을 꺼에요.
빨간 색 밑줄 친 부분을 삭제하고 bgcolor부분에 
bgcolor="색상값"을 입력해 주세요. 
 


마지막으로 HTML 편집 옆의 이미지등록으로 들어가셔서
위의 아이콘을 원하는 아이콘으로 바꿉니다.



위와 같이 게시판이 수정되었습니다.
원하는 색상으로 게시판 꾸며 보시길 바랍니다.