mozilla

Revision 639301 of Media

  • Revision slug: Web/CSS/Getting_Started/Media
  • Revision title: Media
  • Revision id: 639301
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

이 입문서의 많은 부분이 문서를 디스플레이하는 방법을 지정하는 데 사용하는 CSS 속성과 값들에 중점을 두어 왔습니다.

이 페이지는 CSS 스타일 시트의 목적(purposes)과 구조(structure)를 다시한번 살펴봅니다.

정보: 미디어

CSS의 목적은 문서가 사용자에게 제공되는(presented) 방식을 지정하도록 하는 것입니다. 문서제공(presentation)은 하나 이상의 형태(form)를 취할 수 있습니다.

예를 들면, 이 페이지는 디스플레이 장치를 통해 읽을 수 있습니다. 그러나 많은 청중들을 위해서 스크린에 프로젝트되거나 또는 인쇄되길 바랄 수도 있습니다. 이들 각각의 미디어(매체, media)는 각기 다른 특성(characteristics)을 가질 수 있습니다. CSS는 각기 다른 미디어에 각각 다른 방식으로 문서를 제공하는 방법들을 제공합니다.

어떤 유형의 미디어에 한정된 규칙들을 제공하려면 @media, 그 뒤에 미디어 유형(media type), 그 뒤에 휘어진 괄호(curly braces)로 감싼 규칙들을 사용하세요.

Example
웹 사이트에 있는 문서는 사용자가 사이트(site)를 돌아 다닐 수 있게하는 네비게이션 영역(navigation area)을 가지고 있습니다.

마크업 언어에서, 네비게이션 영역의 부모 엘리먼트는 아이디(id) nav-area를 가지고 있습니다.

문서가 인쇄되면, 이 네비게이션 영역은 아무 의미가 없습니다. 따라서 스타일 시트는 이 영역을 완전히 제거 합니다:

@media print {
  #nav-area {display: none;}
  }

몇가지 흔한 미디어 유형(type)은 다음과 같습니다:

screen Color computer display 컬러 컴퓨터 디스플레이
print 페이지를 가진 미디어
projection 프로젝션 디스플레이
all 모든 미디어(디폴트, default)

 

More details
어떤 한 집합의 규칙들의 미디어 유형을 다른 방식으로 지정할 수 있습니다.

문서의 마크업 언어는 스타일 시트가 문서에 링크될때 마디어 유형이 지정되도록 할 수도 있습니다. 예를 들면, HTML에서 옵션으로 LINK 택내에 media 속성으로 미디어 유형을 지정할 수 있습니다.

CSS에선 스타일 시트의 처음에 media을 사용해서 미디어 유형을 지정하고 있을 수 있는 URL으로부터 다른 스타일 시트를 임포트(import)할 수 있습니다.

이들 테크닉을 사용함으로써, 다른 미디어 유형들에 대한 스타일 규칙들을 다른 파일들에 분리해 둘 수 있습니다. 때론 이것이 스타일 시트들을 구조화하는 유용한 방법입니다.

미디어 유형에 관한 완전한 설명을 원하시면, CSS 규약의 Media을 보세요.

이 입문서의 이 후 페이지에 display속성에 대한 더 많은 예제들이 있습니다:XML data

인쇄(Printing)

CSS는 인쇄(printing) 그리고 일반적으로 페이지를 가진 미디어에 대한 몇가지 특별한 지원을 하고 있습니다.

@page 규칙은 페이지 마진(page margin)을 지정할 수 있습니다. 양면 인쇄(double-sided printing)을 원하시면, @page:left 그리고 @page:right 으로 마진을 분리해서 지정할 수 있습니다.

인쇄 미디어에 대해서, 보통 인치(in) 그리고 포인트 (pt = 1/72 inch) 아니면 센티미터 (cm) 그리고 밀리미터(mm) 같은 적합한 길이 유닛을 사용합니다. 폰트 크기와의 매칭(match)을 위해 ems (em), 그리고 백분율(%)을 사용하는 것도 똑같이 적합합니다.

Examples
이 규칙은 4 면(side) 전체에 1인치의 페이지 마진을 정합니다:
@page {margin: 1in;}

이 규칙은 모든 H1 엘리먼트가 새로운 페이지에서 시작되도록 합니다:

