동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
동영상 강좌보기
배경색
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;
}
속기 속성을 사용할 때 속성 값의 순서는 다음과 같습니다.
등록된 댓글이 없습니다.