야후처럼 동적으로 CSS로딩해서 적용하기
작성자 정보
- 관리자 작성
- 작성일
컨텐츠 정보
- 6,709 조회
- 5 댓글
-
목록
본문
야후(www.yahoo.co.kr)의 초기 메인페이지의 상단을 보면 색상별로 작은 버튼들이 나열되어 있고 클릭시 페이지 이동없이 메인페이지의 변화가 일어나는 것을 알수 있습니다.자바스크립트와 CSS를 이용해 동적으로 CSS를 로딩해 페이지에 삽입해 주고 로딩한 CSS를 쿠키로 저장하는 방법인데 샘플을 이용해 간단하게 구현해 보겠습니다.
이것을 구현하려면 3가지의 요소가 필요합니다.
먼저 CSS를 로딩해줄 문서(sample.html)와 문서에 적용할 CSS문서들(2가지정도 만들어서 적용해보겠습니다) 그리고 쿠키와 CSS삽입을 위한 자바스크립트입니다.간단하게 배경만 바뀌는 스타일을 적용해보겠습니다.
1.로딩해줄 문서. (sample.html>
2.스타일문서 2개 만들기(default.css와 bgcolor.css)
3.그리고 CSS로딩과 쿠키를 담당할 자바스크립트(theme.js 첨부파일 참조)
현재 소다팝에서는 배경만 바뀌는 방법만 사용하고 있는데 적용방법에 따라서 홈페이지 자체가 완전히 다른모양으로 바뀔수 있으니 다양한 방법으로 적용해보시기 바랍니다.첨부파일을 다운받아 살펴보시면 금방 적용할수 있으리라 생각됩니다.
이번 튜토리얼은 오렐리의 Creating Themes With JavaScript and CSS를 참조했습니다.
자세한 정보는 아래링크를 참조해 보시기 바랍니다.
http://www.oreillynet.com/pub/s_lib/11
이것을 구현하려면 3가지의 요소가 필요합니다.
먼저 CSS를 로딩해줄 문서(sample.html)와 문서에 적용할 CSS문서들(2가지정도 만들어서 적용해보겠습니다) 그리고 쿠키와 CSS삽입을 위한 자바스크립트입니다.간단하게 배경만 바뀌는 스타일을 적용해보겠습니다.
1.로딩해줄 문서. (sample.html>
<html>
<head>
<title>CSS로딩</title>
<script src="themes.js"></script>
</head>
<body>
<div id="themesbar"><a href="javascript:setTheme('default')">바탕색변하기1</a> <a href="javascript:setTheme('bgcolor')">바탕색변하기2</a></div>
<h1>샘플</h1>
<p>샘플</p>
</body>
</html>
<head>
<title>CSS로딩</title>
<script src="themes.js"></script>
</head>
<body>
<div id="themesbar"><a href="javascript:setTheme('default')">바탕색변하기1</a> <a href="javascript:setTheme('bgcolor')">바탕색변하기2</a></div>
<h1>샘플</h1>
<p>샘플</p>
</body>
</html>
2.스타일문서 2개 만들기(default.css와 bgcolor.css)
/**** default.css ****/
/**** 배경색이 #ffffcc ****/
body {
font-family:Verdana, sans-serif;
background-color:#ffffcc;
font-size:10pt;
padding:0px 40px 0px 90px;
}
#themesbar {
background-color:#eeeeff;
padding:2px;
border:1px outset blue;
}
/**** bgcolor.css ****/
/**** 배경색이 #ff0000 ****/
body {
font-family:Verdana, sans-serif;
background-color:#ff0000;
font-size:10pt;
padding:0px 40px 0px 90px;
}
#themesbar {
background-color:#eeeeff;
padding:2px;
border:1px outset blue;
}
/**** 배경색이 #ffffcc ****/
body {
font-family:Verdana, sans-serif;
background-color:#ffffcc;
font-size:10pt;
padding:0px 40px 0px 90px;
}
#themesbar {
background-color:#eeeeff;
padding:2px;
border:1px outset blue;
}
/**** bgcolor.css ****/
/**** 배경색이 #ff0000 ****/
body {
font-family:Verdana, sans-serif;
background-color:#ff0000;
font-size:10pt;
padding:0px 40px 0px 90px;
}
#themesbar {
background-color:#eeeeff;
padding:2px;
border:1px outset blue;
}
3.그리고 CSS로딩과 쿠키를 담당할 자바스크립트(theme.js 첨부파일 참조)
theme.js문서의 마지막부분에
var THEME_KEY = "theme"; // this key is used to store the selected theme.
var THEMES_FOLDER_PATH = "";//css문서의 위치
var DEFAULT_THEME = "default";//처음 페이지 열때 우선적으로 로딩해줄 CSS문서명(확장자 없음)
부분이 있습니다.
var THEMES_FOLDER_PATH = "";//css문서의 위치
위 부분은 사이트에 맞게 수정하시기 바랍니다.
소다팝은 "/"로 했습니다.
var THEME_KEY = "theme"; // this key is used to store the selected theme.
var THEMES_FOLDER_PATH = "";//css문서의 위치
var DEFAULT_THEME = "default";//처음 페이지 열때 우선적으로 로딩해줄 CSS문서명(확장자 없음)
부분이 있습니다.
var THEMES_FOLDER_PATH = "";//css문서의 위치
위 부분은 사이트에 맞게 수정하시기 바랍니다.
소다팝은 "/"로 했습니다.
현재 소다팝에서는 배경만 바뀌는 방법만 사용하고 있는데 적용방법에 따라서 홈페이지 자체가 완전히 다른모양으로 바뀔수 있으니 다양한 방법으로 적용해보시기 바랍니다.첨부파일을 다운받아 살펴보시면 금방 적용할수 있으리라 생각됩니다.
이번 튜토리얼은 오렐리의 Creating Themes With JavaScript and CSS를 참조했습니다.
자세한 정보는 아래링크를 참조해 보시기 바랍니다.
http://www.oreillynet.com/pub/s_lib/11
관련자료
-
첨부등록일 2008.04.11 13:09등록일 2008.06.24 01:28
-
이전
댓글 5
MINICOOP님의 댓글
- MINICOOP
- 작성일
감사합니다...
산적님의 댓글
- 산적
- 작성일
배경화면 2개에서 4개 6개까지 확장 할려니
어딜 고쳐야되는지 모르겠네여..
어딜 고쳐야되는지 모르겠네여..
관리자님의 댓글
- 관리자
- 작성일
4개짜리 적용한 샘플 추가했습니다.확인해 보세요.
관리자님의 댓글
- 관리자
- 작성일
튜토리얼 게시판에 페이지 부분 소스를 넣는걸 깜박했습니다.게시물이 보이지 않아 당황하셨던 분들께 죄송합니다.
컴퓨터나라님의 댓글
- 컴퓨터나라
- 작성일
원하던 것을찾앗습니다.
좀더 빨리 찾아더라면
감사합니다.
좀더 빨리 찾아더라면
감사합니다.