h1 {page-break-before: always;}

 

More details
페이지를 가진 미디어에 대한 CSS 지원의 모든 설명을 원하시면, CSS 규약의 Paged media을 보세요.

CSS의 다른 기능들과 같이, 인쇄도 브라우저와 그 세팅에 의존합니다. 예를 들면, 모질라는 인쇄시 디폴트 마진, 헤더(header), 푸터(footer)를 지원합니다. 다른 사용자가 문서를 인쇄할 때, 그들이 사용하는 브라우저와 세팅을 예상할 수 없습니다. 따라서 결과를 완전하게 콘트롤할 수 없을 것입니다.

사용자 인터페이스

CSS는 컴퓨터 디스플레이 같은 사용자 인터페이스를 지원하는 장치들을 위한 몇가지의 특별한 속성들을 가지고 있습니다. 이들 속성들은 사용자가 인터페이스를 사용해 나감에 따라 다이나믹하게 문서의 모양을 바꿉니다.

사용자 인터페이스를 가진 장치를 위한 특별한 미디어 유형은 없습니다.

5개의 특별한 선별자들이 있습니다:

Selector Selects
E:hover 그 위에 포인터가 놓여진 모든 E 엘리먼트
E:focus 키보드 포커스(focus)를 가진 모든 E 엘리먼트
E:active 현재 사용자 액션(current user action)에 관여된 E 엘리먼트
E:link 사용자가 최근에 방문하지 않은 URL의 하이퍼링크(hyperlink)인 모든 E 엘리먼트
E:visited 사용자가 최근에 방문 URL의 하이퍼링크인 모든 E 엘리먼트

cursor 속성은 포인터의 모양을 지정합니다: 몇가지 흔한 모양은 다음과 같습니다. 브라우저에 있는 실제 포인터 모양을 보고 싶으시면 마우스 포인터를 이 리스트의 아이템위에 올려놓으세요:

Selector Selects
pointer 링크를 가리킴
wait 프로그램이 입력(input)을 받을 수 없다는 것을 가리킴
progress 프로그램이 작동하고 있지만, 여전히 입력을 받을 수 있다는 것을 가리킴
default 디폴트(보통 화살표)

outline 속성은 키보드 포거스를 나타내기위해서 자주 사용되는 아웃라인(outline)을 만들어 냅니다. 이 속성의 값은 개개의 면(side)를 지정할 수 없다는 것을 제외하고는 border 속성과 비슷합니다.

사용자 인터페이스의 몇가지 다른 기능들은 보통 속성(attribute)을 사용해서 구현됩니다(implemented). 예를 들면, 사용할 수 없거나(disabled) 또는 읽기 전용(read-only)인 엘리먼트는 disabled 속성(attribute) 이나 readonly 속성(attribute)을 가집니다. 선별자는 이들 속성들을 다른 속성들 과 마찮가지로 각진 괄호(square brackets)를 사용해서 지정할 수 있습니다: {{ mediawiki.external('disabled') }} 이나 {{ mediawiki.external('readonly') }}

Example
These rules specify styles for a button that changes dynamically as the user interacts with it:
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }

이 위키(wiki)는 페이지에 사용자 인터페이스를 지원하지 않습니다. 따라서 이들 버튼들은 "클릭(click)"할 수 없습니다. 여기 이 아이디어를 설명해주는 몇가지 고정 이미지(static image)들이 있습니다:

Click Me Click Me Click Me
 
disabled normal active

완전하게 작동하는 버튼은 또한 디폴트 상태일때 전체 버튼주위에 어두운 테두리(outline)을 가지고 있으며 키보드 포거스 상태일 때 버튼 면(button face)에 점선 테두리를 가집니다. 포인터가 위에 있을땐 호버 효과(hover effect)도 가질 수 있습니다.

More details
CSS 에서의 사용자 인터페이스에 관한 정보를 더 원하시면, CSS 규약의 User interface를 보세요.

이 입문서 II 부에 사용자 인터페이스를 위한 모질라 마크업 언어, XUL에 대한 예제가 있습니다.

액션: 문서 인쇄

새로운 HTML 문서 doc4.html를 만드세요. 다음의 내용물을 복사해서 붙여넣으시되, 스크롤해서 전부 다 붙여 넣도록 하세요:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>

