스킨을 화이트 색상으로 변경했습니다.

이전에 제작한 스킨은 html5로 마크업한 스킨이였습니다. 
현재 ie 가 지원하지 않는 부분이 많아서 어려움이 많았습니다.
다른곳의 html5로 제작된 스킨을 보면 ie 6,7로는 도저히 볼수 없던 사이트들이 많습니다.
하위 브라우져의 호환성을 염두해두지 않고 무작정 신기술인 html5로만 마크업을 했기 때문이지요.

하지만 이전에 제작한 html5로 마크업한 Gray Border 스킨은 써핑할 정도는 되게끔 제작되었습니다.
html5는 자바스크립트에도 영향을 미칩니다.

여하튼 이번에는 비교적 가볍고, 깔끔한 스킨을 제작하려 했습니다. 
되도록이면 이미지를 사용안하려고 했으며 비교적 색상을 입히지 않고 원초적인 화이트 색상을 유지하려 했습니다.
doctype 가 xhtml 이니 만큼 하위 브라우져에도 신경을 썻지요. 

이미지라고는 배경에 들어가는 이미지 한개와 아이콘 형식의 이미지 8개가 전부입니다.
스킨이라는것이 만지면 만질수록 하위 브라우져와의 호환성이 떨어집니다.

표준브라우져에서 정상적으로 보이게끔해도 이상하게도 하위 브라우져에서는 헝클어지죠.
또한 코드 하이라이트도 손을 좀 봤습니다.
자바스크립트 압축 프로그램들이 엉망이라 압축이 안되더군요.....

나중에 스킨이 변경되는것을 염두해서 스샷을 첨부하겠습니다.
스샷 보기

demunWhite 스킨



코드 하이라이트도 손을 봤습니다.
코드 하이라이트 되는것 중에서 IE6을 정상적으로 지원한는것이 하나도 없더군요. 유일하게 SyntaxHighlighter 만이 지원을 하는데 table 로 작성이 되어 있어서 줄바꿈이 안되는 단점이 있습니다. 제일 좋은 자바스크립트지만 결국 jquery 를 선택했습니다..
치환자가 포함된 html
<div class="admin">
	<a href="[#\#_s_ad_m_link_##]" class="adminEdit">수정</a> 
	<a href="#" onclick="[#\#_s_ad_m_onclick_##]" class="adminEditNew">수정(창으로)</a> 
	<span class="adminLabel">([#\#_s_ad_s1_label_##])→<a href="#" onclick="[#\#_s_ad_s2_onclick_##]">[#\#_s_ad_s2_label_##]</a></span>
	<a href="#" onclick="[#\#_s_ad_t_onclick_##]" class="adminTb">관련글(트랙백)</a> 
	<a href="#" onclick="[#\#_s_ad_d_onclick_##]" class="adminDelete ">삭제</a>
</div>
css
.commentList img, .guestList img { position: absolute;left:7px; top:20px; width:38px; height:38px; background-color: #fff;}
.commentList p img, .guestList p img {	position: static;width: auto;height: auto;}
.commentList .cList, .guestList .cList {position: relative;padding: 30px 0;}
.commentList .name, .guestList .name {	padding-left: 65px; font-size: 16px;font-weight: bold; }
.commentList .date, .guestList .date {	font: 10px Verdana;}
.commentList p, .guestList p { padding: 20px 0 0 70px;	margin:0; line-height: 180%;}
.commentList p a:hover, .guestList p a:hover { text-decoration: underline;}
.userInfo .control { position: absolute; right: 10px;}
.control a { position: relative; top: -10px;}
.submitButton { height:50px;}

개    개