Content

이 페이지는 문서가 디스플레이될때 CSS를 사용해서 내용물을 더하는 방법들을 기술합니다.

스타일 시트를 수정해서 텍스트 내용물과 이미지를 더합니다.

정보: 내용물(Content)

CSS의 한가지 중요한 잇점은 문서의 내용물로부터 문서의 스타일을 분리하는 데 도움을 준다는 점입니다. 그러나 몇몇 상황에선 특정 내용물을 문서의 부분이 아닌 스타일 시트의 일부분으로 지정해 주는 것이 의미를 가질 수 있습니다.

스타일 시트에 지정된 내용물은 텍스트 또는 이미지들로 구성될 수 있습니다. 내용물이 문서의 구조와 긴밀하게 링크되어 있을 경우 스타일 시트내에 내용물을 지정합니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>
스타일 시트내에 내용물을 지정하는 것은 문제를 일으킬 수 있습니다. 예를 들면, 스타일 시트를 공유하는 문서의 여러 언어 버전을 가지고 있을 수 있습니다. 이때 스타일 시트의 일부가 번역되어야 한다면, 스타일 시트의 번역된 각 부분들을 각각의 다른 파일에 저장하고 문서의 적합한 언어 버전에 링크되도록 손을 써 놓아야만 합니다.

이러한 문제점은 지정된 내용물이 모든 언어와 문화에 적용되는 기호나 이미지로 구성되어 있다면 피할 수 있습니다.

스타일 시트에 지정된 내용물은 DOM의 일부가 되지 않습니다.

텍스트 내용물

CSS는 텍스트 내용물을 엘리먼트 앞 또는 뒤에 삽입할 수 있습니다. 이렇게 지정하기 위해서 규칙(rule)을 만들고 선별자에 :before:after 를 더하세요. 선언부에서 content 속성을 텍스트 내용물을 그 값으로 해서 지정하세요.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
이 규칙은 텍스트 Reference:ref클래스를 가진 모든 엘리먼트 앞에 더합니다.
.ref:before {
  font-weight: bold;
  color: navy;
  content: "Reference: ";
  }
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>
스타일 시트의 문자셋(character set)은 디폴트로 UTF-8입니다, 그러나 이것은 링크나 스타일 시트 자체 또는 다른 방법으로 지정될 수 있습니다. 더 자세한 사항은 CSS 규약의 4.4 CSS style sheet representation를 보세요.

개개의 문자들도 백슬래쉬를 escape문자로 사용하는 escape 지정방식을 사용하여 지정할 수 있습니다. 예를 들면 \265B는 체스 기호로 흑 여왕을 ♛ 나타냅니다. 더 자세한 설명은 CSS 규약의 Referring to characters not represented in a character encoding 그리고 Characters and case 를 보세요.

이미지 내용물

엘리먼트 앞 또는 뒤에 이미지를 더하려면 이미지 파일의 URL을 content 속성의 값으로 지정하세요.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
이 규칙은 공백과 아이콘 하나를 glossary 클래스를 가진 모든 링크뒤에 더합니다:
a.glossary:after {content: " " url("../images/glossary-icon.gif");}

이미지를 엘리먼트의 배경으로 더하려면, 이미지 파일의 URL을 background 속성의 값으로 지정하세요. 이 속성은 배경색, 배경 이미지, 그 이미지가 어떻게 반복되는가, 그리고 몇몇 다른 사항들을 지정하는 단축형 속성입니다.

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example </caption>
이 규칙은 특정 엘리먼트의 배경을 지정하는 데 URL값을 사용하여 이미지 파일을 지정합니다.

선별자는 엘리먼트의 id를 지정합니다. no-repeat 값은 이미지가 한번만 나타나도록 합니다.

#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption>
배경에과 관련된 각기 속성들과 배경 이미지를 지정할 때의 다른 옵션들에 대한 정보는 CSS 규약의 The background을 보세요

액션: 배경 이미지 더하기

다음 이미지는 맨 아래에 푸른 라인이 있는 흰색 사각형입니다. 이 이미지를 CSS 파일이 있는 디렉토리로 다운로드하세요:

Image:Blue-rule.png

(예를 들면, 오른쪽 클릭으로 내용물 메뉴(context menu)를 연다음, Save Image As ...를 선택하시고 튜토리얼을 위해서 사용하고 있는 디렉토리를 지정하세요.)

CSS 파일을 편집하면서 다음 규칙을 body에 더해서 페이지 전체의 배경 이미지를 지정하세요.

background: url("Blue-rule.png");

repeat 값이 디폴트이기 때문에 지정할 필요가 없습니다. 이미지는 수평 수직으로 반복되어서 줄친 연습장 같은 모습을 보입니다:

Image:Blue-rule-ground.png

Cascading Style Sheets

Cascading Style Sheets

<caption style="font-weight:bold; text-align:left; margin-top:1em;">Challenge </caption>
다음 이미지를 다운로드하세요:
Image:Yellow-pin.png

스타일 시트에 규칙하나를 더해서 각 라인의 시작에 위의 이미지가 디스플레이 되게하세요:

Image:Blue-rule-ground.png

image:Yellow-pin.png Cascading Style Sheets
image:Yellow-pin.png Cascading Style Sheets

그럼 다음은?

스타일 시트가 내용물을 더하는 가장 흔한 방식은 아이템들을 리스트로 표시하는 것입니다.

다음 페이지에선 리스트 엘리먼트에 대한 스타일을 지정하는 방법을 기술합니다: Lists

첨부 자료

파일 크기 날짜 첨부됨
Blue-rule.png
559 바이트 2006-08-26 09:07:28 Ioseph
Blue-rule-ground.png
1111 바이트 2006-08-26 09:09:03 Ioseph
Yellow-pin.png
1631 바이트 2006-08-26 09:10:53 Ioseph
prog-udet.png
540 바이트 2007-02-05 08:35:33 Suweite
progress1.png
7775 바이트 2007-02-05 08:37:01 Suweite
venkintro-scripts.png
5179 바이트 2007-11-15 09:55:27 Andyyard

Document Tags and Contributors

Contributors to this page: eyeofme, Ioseph, Hyunha Kim
Last updated by: Hyunha Kim,