<HEAD>
<TITLE>Print sample</TITLE>
<LINK rel="stylesheet" type="text/css" href="style4.css"></strong>
</HEAD>

<BODY>
<H1>Section A</H1>
<P>This is the first section...</P>

<H1>Section B</H1>
<P>This is the second section...</P>

<DIV id="print-head">
Heading for paged media
</DIV>

<DIV id="print-foot">
Page: 
</DIV>

</BODY>
</HTML>

새 스타일 시트 style4.css를 만드세요. 다음의 내용물을 복사해서 붙여넣으시되, 스크롤해서 전부 다 붙여 넣도록 하세요:

/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */

이 문서를 브라우저로 보실 때, 브라우저는 디폴트 스타일을 사용하고 있습니다.

문서를 인쇄(또는 미리보기, preview)하실 때, 스타일 시트는 각 섹션을 분리된 페이지에 위치시키고, 헤더와 푸터를 각 페이지에 더합니다. 브라우저가 카운터(counter)를 지원하면 푸터(footer)에 페이지 번호를 더합니다.

Heading
Section A
This is the first section...
Page: 1
Heading
Section B
This is the second section...
Page: 2

 

Challenge
이전 페이지의 링크를 사용해서 CSS 규약을 읽어 보세요.

거기서 새로운 인쇄-용(print-specific) CSS 파일을 어떻게 스타일 시트로 임포트(import)하는지에 관한 설명을 찾아보세요.

마우스 포인터가 위에 오면 헤딩(headings)이 푸른색이 되게 만드세요.

그럼 다음은?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

지금까지, 이 입문서의 모든 스타일 규칙들이 파일에 지정되었습니다. 규칙과 그 값들은 고정되어있습니다. 다음 페이지에서는 어떻게 프로그래밍 언어를 사용해서 규칙들을 다이나믹하게 바꿀수 있는지 기술합니다: JavaScript

{{ languages( { "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pl": "pl/CSS/Na_pocz\u0105tek/Media" } ) }}

Revision Source

<p>이 입문서의 많은 부분이 문서를 디스플레이하는 방법을 지정하는 데 사용하는 CSS 속성과 값들에 중점을 두어 왔습니다.</p>
<p>이 페이지는 CSS 스타일 시트의 목적(purposes)과 구조(structure)를 다시한번 살펴봅니다.</p>
<h3 id=".EC.A0.95.EB.B3.B4:_.EB.AF.B8.EB.94.94.EC.96.B4" name=".EC.A0.95.EB.B3.B4:_.EB.AF.B8.EB.94.94.EC.96.B4">정보: 미디어</h3>
<p>CSS의 목적은 문서가 사용자에게 제공되는(presented) 방식을 지정하도록 하는 것입니다. 문서제공(presentation)은 하나 이상의 형태(form)를 취할 수 있습니다.</p>
<p>예를 들면, 이 페이지는 디스플레이 장치를 통해 읽을 수 있습니다. 그러나 많은 청중들을 위해서 스크린에 프로젝트되거나 또는 인쇄되길 바랄 수도 있습니다. 이들 각각의 미디어(매체, media)는 각기 다른 특성(characteristics)을 가질 수 있습니다. CSS는 각기 다른 미디어에 각각 다른 방식으로 문서를 제공하는 방법들을 제공합니다.</p>
<p>어떤 유형의 미디어에 한정된 규칙들을 제공하려면 <code>@media</code>, 그 뒤에 미디어 유형(media type), 그 뒤에 휘어진 괄호(curly braces)로 감싼 규칙들을 사용하세요.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;width:100%">
 <caption style="font-weight:bold; text-align:left;">
  Example</caption>
 <tbody>
  <tr>
   <td>웹 사이트에 있는 문서는 사용자가 사이트(site)를 돌아 다닐 수 있게하는 네비게이션 영역(navigation area)을 가지고 있습니다.
    <p>마크업 언어에서, 네비게이션 영역의 부모 엘리먼트는 아이디(id) <code>nav-area</code>를 가지고 있습니다.</p>
    <p>문서가 인쇄되면, 이 네비게이션 영역은 아무 의미가 없습니다. 따라서 스타일 시트는 이 영역을 완전히 제거 합니다:</p>
    <div style="width:30em;">
     <pre class="eval">
