Changing Style Sheet


Home > Document > Web design > CSS > Layout > Changing Style Sheet

Style Sheet 바꾸기

Style Sheet를 바꾼다는 것은 무엇을 뜻하는 걸까요? 이 말의 뜻을 여러분들에게 가장 알기 쉽게 전달하기 위해서 예를 하나 들자면, 아는 사람들은 다 알고 있는 cssZenGarden 이라는 사이트가 있습니다. 이 사이트를 보면 알 수 있지만, 오른쪽의 link들을 선택해 보면 같은 내용의 HTML file에 다른 CSS file을 적용시키므로 해서 전혀 달라진 모습의 웹 페이지 디자인을 보여 주고 있습니다.

이 사이트의 목적은, CSS를 기반으로 디자인된 사이트가 얼마나 자유 자재로 외형을 변경할 수 있는지를 보여 주기 위함인 것 같습니다. 그런데 우리가 디자인하는 웹 페이지의 경우 cssZenGarden 처럼 여러 개의 CSS file을 적용시킨 서로 다른 모습을 보여주는 것을 목적으로 다자인 하지 않은 이상 실제로 그렇게 사용하는 경우는 거의 없고 또한 그래야 할 필요까지는 없을 것 입니다. 다만 자신의 웹 페이지들을 CSS 기반으로 디자인 했을 경우, 현재의 디자인에 실증을 느꼈을 때 변경을 해 보거나, 변경을 고려하게 될 것 입니다.

하지만 여러개의 css file들을 하나의 HTML 문서에 적용할 수 있다면 cssZenGarden 같이 다양한 모습 만을 보여주는 demo 형식이 아닌, 실질적인 곳에 유용하게 사용할 수 있는 여지는 있습니다. 이 페이지에서는 어떤 식으로 CSS file을 변경할 수 있는지에 대해서 우선 알아 보도록 하겠습니다.

Style Sheet을 바꾸기 위한 scripting

Style Sheet을 바꾸기 위해서는 몰론 DOM을 이용한 scripting이 필요할 것 입니다. cssZenGarden의 경우 어떤 방식으로 .css file을 바꾸는지 조사해 보지는 않았지만 제가 보기에는 아마도 URL Query를 사용하는 듯 보였습니다. 하지만 이 페이지에서는 cssZenGarden의 방식(그게 뭔지는 모르지만)과는 전혀 상관없는, 저 만의 방식을 사용해 보겠습니다. 우선 1 단계는 HTML문서의 header section 속에 CSS file을 참조하기 위해서 link element를 하나 사용하고 link tag 속에 id를 주고 href attribute의 값은 비워 둡니다.

1 단계
...
<head>
  <link rel="stylesheet" id="CssLink" type="text/css" href="" />
</head>
...

2 단계는 위의 link tag에 붙인 id 를 이용하여 비어있는 href attribute 값에 적용할 CSS file의 url을 지정해 줍니다.

2 단계
...
<head>
  <link rel="stylesheet" id="CssLink" type="text/css" href="" />
<script type="text/javascript">
<!--
function chg_css(cssFile){
document.getElementById(CssLink).href = cssFile;
}
// -->
</script>
</head>
...

위의 과정을 마쳤으면 button등에 onclick 같은 event handler를 이용하여 chg_css function을 호출 합니다. 아래는 현재 파일에 3개의 css file(kids.css, pink_lady.css, pastel.css)을 button click으로 불러들여서 button의 background-image를 변경해 보았습니다. Test page 또한 참고해 보시기 바랍니다. 그럼 일단 여기서 페이지를 마치고 다음 번엔 이 방식을 사용하여 print page와 page layout을 변경하는 방법에 대해 다루어 보겠습니다. 그 전에 회원 여러분들도 test page를 참고하여 여러분 나름대로 print page와 page layout을 변경하는 방법을 생각해 보시기 바랍니다.





이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색