zb5beta - 레이아웃 스킨 자료실
분홍토끼의 새 블로그 레이아웃 입니다. 기존의 사이트 방식은 운영하기도 난감하고
제 개인으로 운영하기엔 너무 방대해서 저의 특성에 맞게 하려다보니 개인적으로 사용할 블로그를 디자인하게 되었는데요.
스킨을 만들기 전에는 이럴 생각까진 아니었는데 지나치게 오래 걸려서 만들어버렸습니다.
아무튼 처음 공개하네요. 베타인데다 제가 시간이 없어서 유효성검사는 완벽히 통과하지 못하지만,
접근성이나 웹표준에는 크게 손색이 없습니다. 일단 제작은 파이어폭스를 기준으로 했으며, IE 6 에서 핵과 여러 버그 바로잡기를 통해서 거의 동일한 시각적 인터페이스를 보실 수 있습니다.
보시다시피 이 블로그 레이아웃은 모듈 템플릿과 함께 사용하셔야만이 통일감이 듭니다. 원래는 되도록 유효성 검사까지 모두 통과한 후 올리고 싶었는데 뭐 지금도 웹표준에 있어서 걸릴 것은 없다고 생각합니다. 꼭 유효성 검사만이 전부는 아니니까요.
이 스킨은 레이아웃과 모듈 모두 거의 모든 부분의 소스 코드가 수정되었습니다. table로 되어있던 불필요한 부분은 제가 거의 DIV로 수정하였으며, 게시판의 리스트 몇 개와 에디터는 테이블 구조가 적합하여 내버려뒀습니다.
스킨의 특성
==========
1. 스킨의 특성상 블로그 레이아웃과 블로그 포스트(혹은 게시판) 모듈을 함께 설치해야 디자인이 통일감이 듭니다.
2. 플러그인 스킨은 각각의 원본 제작자 분들의 저작물이라서 제가 공개하지 않겠습니다. 사실 달라진 부분 거의 없습니다.
3. 연재글 모드시 , 앞/뒤 연재글 표기로 인해 제목줄이 깨짐을 방지하기 위해 앞/뒤 연재제목을 삭제하였습니다 (주의)
4. 게시판 헤더제목 라인은 없앴으며, 사실 애초에 배포용으로 만들었던게 아니라서, 저의 목적상 또 레이아웃 폭의 제한상 제목의 길이를 염두에 두어 불필요한 투표수나 조회수 글번호는 없앴습니다 (이것은 각자 알아서 다시 넣으셔야 하는데, 문제는 고정폭 레이아웃에 고정폭 엘리먼트들이라서 하나 추가하면 CSS에서 상관있는 요소들의 치수도 전부 다 조정하셔야 한다는 점 - -;;)
5. 레이아웃과 블로그포스트 모듈만 먼저 공개합니다. 게시판형 모듈의 템플릿 골격은 
layout (분홍토끼 레이아웃 1).zip
분홍머리칼(hair)이 아닙니다. 피부가 분홍색인 것도 아닙니다.
어렸을 적 기억에 남는 시기에 한창 유행했던 분홍토끼 인형에 영감을 얻어 정한 후,
18년째 사용 중인 저의 아이디 겸 트레이드마크 입니다.
![[레벨:4]](./modules/point/icons/default/4.gif "포인트:2080point (92%), 레벨:4/30"){kind=icon}
포리
![[레벨:6]](./modules/point/icons/default/6.gif "포인트:3355point (76%), 레벨:6/30"){kind=icon}
아 네. 그부분은 layout.css 파일을 여시고,
에디터에서 '찾기' 하셔가지고 col_right 이라는 단어로 검색해보세요.
그러면 아래 부분 있는데로 가거든요.
그럼 요기서..
.col_right { float:right; width:220px; margin-top:-10px; }
* html .col_right { margin-right:-30px; }
.box { width:100%; margin:0px 0px 5px 0px; }
.col_right .box { margin:10px 0px 0px 0px; }
.col_body { float:left; padding:13px 0px 0px 0px ; margin:0px 0px 5px 0px; width:550px; }
요 색칠한 두 부분을 서로 반대로 바꿔주심 됩니다.
그럼 본문이 있는 내용단은 오른쪽으로 가고, 사이드 바가 왼쪽으로 갑니다.
#top { float:left; width:520px; height:100px; margin-left:15px; display:inline; background:url(./images/pinkhare_top_logo.gif) left bottom no-repeat; }
#top .top_01 { height:20px; }
#top .top_02 { height:64px; }
#top .top_03 { height:16px; }
이거를 첫줄의 색칠 부분을
#top { float:right; width:520px; height:100px; margin-right:15px; display:inline;
요케 바꺼주세용 ~
아. 그렇군요. 지금당장은 제가 하는일에 수정해야할 건이 있어서 직접 테스트해보지 못하겠는데요,
이건 확실치는 않지만 제 생각에는 ,, 보니까 네비게이션 첫번째 버튼의 폭이 더 넓어진것도 아닌데
내려간걸로 보아서는,,
아. 지금 소스보기를 했더니
<div class="nav_btn"><a href='./?sid=415' onfocus="this.blur();"><body text="black" link="black" vlink="black" alink="black"><a href="http://beta.zb5.zeroboard.com " target="_blank">Zb5 GO</a></a></div>
이렇게 되어있네요, 제가 궁금한 부분이 있는데요.. 이부분이 궁금합니다. body 태그를 넣으신 이유가 있나요?
게다가 지금 이 태그가 </body>로 닫혀있지 않네요. 일단 이 태그 자체의 이유가 단지 링크 스타일을 지정하시는 목적이라면~~ <span> 으로 바꿔주세요. 그럼 아래처럼요..
<div class="nav_btn"><a href='./?sid=415' onfocus="this.blur();"><a href="http://beta.zb5.zeroboard.com " target="_blank"><span text="black" link="black" vlink="black" alink="black">Zb5 GO</span></a></a></div>
근데 일단 제 생각엔 저 태그 자체가 링크 상태별 색상을 지정해주신 것 같은데 적용이 안되거든요. 저렇게 span 태그를 링크 태그보다 더 안쪽에 넣어주시면 적용될 수도 있겠네요. 굳이 색상을 변경하셔야 하면 차라리..
<div class="nav_btn"><a href='./?sid=415' onfocus="this.blur();"><a class="special_link" href="http://beta.zb5.zeroboard.com " target="_blank">Zb5 GO</a></a></div>
이렇게 클래스를 하나 부여해주시고요.
CSS 파일로 가셔서 링크에 대한 정의된 부분 근처에 새로 클래스 스타일을 넣어주세요.
.nav_btn a:link { 어쩌구 ... } --> 이런 부분이 있을거에요.
...
그럼 이 밑에
.nav_btn a.special_link:link { 요 부분에 스타일을 정의해주세요. color:#000000; ... }
.nav_btn a.special_link:visited { 요 부분에 스타일을 정의해주세요. color:#000000; ... }
.nav_btn a.special_link:hover { 요 부분에 스타일을 정의해주세요. color:#000000; ... }
.nav_btn a.special_link:active { 요 부분에 스타일을 정의해주세요. color:#000000; ... }
그리구요,, 지금 링크 태그 안에 링크 태그를 넣으셨는데.. 기존의 링크가 쓸모없는데 지우기 그러시다면,
간단히 주석처리 해주세요.
<div class="nav_btn">{*<a href='./?sid=415' onfocus="this.blur();">*}<a class="special_link" href="http://beta.zb5.zeroboard.com " target="_blank">Zb5 GO</a>{*</a>*}</div>
아마 이렇게 하면 해결될 듯 싶습니다 ~ 예쁜 블로그 완성하세요 !!
블로그레이아웃이 참 심플하네요 ^^
저기.. preview_sidebar.jpg (카데고리 나타나는부분)
파일부분이 오른쪽에있는데요; 왼쪽으로 나타나게 할려면 어떻게 해야 하나요??