style을 지정하는 태그들은 <head>와 </head> 사이에 들어가는게 정석이죠.
물론, body 태그 사이에 들어간 것들도 처리해주긴 합니다만...
여튼, 제가 소개시켜 드릴 방법은 익스와 파폭, 오페라, 사파리에서 확인이 되었습니다.
예제로 간단하게 사이드바의 위치를 오른쪽에서 왼쪽으로 바꿔보겠습니다.
원리는 블로그의 css 파일을 새로운 파일로 대체하는 방식입니다.
따라서, 원래의 블로그 css 파일 내용을 복사하여 새 파일을 만들고 다른 계정에 업로드 한 후 주소를 바꿔치기 하면 됩니다.
구현방식은 몇가지가 있는데요. 일단, innerHTML을 이용해서 head태그 안의 내용 마지막 부분에 <link> 태그를 포함시키는 방법입니다.
document.getElementsByTagName('head').item(0).innerHTML+="<link ... />"
파폭에서는 위와 같은 태그이름으로 객체를 불러온후 innerHTML을 편집할 수 있습니다.
위 소스의 의미는 <head>와 </head>사이에서 </head>앞부분에 <link> 태그를 추가한다는 거죠.
결론적으로 아래와 같습니다.
...
<head>
<link ~ />
<link ~ />
<link ~ /> <- 새롭게 추가
</head>
<head>
<link ~ />
<link ~ />
<link ~ /> <- 새롭게 추가
</head>
근데, 익스에서 동작을 안하더군요. all.tags 로 해도 innerHTML로 끼워넣을 수가 없더군요.
그래서, 주소를 바꿔치기 하는 방법을 쓰기로 했습니다.
소스는 더 간단해 집니다.
<script type="text/javascript">
document.getElementsByTagName('link').item(2).href="http://kimchulho.com/s.css";
</script>
굵은 글자가 새로운 css파일 주소입니다.document.getElementsByTagName('link').item(2).href="http://kimchulho.com/s.css";
</script>
소스를 파헤쳐 보면,
document. : 우리가 보고 있는 문서에서
getElementsByTagName('link'). : link 태그를 얻어온다(get)
item(2). : 특히, 2번째 link 태그를
href=xxx : 얻어온 link 태그의 href 속성을 xxx로 바꾼다.
이것을 스킨 위젯에서 html 위젯으로 만드신 후 되도록이면 제일 위에 위치시킵니다.
이것은 눈에 보이는 소스가 아니므로 어디에 있어도 자리를 차지하지 않을 뿐더러, 좀더 빨리 읽히기 위해 가급적 상단에 위치시키는 겁니다.
그러면, 잠깐 왜 2번째 link를 가져오는가에 대해 알아볼까요.
여튼간, 2번째 위치한 css파일이 블로그 스킨에 대한 css라는 것을 알 수 있습니다. blog/skin/ 아래에 있으므로... 여튼, 각 스킨에 따라 이것의 위치가 다를 수 있으니 참고하세요. 괜히 다른거 건드리면 이상해 집니다. -_-
그러면, 새로운 css파일은 어떻게 만들 것인가?
위의 소스에서 css파일의 주소를 긁어다가 브라우저에 쳐 넣으세요.
그럼, 아래와 같이 css 소스가 뜹니다. 긁으세요.
저장하세요. 웹에 올립니다. 개인 계정이나 블로그 등등 브라우저에서 접근 가능하고, 주소가 존재하면 됩니다.
저는 제 개인 계정에 올렸지요.
여기서 잠깐, 바뀐 css파일이 잘 작동하는지 알아볼겸 사이드바의 위치를 바꿔보죠.
이 두개의 위치를 바꿔주면 됩니다.
자, 그럼 우리가 긁어온 css파일을 열어보죠.
수정전
#content { width:520px; overflow:hidden; float:left; padding:10px; margin-top:10px; margin-right:20px;}
#sidebar { width:200px; overflow:hidden; float:right;}
#sidebar { width:200px; overflow:hidden; float:right;}
수정후
#content { width:520px; overflow:hidden; float:right; padding:10px; margin-top:10px; margin-left:20px;}
#sidebar { width:200px; overflow:hidden; float:left;}
#sidebar { width:200px; overflow:hidden; float:left;}
간단히 설명드리자면, content가 좌측정렬이었던 것을 우측정렬로 바꾸고, 왼쪽 바깥 여백을 20px 준것입니다. sidebar는 우측정렬에서 좌측정렬로 바꾸고요.
결과는 아래쪽에서 확인하시면 되고요.
http://girl.textcube.com/
(관블 등록안하시는게 좋을 겁니다. 한번 포스팅하면 수십개 올리므로 알리미 폭탄을 맞으십니다.)
해제 방법은 간단합니다. 아까 스킨 위젯에 적어놓은 소스 코드를 없애면 원상태로 갑니다. 내부에 전혀 타격을 주지 않는 것이므로 안심하셔도 됩니다.
부작용이나 다른 브라우저에서의 실행은 장담하지 못합니다.
기타 방법으로 각 element의 속성을 직접 건드리는 방법도 있습니다.
document.getElementById('sidebar').style.cssFloat='left';
document.getElementById('content').style.cssFloat ='right';
document.getElementById('sidebar').style.styleFloat='left';
document.getElementById('content').style.styleFloat ='right';
document.getElementById('content').style.margin ='10px 0px 0px 20px';
id로 각 요소를 읽어오고요. style의 정렬과 여백값을 수정한 것입니다.document.getElementById('content').style.cssFloat ='right';
document.getElementById('sidebar').style.styleFloat='left';
document.getElementById('content').style.styleFloat ='right';
document.getElementById('content').style.margin ='10px 0px 0px 20px';
하지만, 이렇게 하면 일일이 모든 속성값을 바꿔주어야 할때는 귀찮겠죠.
css파일 주소 대체가 좀더 현실적이라고 봅니다.
위의 방법은 본 블로그에 적용된 방법입니다.
cssFloat는 파폭에서 정렬, styleFloat는 익스에서 정렬인데, 호환이 안되더라고요.
브라우저를 구분해 줘서 실행해도 되지만 귀찮아서 두개다 써주는데 그냥 잘 돌아가네요.
스킨 편집은 기본적으로 html과 css파일 2개를 수정하는 방식일테죠.
css파일을 입맛에 맞게 수정할 수 있을 것 같네요.
틀에 해당하는 html 파일은 현재 제공되는 각 스킨이라고 생각하시면 될것 같습니다.
제한적이긴 하지만 살짝살짝 바꾸는 맛도 있겠죠.
스킨 편집 기능이 정식으로 나온다면 이런 재미도 없어질것 같네요. 후훗