@media print {
  #nav-area {display: none;}
  }
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<p>몇가지 흔한 미디어 유형(type)은 다음과 같습니다:</p>
<table style="margin-left:2em;">
 <tbody>
  <tr>
   <td><code>screen</code></td>
   <td>Color computer display 컬러 컴퓨터 디스플레이</td>
  </tr>
  <tr>
   <td><code>print</code></td>
   <td>페이지를 가진 미디어</td>
  </tr>
  <tr>
   <td style="padding-right:1em;"><code>projection</code></td>
   <td>프로젝션 디스플레이</td>
  </tr>
  <tr>
   <td><code>all</code></td>
   <td>모든 미디어(디폴트, default)</td>
  </tr>
 </tbody>
</table>
<p>&nbsp;</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; width:100%;">
 <caption style="font-weight:bold; text-align:left;">
  More details</caption>
 <tbody>
  <tr>
   <td>어떤 한 집합의 규칙들의 미디어 유형을 다른 방식으로 지정할 수 있습니다.
    <p>문서의 마크업 언어는 스타일 시트가 문서에 링크될때 마디어 유형이 지정되도록 할 수도 있습니다. 예를 들면, HTML에서 옵션으로 <code>LINK</code> 택내에 <code>media</code> 속성으로 미디어 유형을 지정할 수 있습니다.</p>
    <p>CSS에선 스타일 시트의 처음에 <code>media</code>을 사용해서 미디어 유형을 지정하고 있을 수 있는 URL으로부터 다른 스타일 시트를 임포트(import)할 수 있습니다.</p>
    <p>이들 테크닉을 사용함으로써, 다른 미디어 유형들에 대한 스타일 규칙들을 다른 파일들에 분리해 둘 수 있습니다. 때론 이것이 스타일 시트들을 구조화하는 유용한 방법입니다.</p>
    <p>미디어 유형에 관한 완전한 설명을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/media.html">Media</a>을 보세요.</p>
    <p>이 입문서의 이 후 페이지에 <code>display</code>속성에 대한 더 많은 예제들이 있습니다:<a href="ko/CSS/Getting_Started/XML_data">XML data</a></p>
   </td>
  </tr>
 </tbody>
</table>
<h4 id=".EC.9D.B8.EC.87.84.28Printing.29" name=".EC.9D.B8.EC.87.84.28Printing.29">인쇄(Printing)</h4>
<p>CSS는 인쇄(printing) 그리고 일반적으로 페이지를 가진 미디어에 대한 몇가지 특별한 지원을 하고 있습니다.</p>
<p><code>@page</code> 규칙은 페이지 마진(page margin)을 지정할 수 있습니다. 양면 인쇄(double-sided printing)을 원하시면, <code>@page:left</code> 그리고 <code>@page:right</code> 으로 마진을 분리해서 지정할 수 있습니다.</p>
<p>인쇄 미디어에 대해서, 보통 인치(<code>in</code>) 그리고 포인트 (<code>pt</code> = 1/72 inch) 아니면 센티미터 (<code>cm</code>) 그리고 밀리미터(<code>mm</code>) 같은 적합한 길이 유닛을 사용합니다. 폰트 크기와의 매칭(match)을 위해 ems (<code>em</code>), 그리고 백분율(<code>%</code>)을 사용하는 것도 똑같이 적합합니다.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; width:100%;">
 <caption style="font-weight:bold; text-align:left;">
  Examples</caption>
 <tbody>
  <tr>
   <td>이 규칙은 4 면(side) 전체에 1인치의 페이지 마진을 정합니다:
    <div style="width:30em;">
     <pre class="eval">
@page {margin: 1in;}
</pre>
    </div>
    <p>이 규칙은 모든 <small>H1</small> 엘리먼트가 새로운 페이지에서 시작되도록 합니다:</p>
    <div style="width:30em;">
     <pre class="eval">
h1 {page-break-before: always;}
</pre>
    </div>
   </td>
  </tr>
 </tbody>
