[HTML/CSS] CSS의 Background속성
[HTML/CSS] CSS의 Background속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
Background속성은 배경효과를 나타내기 위해 사용합니다. Background는 다음과 같은 효과를 부여합니다. * Background-color * Background-imege * Background-repeat * Background-position * Background-attachment |
|
|
|
|
Background-color
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-color |
색상코드 |
red, #FF0000 등의 색상코드 |
|
요소의 배경색을 지정할때 사용합니다. |
Background-imege
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-imege |
none |
이미지를 배경으로 사용하지 않음 (기본값) |
|
url() |
이미지의 URL을 입력 | ||
|
initial |
기본값으로 설정 | ||
| inherit |
부모 요소의 속성값을 이어감 |
|
이미지를 배경으로 사용할때 사용합니다. 왼쪽위에서 시작하여 가로, 세로 반복하며 바둑판식으로 채워집니다. |
Background-repeat
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-repeat |
repeat |
가로, 세로를 반복 (기본값) |
|
repeat-x |
가로방향만 반복 | ||
|
repeat-y |
세로방향만 반복 | ||
|
no-repeat |
반복하지 않음 | ||
|
initial |
기본값으로 설정 | ||
| inherit | 부모 요소의 속성값을 이어감 |
|
배경 이미지의 반복 여부와 방향을 지정합니다. |
Background-position
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-position |
x위치 y위치 |
left, right, center, top, bottom, 0%, 0px |
|
initial |
기본값으로 설정 | ||
|
inherit |
부모 요소의 속성값을 이어감 |
|
배경의 위치를 지정할때 사용합니다. |
Background-attachment
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-attachment |
scroll |
배경이 스크롤에 영향을 받음 (기본값) |
|
fixed |
화면에 고정되어 배경이 움직이지 않음 |
|
배경 이미지를 화면에 고정하거나 움직이게합니다. |
Background
|
여러가지 효과를 동시에 부여하도록 "Background"만 사용하여 한줄로 한번에 사용할수도 있습니다. 한번에 사용하려면 "color→image→repeat→position→attachment" 순서로 작성하며 속성마다 띄어쓰기로 구분 합니다. (부여하지 않는 속성은 생략 하면 됩니다.) 예) p {background:red url('sample.jpg') no-repeat x10 y10 fixed;} |
Background-size
|
태그 |
속성 |
속성값 |
비고 |
|
style |
background-size |
auto |
이미지 크기 유지 (기본값) |
|
w크기 h크기 |
w값 하나만 넣으면 비율에 맞춰 h값은 자동 지정 | ||
|
cover |
비율을 유지하며 요소를 꽉 채우며 확대, 축소 | ||
| contain |
비율을 유지하며 요소를 벗어나지 않게 확대, 축소 | ||
| initial | 기본값으로 설정 | ||
| inherit |
부모 요소의 속성값을 이어감 |
|
배경 이미지의 크기를 설정 할 수 있습니다. "background-size"는 다른 속성들과 달리 한줄에 함께 사용 할 수 없으며 따로 지정해줘야 합니다. |
< 연습하기 >
