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 / opacity

CSS / Reference / opacity

개요 opacity로 요소의 투명도를 정할 수 있습니다. 기본값 : 1 상속 : No 애니메이션 : Yes 버전 : CSS Level 3 문법 opacity: number | initial | inherit number : 0.0부터 1.0까지의 수를 넣습니다. 숫자가 작을수록 투명해집니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS ...

CSS / Reference / letter-spacing, word-spacing

CSS / Reference / letter-spacing, word-spacing

글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경우 글자가 겹칠 수 있습니다.

CSS / Reference / font-style

CSS / Reference / font-style

font-style은 글자 모양을 정하는 속성으로, 기울임 여부를 정합니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / list-style-type

CSS / Reference / list-style-type

목록은 ul 태그 또는 ol 태그로 만듭니다. 목록 앞에 붙는 도형이나 문자을 마커(Marker)라고 하는데, 어떤 형식 또는 어떤 모양의 마커를 사용할지는 list-style-type으로 정할 수 있습니다.

CSS / Reference / empty-cells

CSS / Reference / empty-cells

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

CSS / Reference / background-color

CSS / Reference / background-color

개요 background-color로 배경의 색을 정합니다. 그 색으로 border와 padding을 포함한 영역을 칠합니다. margin 영역은 칠하지 않습니다. 기본값 : transparent 상속 : No 애니메이션 : Yes 버전 : CSS Level 1 문법 background-color: transparent | color | initial | inherit transparent : 배경색이 없습니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 1 바깥 여백(margin)은 칠하지 않고, 안쪽 여백(padding)은 칠한다는 것을 ...

CSS / Reference / content

CSS / Reference / content

content는 선택한 요소의 앞이나 뒤에 텍스트, 이미지 등을 추가하는 속성입니다. 기본값 : normal 상속 : No 애니메이션 : No 버전 : CSS Level 2

CSS / Reference / background-size

CSS / Reference / background-size

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다. 기본값 : auto 상속 : No 애니메이션 : Yes 버전 : CSS Level 3

CSS / Reference / word-break

CSS / Reference / word-break

word-break는 줄바꿈을 할 때 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / line-height

CSS / Reference / line-height

line-height 속성은 텍스트 줄 간격(줄 높이)을 조절하는 데 사용됩니다. 텍스트의 가독성을 높이고, 디자인적으로 더 일관된 레이아웃을 만들기 위해 자주 사용됩니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1