</table>
<p>&nbsp;</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; width:100%;">
 <caption style="font-weight:bold; text-align:left;">
  More details</caption>
 <tbody>
  <tr>
   <td>페이지를 가진 미디어에 대한 CSS 지원의 모든 설명을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/page.html">Paged media</a>을 보세요.
    <p>CSS의 다른 기능들과 같이, 인쇄도 브라우저와 그 세팅에 의존합니다. 예를 들면, 모질라는 인쇄시 디폴트 마진, 헤더(header), 푸터(footer)를 지원합니다. 다른 사용자가 문서를 인쇄할 때, 그들이 사용하는 브라우저와 세팅을 예상할 수 없습니다. 따라서 결과를 완전하게 콘트롤할 수 없을 것입니다.</p>
   </td>
  </tr>
 </tbody>
</table>
<h4 id=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4" name=".EC.82.AC.EC.9A.A9.EC.9E.90_.EC.9D.B8.ED.84.B0.ED.8E.98.EC.9D.B4.EC.8A.A4">사용자 인터페이스</h4>
<p>CSS는 컴퓨터 디스플레이 같은 사용자 인터페이스를 지원하는 장치들을 위한 몇가지의 특별한 속성들을 가지고 있습니다. 이들 속성들은 사용자가 인터페이스를 사용해 나감에 따라 다이나믹하게 문서의 모양을 바꿉니다.</p>
<p>사용자 인터페이스를 가진 장치를 위한 특별한 미디어 유형은 없습니다.</p>
<p>5개의 특별한 선별자들이 있습니다:</p>
<table style="margin-left:2em;">
 <tbody>
  <tr>
   <td style="width:10em;"><strong>Selector</strong></td>
   <td><strong>Selects</strong></td>
  </tr>
  <tr>
   <td><code>E:hover</code></td>
   <td>그 위에 포인터가 놓여진 모든 E 엘리먼트</td>
  </tr>
  <tr>
   <td><code>E:focus</code></td>
   <td>키보드 포커스(focus)를 가진 모든 E 엘리먼트</td>
  </tr>
  <tr>
   <td><code>E:active</code></td>
   <td>현재 사용자 액션(current user action)에 관여된 E 엘리먼트</td>
  </tr>
  <tr>
   <td><code>E:link</code></td>
   <td>사용자가 최근에 방문하지
    <i>
     않은</i>
    URL의 하이퍼링크(hyperlink)인 모든 E 엘리먼트</td>
  </tr>
  <tr>
   <td><code>E:visited</code></td>
   <td>사용자가 최근에 방문
    <i>
     한</i>
    URL의 하이퍼링크인 모든 E 엘리먼트</td>
  </tr>
 </tbody>
</table>
<p><code>cursor</code> 속성은 포인터의 모양을 지정합니다: 몇가지 흔한 모양은 다음과 같습니다. 브라우저에 있는 실제 포인터 모양을 보고 싶으시면 마우스 포인터를 이 리스트의 아이템위에 올려놓으세요:</p>
<table style="margin-left:2em;">
 <tbody>
  <tr>
   <td style="width:10em;"><strong>Selector</strong></td>
   <td><strong>Selects</strong></td>
  </tr>
  <tr style="cursor:pointer;">
   <td><code>pointer</code></td>
   <td>링크를 가리킴</td>
  </tr>
  <tr style="cursor:wait;">
   <td><code>wait</code></td>
   <td>프로그램이 입력(input)을 받을 수 없다는 것을 가리킴</td>
  </tr>
  <tr style="cursor:progress;">
   <td><code>progress</code></td>
   <td>프로그램이 작동하고 있지만, 여전히 입력을 받을 수 있다는 것을 가리킴</td>
  </tr>
  <tr style="cursor:default;">
   <td><code>default</code></td>
   <td>디폴트(보통 화살표)</td>
  </tr>
 </tbody>
