background-repeat

1 개요
2 문법
3 예제

개요

background-repeat는 배경 이미지의 반복 여부와 반복 방향을 정하는 속성입니다.

기본값 : repeat
상속 : No
애니메이션 : No
버전 : CSS Level 1

문법

background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit

repeat : 가로 방향, 세로 방향으로 반복합니다.
repeat-x : 가로 방향으로 반복합니다.
repeat-y : 세로 방향으로 반복합니다.
no-repeat : 반복하지 않습니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

예제

background-repeat의 값이 repeat이면, 가로 방향과 세로 방향으로 반복합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      div {
        width: 100%;
        height: 600px;
        border: 1px solid #bcbcbc;
      }
      .a {
        background-image: url( "images/bg-house.png" );
        background-repeat: repeat;
      }
    </style>
  </head>
  <body>
    <div class="a">
    </div>
  </body>
</html>

background-repeat의 값이 repeat-x이면, 가로 방향으로 반복합니다.

background-repeat: repeat-x;

background-repeat의 값이 repeat-y이면, 세로 방향으로 반복합니다.

background-repeat: repeat-y;

background-repeat의 값이 no-repeat이면, 반복하지 않습니다.

background-repeat: no-repeat;

CSS / Reference / font-weight

font-weight 속성은 CSS에서 글꼴의 굵기를 지정하는 데 사용됩니다. 텍스트의 가독성을 높이거나 디자인의 강조점을 표현할 때 유용합니다. 기본값 : normal 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1

CSS / Reference / font-size

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

CSS / Reference / aspect-ratio

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

CSS / Reference / background-origin

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

CSS / Reference / color

개요 color로 텍스트의 색을 정합니다. 상속 : Yes 애니메이션 : Yes 버전 : CSS Level 1 문법 color: color | initial | inherit color : 색을 정합니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> ...

CSS / Reference / box-sizing

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

CSS / Reference / caption-side

개요 caption-side는 표(table)의 caption 위치를 정하는 속성입니다. 기본값 : top 상속 : Yes 애니메이션 : No 버전 : CSS Level 2 문법 caption-side: top | bottom | initial | inherit top : 기본값으로, 표의 위에 캡션을 위치시킵니다. bottom : 표의 아래에 캡션을 위치시킵니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의 속성값을 상속받습니다. 예제 <!doctype html> <html lang="ko"> <head> <meta ...

CSS / Reference / text-align

text-align은 문단 정렬 방식을 정하는 속성입니다. 기본값 : 읽는 방향이 LTR(왼쪽에서 오른쪽)인 경우 left, RTL(오른쪽에서 왼쪽)인 경우 right 상속 : Yes 애니메이션 : No 버전 : CSS Level 1

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 / empty-cells

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