수정 팁에 앞서서 다이나믹 사이트의 기본구조에 대해 알아봅시다.
다이나믹 사이트는 Dynamic 레이아웃으로 5개를 생성했습니다.
1. 메인용 (좌측패널 부분 없는) --> 컬러셋 : 블루
2. 질문/대답/버그신고 --> 컬러셋 : 퍼플
3. 다이나믹 수정팁 --> 컬러셋 : 레드
4. 업데이트 및 패치 --> 컬러셋 : 그레이
5. Dynamic 사용자 설명서 --> 컬러셋 : 블루
위처럼 레이아웃을 5개 만들고
메인페이지는 페이지를 1개 생성, 나머지 4개의 게시판 생성해서 연결해 준것입니다.
이미 대부분의 유저가 아시겠지만,
이렇게 해놓으면 각각의 게시판, 또는 페이지의 스타일을 따로따로 설정할 수 있습니다.
이제 본론으로 넘어와서 레이아웃 수정방법은 2가지가 있습니다.
1. 전체레이아웃의 틀을 동일하게 변경할 경우 -- > http://sjap97.dothome.co.kr/899
이 방법을 사용하면 새로 생성하는 레이아웃까지 모든 레이아웃의 스타일이 변합니다.
2. 현 사이트의 질문/대답/버그신고 게시판처럼 수정하기
a. 위의 설명처럼 레이아웃과 게시판을 생성 및 연결해 줍니다.
b. 해당 레이아웃의 편집버튼을 눌러서 편집화면으로 이동합니다. (스샷참고)
3. CSS 항목에 아래 코드를 추가해 주고 빨간부분의 216px을 원하는 크기로 적어줍니다.
(저는 대부분의 위젯 기본크기인 166px로 설정했습니다. )
#container #left { float:left; width:166px; margin:31px 0 0 19px; _margin:31px 0 0 9px; overflow:hidden; }
#container #my_path { float:left; width:695px; margin:32px 0 0 8px; _margin-left:10px; height:28px; padding-top:6px; border:1px solid #BABABA; }
4. HTML 항목에서 아래 구문을 찾아서 파란 부분의 645px를 원하는 값으로 수정해 줍니다.
(참고로 3번에서 216 을 166으로 바꿨으니 두 숫자의 차이인 50을 더해서 입력해 줍니다.)
# 만약 3번에서 216px를 180px로 바꾸셨다면 아래 645px이 적한 자리에 216-180=36을 더한 값을 넣어주면 됩니다.)
.sc #container #right { width:695px!important; }
5. 위젯 코드를 코드창에 넣어주시고 각자의 필요에 맞게 설정을 해줍니다.
6. 아래와 같은 결과를 보실 수 있습니다.
필요로 하는 분들이 있어서 급하게 작성했습니다. 기본기가 있어야 무리없이 이해가 가실 겁니다. 설명이 너무 어렵다면 어려운 부분에 댓글을 남겨주세요.
더 자세하게 설명해 드리지요.
다이나믹 (메인) 오른쪽 상단에 로그인창 달기
