CSS / Reference / content

개요

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다.

  • 기본값 : normal
  • 상속 : No
  • 애니메이션 : No
  • 버전 : CSS Level 2

문법

content: normal | none | counter | attr | string | open-quote | close-quote | no-open-quote | no-close-quote | url | initial | inherit
  • normal
  • none
  • counter
  • attr : 특정 속성의 값을 출력합니다.
  • string : 텍스트를 추가합니다.
  • open-quote : 시작하는 따옴표를 출력합니다.
  • close-quote : 끝나는 따옴표를 출력합니다.
  • no-open-quote
  • no-close-quote
  • url : 이미지 등 미디어를 출력합니다.
  • initial : 기본값으로 설정합니다.
  • inherit : 부모 요소의 속성값을 상속 받습니다.

예제 - 텍스트 추가하기

  • p 요소 앞에 Hello World를 추가합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 24px;
      }
      p:before {
        content: "Hello World";
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor</p>
  </body>
</html>

  • 추가한 텍스트는 CSS로 더 꾸밀 수 있습니다.
p:before {
  content: "Hello World";
  margin-right: 20px;
  font-weight: bold;
  color: cornflowerblue;
}

예제 - 이미지 추가하기

  • p 요소 앞에 images 폴더 안에 있는 circle.png를 추가합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 24px;
      }
      p:before {
        content: url( "images/circle.png" );
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor</p>
  </body>
</html>

  • 추가한 이미지는 CSS로 더 꾸밀 수 있습니다.
p:before {
  content: url( "images/circle.png" );
  vertical-align: middle;
  margin-right: 30px;
}

  • content 속성으로 추가한 이미지는 크기를 정할 수 없습니다. 크기를 조절하고 싶다면 background 속성을 이용합니다.
p:before {
  content: "";
  display: inline-block;
  background-image: url( "images/circle.png" );
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  margin-right: 20px;
}

예제 - 속성값 출력하기

  • p 요소 앞에 p 요소의 class 값을 출력합니다.
<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 24px;
      }
      p:before {
        content: attr( class );
      }
    </style>
  </head>
  <body>
    <p class="abc bcd">Lorem ipsum dolor</p>
  </body>
</html>

예제 - 따옴표 출력하기

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      * {
        font-family: Consolas, monospace;
        font-size: 24px;
      }
      p:before {
        content: open-quote;
      }
      p:after {
        content: close-quote;
      }
    </style>
  </head>
  <body>
    <p>Lorem ipsum dolor</p>
  </body>
</html>

같은 카테고리의 다른 글
CSS / Reference / background-image

CSS / Reference / background-image

background-image는 이미지를 배경으로 사용하게 하는 속성입니다. 기본값 : none 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / border

CSS / Reference / border

border는 다음의 속성을 포함하는 단축 속성으로, 테두리를 만듭니다. border-width border-style border-color

CSS / Reference / list-style-position

CSS / Reference / list-style-position

list-style-position으로 ul, ol 등의 목록의 마커(marker)의 위치를 정합니다. 기본값 : outside 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / background-origin

CSS / Reference / background-origin

HTML 요소는 박스로 이루어져 있고, 바깥 여백 영역(Margin Area), 테두리 영역(Border Area), 안쪽 여백 영역(Padding Area), 내용 영역(Content Area)으로 구분합니다. background-origin으로 배경 이미지를 어느 영역부터 채워나갈지를 정합니다. 기본값 : padding-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / font-size

CSS / Reference / font-size

font-size는 글자 크기를 정하는 속성입니다. 기본값 : medium 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / background-attachment

CSS / Reference / background-attachment

background-attachment는 배경 이미지의 스크롤 여부를 정하는 속성입니다. 기본값 : scroll 상속 : No 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / word-wrap

CSS / Reference / word-wrap

word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / opacity

CSS / Reference / opacity

opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / empty-cells

CSS / Reference / empty-cells

empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / box-shadow

CSS / Reference / box-shadow

box-shadow는 선택한 요소에 그림자 효과를 만들어주는 속성입니다. 기본값 : none 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 글자에 그림자 효과를 주고 싶다면 text-shadow 속성을 사용합니다.