여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. 대체 스타일시트 추가
대체 스타일시트 추가
8개월전 작성
8개월전 수정

대체 스타일시트는 홈페이지를 다른 스타일로도 보여주고 싶을 때 사용할 수 있다.

주로 라이트 모드, 다크 모드 토글키 사용하는 페이지에서 이용한다.

그리고 대체 스타일시트를 이용하면 라이트 모드, 다크 모드가 아니더라도 홈페이지 테마 디자인을 조금씩 바꿔서 볼 수 있다.

대체 스타일시트

기본

대체 스타일시트 선언하는 방법에 대해 알아보자.

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 이벤트 지정하기.
Mingg`s Diary
밍구
공부 목적 블로그