background-size

1 개요
2 문법
3 예제

개요

background-size는 배경 이미지의 가로 크기와 세로 크기를 정하는 속성입니다.

기본값 : auto
상속 : No
애니메이션 : Yes
버전 : CSS Level 3

문법

background-size: auto | length | cover | contain | initial | inherit

auto : 이미지 크기를 유지합니다.
length : 값을 두 개 넣으면 첫번째 값이 가로 크기, 두번째 값이 세로 크기입니다. 값을 한 개 넣으면 가로 크기이며, 세로 크기는 원본 이미지의 가로 세로 비율에 맞게 자동으로 정해집니다. 백분율을 사용할 수도 있습니다.
cover : 배경을 사용하는 요소를 다 채울 수 있게 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
contain : 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소합니다. 가로 세로 비율을 유지합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

백분율로 크기를 정할 때의 기준은 이미지 크기가 아니라 배경을 사용하는 요소의 크기입니다.

예제

각 속성값에 따라 배경 이미지 크기가 어떻게 적용되는지 보여주는 간단한 예제입니다. 사용한 이미지의 크기는 400x300입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      body {
        margin: 0px;
      }
      p {
        text-align: center;
      }
      div {
        margin: 20px;
        height: 400px;
        border: 1px solid #cccccc;
        background-image: url( "images/img-01.png" );
        background-repeat: no-repeat;
        background-position: center center;
      }
      .a {
        background-size: auto;
      }
      .b {
        background-size: 300px 90%;
      }
      .c {
        background-size: cover;
      }
      .d {
        background-size: contain;
      }
    </style>
  </head>
  <body>
    <p><code>background-size: auto</code></p>
    <div class="a"></div>
    <p><code>background-size: 300px 90%</code></p>
    <div class="b"></div>
    <p><code>background-size: cover</code></p>
    <div class="c"></div>
    <p><code>background-size: contain</code></p>
    <div class="d"></div>
  </body>
</html>

CSS / Reference / font-variant

font-variant는 소문자를 작은 대문자, 즉 소문자 크기의 대문자로 바꾸는 속성입니다. 따라서 한글에서는 의미 없는 속성입니다. 기본값 : normal 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

CSS / Reference / tab-size

HTML은 탭을 연속하여 여러 개 넣어도 하나의 공백으로 인식합니다. 하지만 pre 태그를 이용하면 입력된 그대로 출력할 수 있습니다. 기본적으로 하나의 탭을 8개의 공백으로 인식합니다. 이 탭 크기를 조정하는 속성이 tab-size입니다.

CSS / Reference / list-style-type

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

CSS / Reference / box-sizing

box-sizing은 박스의 크기를 어떤 것을 기준으로 계산할지를 정하는 속성입니다. 기본값 : content-box 상속 : No 애니메이션 : No 버전 : CSS Level 3

CSS / Reference / aspect-ratio

aspect-ratio는 선택한 요소의 가로 세로 비율을 정하는 속성입니다. 접속하는 기기의 해상도가 변해도, 일정한 가로 세로 비율을 유지하고 싶을 때 유용하게 사용할 수 있습니다.

CSS / Reference / font-size

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

CSS / Reference / content

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

CSS / Reference / text-shadow

text-shadow는 글자에 그림자 효과를 주는 속성입니다. 기본값 : none 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 3 박스에 그림자 효과를 주고 싶다면 box-shadow 속성을 사용합니다.

CSS / Reference / letter-spacing, word-spacing

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

CSS / Reference / caption-side

caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2