</table>
<p><code>outline</code> 속성은 키보드 포거스를 나타내기위해서 자주 사용되는 아웃라인(outline)을 만들어 냅니다. 이 속성의 값은 개개의 면(side)를 지정할 수 없다는 것을 제외하고는 <code>border</code> 속성과 비슷합니다.</p>
<p>사용자 인터페이스의 몇가지 다른 기능들은 보통 속성(attribute)을 사용해서 구현됩니다(implemented). 예를 들면, 사용할 수 없거나(disabled) 또는 읽기 전용(read-only)인 엘리먼트는 <code>disabled</code> 속성(attribute) 이나 <code>readonly</code> 속성(attribute)을 가집니다. 선별자는 이들 속성들을 다른 속성들 과 마찮가지로 각진 괄호(square brackets)를 사용해서 지정할 수 있습니다: <code>{{ mediawiki.external('disabled') }}</code> 이나 <code>{{ mediawiki.external('readonly') }}</code></p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; width:100%;">
 <caption style="font-weight:bold; text-align:left;">
  Example</caption>
 <tbody>
  <tr>
   <td>These rules specify styles for a button that changes dynamically as the user interacts with it:
    <div style="width:30em;">
     <pre>
.green-button {
  background-color:#cec;
  color:#black;
  border:2px outset #cec;
  }

.green-button[disabled] {
  background-color:#cdc;
  color:#777;
  }

.green-button:active {
  border-style: inset;
  }
</pre>
    </div>
    <p>이 위키(wiki)는 페이지에 사용자 인터페이스를 지원하지 않습니다. 따라서 이들 버튼들은 "클릭(click)"할 수 없습니다. 여기 이 아이디어를 설명해주는 몇가지 고정 이미지(static image)들이 있습니다:</p>
    <table style="border:2px outset #36b; padding:1em; background-color:#fff;">
     <tbody>
      <tr>
       <td>
        <table>
         <tbody>
          <tr>
           <td><span style="width:8em; height:2em;background-color:#cdc;color:#777;padding:.5em 1em;cursor:default;margin-right:1em;border:2px outset #cec;">Click&nbsp;Me</span></td>
           <td><span style="width:8em; height:2em;background-color:#cec;padding:.5em 1em;cursor:move;margin-right:1em;border:2px outset #cec;">Click&nbsp;Me</span></td>
           <td><span style="width:8em; height:2em;background-color:#cec;padding:.5em 1em;cursor:move;margin-right:1em;border:2px inset #cec;">Click&nbsp;Me</span></td>
          </tr>
          <tr style="line-height:25%;">
           <td>&nbsp;</td>
          </tr>
          <tr style="font-style:italic;">
           <td>disabled</td>
           <td>normal</td>
           <td>active</td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
    <p>완전하게 작동하는 버튼은 또한 디폴트 상태일때 전체 버튼주위에 어두운 테두리(outline)을 가지고 있으며 키보드 포거스 상태일 때 버튼 면(button face)에 점선 테두리를 가집니다. 포인터가 위에 있을땐 호버 효과(hover effect)도 가질 수 있습니다.</p>
   </td>
  </tr>
 </tbody>
</table>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;width:100%;">
 <caption style="font-weight:bold; text-align:left; margin-top:1em;">
  More details</caption>
 <tbody>
  <tr>
   <td>CSS 에서의 사용자 인터페이스에 관한 정보를 더 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/ui.html">User interface</a>를 보세요.
    <p>이 입문서 II 부에 사용자 인터페이스를 위한 모질라 마크업 언어, XUL에 대한 예제가 있습니다.</p>
   </td>
  </tr>
 </tbody>
</table>
<h3 id=".EC.95.A1.EC.85.98:_.EB.AC.B8.EC.84.9C_.EC.9D.B8.EC.87.84" name=".EC.95.A1.EC.85.98:_.EB.AC.B8.EC.84.9C_.EC.9D.B8.EC.87.84">액션: 문서 인쇄</h3>
<p>새로운 HTML 문서 <code>doc4.html</code>를 만드세요. 다음의 내용물을 복사해서 붙여넣으시되, 스크롤해서 전부 다 붙여 넣도록 하세요:</p>
<div style="width:48em; height:12em; overflow:auto;">
 <pre>
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"&gt;
&lt;HTML&gt;

&lt;HEAD&gt;
&lt;TITLE&gt;Print sample&lt;/TITLE&gt;
&lt;LINK rel="stylesheet" type="text/css" href="style4.css"&gt;&lt;/strong&gt;
&lt;/HEAD&gt;

&lt;BODY&gt;
&lt;H1&gt;Section A&lt;/H1&gt;
&lt;P&gt;This is the first section...&lt;/P&gt;

&lt;H1&gt;Section B&lt;/H1&gt;
&lt;P&gt;This is the second section...&lt;/P&gt;

