content

CSS Reference
Created 2024-09-16 Last Modified 2024-09-16

1 개요
2 문법
3 예제 - 텍스트 추가하기
4 예제 - 이미지 추가하기
5 예제 - 속성값 출력하기
6 예제 - 따옴표 출력하기

개요

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

CSS / Reference / content

CSS / Reference / empty-cells

개요 empty-cells은 표(table)에서 빈 셀의 테두리를 표시할지 말지는 정하는 속성입니다. 기본값 : show 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 empty-cells: show | hide | initial | inherit show : 빈 셀의 테두리를 보여줍니다. hide : 빈 셀의 테두리를 숨김니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 첫 번째 표는 빈 셀의 테두리를 표시합니다. 두 ...

CSS / Reference / font-variant

개요 font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1 문법 font-variant: normal | small-caps | initial | inherit normal : 소문자를 작은 대문자로 바꾸지 않습니다. small-caps : 소문자를 작은 대문자로 바꿉니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype ...

CSS / Reference / accent-color

개요 accent-color는 강조할 색을 지정하는 속성입니다. 아래 요소에 적용할 수 있습니다. <input type="checkbox"> <input type="radio"> <input type="range"> <progress> 문법 accent-color: auto | color | initial | inherit auto : 기본값으로, 브라우저가 색을 정합니다. color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속 받습니다. 예제 - input checkbox 체크박스를 선택하면 녹색이 됩니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Reference / word-wrap

개요 word-wrap은 띄어쓰기가 없는 긴 단어를 어떻게 처리할지 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 3 문법 word-wrap: normal | break-word | initial | inherit normal : break point에서 줄바꿈합니다. break-word : 요소의 경계에서 break point가 아니어도 줄바꿈을 합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. word-break 속성의 값이 keep-all이면 단어가, ...

CSS / Reference / aspect-ratio

개요 aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다. 문법 aspect-ratio: auto | number / number | initial | inherit auto : 요소가 고유의 가로 세로 비율을 가진 경우 그 값으로 설정합니다. number / number : 가로 대 세로. 세로가 생략된 ...

CSS / Reference / font-size

CSS / Reference / overflow

개요 overflow는 내용이 요소의 크기를 벗어났을 때 어떻게 처리할지를 정하는 속성입니다. 기본값 : visible 상속 : No 애니메이션 : No 버전 : CSS Level 2 문법 overflow: visible | hidden | scroll | auto | initial | inherit visible : 박스를 넘어가도 보여줍니다. hidden : 박스를 넘어간 부분은 보이지 않습니다. scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다. auto : 박스를 ...

CSS / Reference / line-height

개요 line-height는 줄 높이를 정하는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 line-height: normal | length | number | percentage | initial | inherit normal : 웹브라우저에서 정한 기본값입니다. 보통 1.2입니다. length : 길이로 줄 높이를 정합니다. number : 글자 크기의 몇 배인지로 줄 높이를 정합니다. percentage : 글자 크기의 몇 %로 줄 ...

CSS / Reference / calc()

개요 calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다. 예를 들어 다음은 는 글자 크기를 20px로 설정합니다. font-size: calc( 10px + 10px ); 문법 연산자 +는 덧셈, -는 뺄셈, *는 곱셈, /는 나눗셈입니다. 곱셈과 나눗셈의 좌우에는 공백이 없어도 됩니다. 하지만, 덧셈과 뺄셈의 좌우에는 공백이 있어야 합니다. 계산 순서 왼쪽에서 오른쪽으로 계산합니다. 곱셈과 나눗셈을 먼저 하고, 덧셈과 뺄셈은 ...