동영상 강좌보기

배경색

background-color속성은 요소의 배경색을 지정합니다.

페이지의 배경색은 다음과 같이 설정합니다.

body {
    background-color: lightblue;
}

CSS를 사용하면 색상은 다음과 같이 설정할 수 있습니다.

유효한 색상명 - 예 : "red"

HEX값 - 예 : "#ff0000"

RGB값 - 예 : "rgb(255,0,0)"

웹에서 가능한 색상값의 전체 목록을 보려면 CSS색상값을 보십시오.

h1 {
    background-color: green;
}

div {
    background-color: lightblue;
}

p {
    background-color: yellow;
}

배경이미지

background-image속성은 요소의 배경으로 사용할 이미지를 지정합니다.

기본적으로 이미지는 전체 요소를 포함하도록 반복됩니다.

페이지의 배경이미지는 다음과 같이 설정할 수 있습니다.

body {
    background-image: url("365ok.gif");
}

** 배경이미지를 사용할 때는 텍스트를 방해하지 않는 이미지를 사용합니다.

배경이미지 - 수평 또는 수직 반복

기본적으로 background-image속성은 요소 전체를 포함하기 때문에 이미지를 가로 및 세로로 반복합니다.

이미지는 가로 또는 세로로만 반복되게 할 수 있습니다.

이미지를 가로로만 반복할 경우

body {
    background-image: url("365ok.png");
    background-repeat: repeat-x;
}

** 이미지를 세로로 반복하려면, background-repeat: repeat-y;

배경 이미지 - 위치 및 반복 없음 설정

배경 이미지를 한번만 표시하고 반복하지 않으려면 다음과 같습니다.

body {
    background-image: url("365ok.png");
    background-repeat: no-repeat;
}

위의 예에서 배경 이미지는 텍스트와 같은 위치에 표시됩니다. 이미지의 위치를 지정할 수 있습니다.

이미지의 위치는 background-position속성에 의해 지정됩니다.

body {
    background-image: url("365ok.png");
    background-repeat: no-repeat;
    background-position: right top;
}

배경이미지 - 고정 위치

배경이미지를 고정할 수 있습니다. background-attachment속성을 사용합니다.

body {
    background-image: url("365ok.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-attachment: fixed;
}

배경 - 속기 속성(Shorthand property)

코드 단축을 위해 하나의 단일 속성에서 모든 배경 속성을 지정할 수도 있습니다.

이를 속기속성이라고 합니다.

배경에 대한 속기속성은 background입니다.

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

속기 속성을 사용할 때 속성 값의 순서는 다음과 같습니다.

• background-color
  
• background-image
  
• background-repeat
  
• background-attachment
  
• background-position