blob: 216305f889527aed7c4b90ef4905473370648bc3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
---
title: 내용물
slug: Learn/CSS/Howto/Generated_content
translation_of: Learn/CSS/Howto/Generated_content
---
<p>{{ CSSTutorialTOC() }}</p>
<div class="warning">
<strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Color", "색상") }}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 9번째 장; 이번에는 CSS에서</span><span class="seoSummary">Document에 표시될 내용물을 추가 하는 </span><span class="seoSummary">방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.</span></p>
<h2 class="clearLeft" id="정보_내용물">정보: 내용물</h2>
<p>CSS사용상의 가장 큰 장점은 document의 스타일과 내용물을 분리할 수 있도록 도와준다. 하지만 아직은 Document의 일부가 아니라 Stylesheet의 일부로서 존재해야 이치가 맞아 보이는 내용들도 있다.</p>
<p>stylesheet에 놓여진 내용물(content)은 텍스트나 이미지로 구성될 수 있다. Document의 구조와 밀접하게 연결된 내용물(content)은 stylesheet에 명시 할수 있다.</p>
<div class="tuto_details">
<div class="tuto_type">
좀더 자세히</div>
<p>stylesheet에 내용물(content)을 표시하는 것은 복잡한 문제를 발생 시킬 수도 있다. 예를 들면, 동일한 stylesheet를 사용하는 여러 언어를 지원하는 Document의 경우이다. 만약 stylesheet일 일부분이 번역되어야 하는 경우가 있다면 이 부분은 stylesheet와는 분리된 파일로 저장하고 Document 언어에 맞는 파일이 연결 되도록 할당 해야 한다.</p>
<p>이미지나 심볼 혹은 모든 언어나 문화에 공통으로 사용되는 것을 쓴다면 이러한 문제는 발생하지 않는다.</p>
<p>stylesheet에 작성된 내용물(Content)은 DOM의 일부가 될 수는 없다.</p>
</div>
<h3 id="텍스트_내용물">텍스트 내용물</h3>
<p>CSS는 element 전후로 텍스트 내용물을 넣을 수 있다. 이를 위해서는, 규칙을 만들고 {{ cssxref(":before") }}나 {{ cssxref(":after") }}를 구분자로 넣고 여기에 추가 하라. 선언부에 {{ cssxref("content") }}속성선언과 그 값으로 텍스트를 추가 하라.</p>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>이 규칙은 모든 'ref' class element 앞에 <span style="font-weight: bold; color: navy;">'Reference :'</span>텍스트를 추가 한다.</p>
<pre class="brush:css">.ref:before {
font-weight: bold;
color: navy;
content: "Reference: ";
}
</pre>
</div>
<div class="tuto_details">
<div class="tuto_type">
좀더 자세히</div>
<p>stylesheet의 코드셋은 UTF-8이 기본이다. 그러나 링크 내나 stylesheet내 혹은 다른 방법으로 코드셋을 설정 할 수 있다. CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a>를 참고 하라.</p>
<p>독특한 캐릭터도 백슬레쉬(\)와 함께 사용하는 escape 표시법으로 사용 할 수 있다. 예를 들어 \256B는 블랙퀸 체스 심볼(♛)이다. 좀더 자세히는 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">문자열 코드표에 없는 문자열 참조</a>나 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>를 참고하라.</p>
</div>
<h3 id="이미지_내용물">이미지 내용물</h3>
<p>element 전/후로 이미지를 추가 하려면, {{ cssxref("content") }}속성에 이미지의 URL을 넣어라.</p>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>이 규칙은 <code>'glossary</code>' class 다음에 공백과 하나의 아이콘을 추가한다.</p>
<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
</pre>
</div>
<p>element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("background") }}속성 값에 이미지의 URL을 할당 하라. 이것이 배경색이나, 이미지를 설정하거나, 이미지를 반복하거나 혹은 다른 사항을 설정하는 단순한 방법이다.</p>
<div class="tuto_example">
<div class="tuto_type">
예제</div>
<p>이 규칙은 특정 element의 배경을 이미지 URL로 지정 하는 것이다.</p>
<p>이 설렉터느 element의 id를 나타낸다. <code>'no-repeat'</code> 값은 이미지가 한번만 나타나는 것을 말한다.</p>
<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
</pre>
</div>
<div class="tuto_details">
<div class="tuto_type">
좀더 자세히</div>
<p>배경설정에 관한 특별한 속성이나 이미지 설정 옵션에 관한 자세한 정보는 {{ cssxref("background") }} 참조 페이지를 보라.</p>
</div>
<h2 id="액션_배경_이미지_추가_하기">액션: 배경 이미지 추가 하기</h2>
<p>이 이미지는 아래쪽에 파란색 줄이 있는 흰사각형이다.:</p>
<table style="border: 2px solid #ccc;">
<tbody>
<tr>
<td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td>
</tr>
</tbody>
</table>
<ol>
<li>이 이미지를 다운 받아 예제파일들이 있는 폴더에 저장하라. (이미지에서 왼쪽 클릭을 하여 나타나는 메뉴에서 "다른 이름으로 사진저장"을 선택하여 예제가 있는 폴더를 선택하여 저장)</li>
<li>CSS파일을 열어 아래 규칙을 body부분에 추가 하여 전체 배경으로 해당 이미지를 설정하라.
<pre class="brush:css">background: url("Blue-rule.png");
</pre>
<p>일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
</div>
<div style="font-style: normal; padding-top: 2px; height: 8em;">
<p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p>
</div>
</div>
</div>
</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">
도전</div>
<p>아래 아미지를 다운 받아보라.</p>
<table style="border: 2px solid #ccc;">
<tbody>
<tr>
<td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
</tr>
</tbody>
</table>
<p>Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 앞에 나타나도록 하라.</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em; padding-top: 8px;">
<img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
<div style="font-style: normal; padding-top: 12px; height: 8em;">
<img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div>
</div>
</div>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">
Possible solution</div>
<p>Add this rule to your stylesheet:</p>
<pre class="brush: css">p:before{
content: url("yellow-pin.png");
}
</pre>
<p> </p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인.</a></div>
<h2 id="다음에는">다음에는?</h2>
<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}Stylesheet에 내용물을 추가 하는 일반 방법으로 리스트로 표기하는 방법이 있다. 다음장에는 <a href="/en-US/docs/CSS/Getting_Started/Lists" title="/en-US/docs/CSS/Getting_Started/Lists">specify style for 리스트 elements를 위한 스타일 표기법에 대해 알아보자.</a></p>
|
