files/ko/web/css/alternative_style_sheets/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

---
title: Alternative style sheets
slug: Web/CSS/Alternative_style_sheets
translation_of: Web/CSS/Alternative_style_sheets
---
<p>Firefox는
 <i>
  대체 스타일시트</i>
 를 지원합니다. 대체 스타일시트를 제공하는 페이지에서는 <b>보기&gt;페이지 스타일</b> 메뉴를 이용하여 페이지에 적용될 스타일을 선택할 수 있습니다. 따라서 사용자는 자신이 원하는 다양한 종류의 페이지를 볼 수 있게 됩니다.</p>
<p>&lt;tt&gt;<a href="ko/HTML/Element/link">link</a>&lt;/tt&gt; 요소를 사용하여 웹 페이지에 대체 스타일시트를 제공할 수 있습니다.</p>
<p>예제:</p>
<pre class="eval"> &lt;link href="default.css" rel="stylesheet" type="text/css" title="Default Style"&gt;
 &lt;link href="fancy.css" rel="alternate stylesheet" type="text/css" title="Fancy"&gt;
 &lt;link href="basic.css" rel="alternate stylesheet" type="text/css" title="Basic"&gt;
</pre>
<p>위의 세 가지 스타일 시트를 제공하면, 페이지 스타일 메뉴에 "Default Style", "Fancy", "Basic" 스타일 목록이 출력됩니다. 사용자가 특정 스타일을 선택하면 페이지는 해당 스타일로 바로 다시 렌더링 됩니다.</p>
<p><code><a href="ko/HTML/Element/link">link</a></code> 또는 <code><a href="ko/HTML/Element/style">style</a></code> 요소에 <code>title</code> 속성이 포함되어 있을 경우 해당 제목(title)은 사용자에게로 노출되어 사용자가 선택할 수 있게 됩니다. 동일한 제목을 가진 스타일시트가 여럿 존재할 경우 해당 스타일시트들은 모두 적용되며, <code>title</code> 속성이 없는 스타일시트는 항상 적용됩니다.</p>
<p>기본 스타일시트에는 <code>rel="stylesheet"</code> 속성을 사용하고 대체 스타일시트에는 <code>rel="alternate stylesheet"</code>를 사용하세요. 이를 통해 Firefox는 어떤 스타일시트 제목을 처음 선택해야 할지 알 수 있으며, 대체 스타일시트를 지원하지 않는 브라우저에게 기본 스타일시트가 무엇인지를 알려줍니다.</p>
<h3 id=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C" name=".EC.8B.A4.EC.A0.9C_.EC.98.88.EC.A0.9C">실제 예제</h3>
<p>실제로 동작하는 예제는 <a class="external" href="http://developer.mozilla.org/samples/cssref/altstyles/index.html">여기에서</a> 볼 수 있습니다.</p>
<h3 id=".EB.AA.85.EC.84.B8" name=".EB.AA.85.EC.84.B8">명세</h3>
<ul>
 <li><a class="external" href="http://www.w3.org/TR/html401/present/styles.html#h-14.3">HTML 4.01: External style sheets</a></li>
</ul>