대체 스타일시트는 홈페이지를 다른 스타일로도 보여주고 싶을 때 사용할 수 있다.
주로 라이트 모드, 다크 모드 토글키 사용하는 페이지에서 이용한다.
그리고 대체 스타일시트를 이용하면 라이트 모드, 다크 모드가 아니더라도 홈페이지 테마 디자인을 조금씩 바꿔서 볼 수 있다.
대체 스타일시트
기본
대체 스타일시트 선언하는 방법에 대해 알아보자.
HTML
<link href="default.css" rel="stylesheet" title="Default Style"> <link href="fancy.css" rel="alternate stylesheet" title="Fancy"> <link href="basic.css" rel="alternate stylesheet" title="Basic">
Firefox » 보기 » 문서 스타일에서 골라서 볼 수 있다.
버튼 구현하기
브라우져에서 수동으로 고르기 귀찮으므로 버튼을 구현하는 방법을 알아보자.
var style_cookie_name = "style";
var style_cookie_duration = 30;
function switch_style ( css_title )
{
var i, link_tag ;
for (i = 0, link_tag = document.getElementsByTagName("link"); i < link_tag.length; i++ ) {
if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) && link_tag[i].title) {
link_tag[i].disabled = true;
if (link_tag[i].title == css_title) {
link_tag[i].disabled = false;
}
}
set_cookie( style_cookie_name, css_title, style_cookie_duration );
}
}
function set_style_from_cookie()
{
var css_title = get_cookie( style_cookie_name );
if (css_title.length) {
switch_style( css_title );
}
}
function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain )
{
var domain_string = valid_domain ? ("; domain=" + valid_domain) : '';
document.cookie = cookie_name + "=" + encodeURIComponent( cookie_value ) + "; max-age=" + 60 * 60 * 24 * lifespan_in_days + "; path=/" + domain_string;
}
function get_cookie ( cookie_name )
{
var cookie_string = document.cookie;
if (cookie_string.length != 0) {
var cookie_value = cookie_string.match ( '(^|;)[\s]*' + cookie_name + '=([^;]*)' );
return decodeURIComponent ( cookie_value[2] );
}
return '' ;
}
사용된 코드 설명
i = 0
:
변수 i에 숫자 0을 넣는다.
link_tag = document.getElementsByTagName(“link”);
:
link_tag에 document.getElementsByTagName 함수를 이용하여 태그에 있는 div, table과 같은 특정 태그명을 가져온다.
i < link_tag.length;
:
link_tag의 길이가 i보다 길 때를 나타내는 조건을 나타낸다.
i++
:
변수 i에 넣은 숫자를 1씩 증가한다.
link_tag[i]
:
link_tag 배열의 i번째 값을 불러온다.
.rel.indexOf( “stylesheet” )
:
rel 속성의 “stylesheet” 위치 찾기
encodeURIComponent( cookie_value );
:
URI로 데이터를 전달하기 위해서 문자열을 인코딩한다.
decodeURIComponent ( cookie_value[2] );
:
encodeURIComponent를 통해서 만들어진 URI 이스케이핑을 디코드한다.
HTML
<head>
<link rel="stylesheet" type="text/css" title="light" href="styleLightTheme.css">
<link rel="alternate stylesheet" type="text/css" title="dark" href="styleDarkTheme.css">
</head>
<body onload="set_style_from_cookie()">
<div id="option_list">
<div id="option1">
Theme
<ul id="dropDownMenu">
<li onclick="switch_style('dark'); return false;" class="themes" id="dark">Dark Theme</li>
<li onclick="switch_style('light'); return false;" class="themes" id="light">Light Theme</li>
</ul>
</div>
</div>
</body>
사용된 코드 설명
onclick=”switch_style(‘dark’); return false;”
:
li 클릭 했을 때 javascript 이벤트 지정하기.
공부 목적 블로그