&lt;DIV id="print-head"&gt;
Heading for paged media
&lt;/DIV&gt;

&lt;DIV id="print-foot"&gt;
Page:&nbsp;
&lt;/DIV&gt;

&lt;/BODY&gt;
&lt;/HTML&gt;
</pre>
</div>
<p>새 스타일 시트 <code>style4.css</code>를 만드세요. 다음의 내용물을 복사해서 붙여넣으시되, 스크롤해서 전부 다 붙여 넣도록 하세요:</p>
<div style="width:48em; height:12em; overflow:auto;">
 <pre>
/*** Print sample ***/

/* defaults  for screen */
#print-head,
#print-foot {
  display: none;
  }

/* print only */
@media print {

h1 {
  page-break-before: always;
  padding-top: 2em;
  }

h1:first-child {
  page-break-before: avoid;
  counter-reset: page;
  }

#print-head {
  display: block;
  position: fixed;
  top: 0pt;
  left:0pt;
  right: 0pt;

  font-size: 200%;
  text-align: center;
  }

#print-foot {
  display: block;
  position: fixed;
  bottom: 0pt;
  right: 0pt;

  font-size: 200%;
  }

#print-foot:after {
  content: counter(page);
  counter-increment: page;
  }

} /* end print only */
</pre>
</div>
<p>이 문서를 브라우저로 보실 때, 브라우저는 디폴트 스타일을 사용하고 있습니다.</p>
<p>문서를 인쇄(또는 미리보기, preview)하실 때, 스타일 시트는 각 섹션을 분리된 페이지에 위치시키고, 헤더와 푸터를 각 페이지에 더합니다. 브라우저가 카운터(counter)를 지원하면 푸터(footer)에 페이지 번호를 더합니다.</p>
<table>
 <tbody>
  <tr>
   <td>
    <table style="border:2px outset #36b;padding:1em;">
     <tbody>
      <tr>
       <td>
        <table style="width:15em;margin-right:2em;">
         <tbody>
          <tr>
           <td>
            <div style="font-size:150%;text-align:center;margin-bottom:.5em;">
             Heading</div>
            <div style="font-size:150%;font-weight:bold;">
             Section A</div>
            <div style="font-size:75%;">
             This is the first section...</div>
            <div style="font-size:150%;text-align:right;margin-top:12em;">
             Page: 1</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
   <td>
    <table style="border:2px outset #36b;padding:1em;">
     <tbody>
      <tr>
       <td>
        <table style="width:15em;margin-right:2em;">
         <tbody>
          <tr>
           <td>
            <div style="font-size:150%;text-align:center;margin-bottom:.5em;">
             Heading</div>
            <div style="font-size:150%;font-weight:bold;">
             Section B</div>
            <div style="font-size:75%;">
             This is the second section...</div>
            <div style="font-size:150%;text-align:right;margin-top:12em;">
             Page: 2</div>
           </td>
          </tr>
         </tbody>
        </table>
       </td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
<p>&nbsp;</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4;width:100%">
 <caption style="font-weight:bold; text-align:left;">
  Challenge</caption>
 <tbody>
  <tr>
   <td>이전 페이지의 링크를 사용해서 CSS 규약을 읽어 보세요.
    <p>거기서 새로운 인쇄-용(print-specific) CSS 파일을 어떻게 스타일 시트로 임포트(import)하는지에 관한 설명을 찾아보세요.</p>
    <p>마우스 포인터가 위에 오면 헤딩(headings)이 푸른색이 되게 만드세요.</p>
   </td>
  </tr>
 </tbody>
</table>
<h4 id=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F" name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F">그럼 다음은?</h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:ko/CSS/Getting_Started/Media">Discussion</a> page.</p>
<p>지금까지, 이 입문서의 모든 스타일 규칙들이 파일에 지정되었습니다. 규칙과 그 값들은 고정되어있습니다. 다음 페이지에서는 어떻게 프로그래밍 언어를 사용해서 규칙들을 다이나믹하게 바꿀수 있는지 기술합니다: <b><a href="ko/CSS/Getting_Started/JavaScript">JavaScript</a></b></p>
<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/M\u00e9dias", "pl": "pl/CSS/Na_pocz\u0105tek/Media" } ) }}</p>
Revert to this revision