배경 속성
[표 6-5]
속성 설명
background-image 배경 이미지 지정
background-size 배경 이미지의 크기 지정
background-repeat 배경 이미지의 반복 형태 지정
background-attachment 배경 이미지의 부착 형태 지정
background-position 배경 이미지의 위치 지정
background 한 번에 모든 배경 속성 입력
다음 배경 속성을 사용해 해다 ㅇ태그의 배경 이미지나 색상을 지정합니다.
4.1 background-image 속성
background-image는 배경 이미지를 지어하는 속성으로 스타일 값에는 URL 단위나 그레디언트를 입력합니다. 그레디언트는 이후에 살펴보고 이번 내용에는 URL 단위를 사용합니다.
4.2 background-sizse 속성
background-size는 배경 이미지 크기를 조절하는 속성입니다. CSS3에 추가된 속성이므로 인터넷 익스플로러 8이하에서는 사용할 수 없습니다. backgorund-size 속성에는 크기 단위나 키워드를 입력할 수 있습니다. 크기 단위론은 퍼센트를 많이 사용하고, 각각 너비와 높이를 의미하는 2개의 값을 입력할 수 있습니다.
ex) background-size: ~
기본 예제 6-5 배경 이미지 삽입과 크기 조절
1. 배경으로 사용할 이미지 파일 준비하기
2. 배경 이미지 1개 삽입하기 background-mage 속성에 URL 단위를 사용해 다음 코드처럼 이미지를 넣습니다.
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
bakcground-image: urL('BackgroundFront.png');
}
</sytle>
</head>
<body>
</body>
</html>
3. 배경 이미지 2개 삽입하기
CSS3 이전에는 이렇게 배경 이미지를 하나만 삽입할 수 있었습니다. 하지만 CSS3부터는 다음 코드처럼 코드를 작성하면 배경 이미지를 여러 개 적용할 수 있습니다. 결과 화면에서 알 수 있듯이 먼저 입력한(왼쪽) 이미지가 앞으로 나옵니다.
코드 6-16 2개의 배경 이미지 삽입
<style>
body {
/* 각각의 그림을 레이어라고 합니다. */
background-image: url(BackgroundFrount.png'), url('BackgroundBack.png');
}
</style>
4. 배경 이미지의 너비 조절하기 [코드 6-16]의 결과 화면을 보면 그림이 ㅋ너도 너무 크다는 생각이 들 것입니다. 이제 그림을 조금 작게 만들어 봅시다. 그림 크기는 background-size 속성을 사용해 조절합니다. 먼저 크기 단위를 1개만 입력해 너비를 조절합니다.
<style>
body {
background-image; url(BackgroundFrount.png'), url('BackgroundBack.png');
background-sizse: 100%;
}
</style>
5. 배경 이미지 높이 조절하기 background-size 속성에서 두 번째로 입력하는 크기 단위는 높이를 의미합니다. 다음 코드에서는 두 번째 위치에 250px을 입력했으므로 높이가 250px로 지정됩니다.
[코드 6-18] 배경 이미지 높이 조절
<sytle>
body {
background-image: url(BackgroundFrount.png'), url('BackgroundBack.png');
background-size: 100% 250px;
}
</style>
NOTE_background-size 속성과 관련된 주의 사항
너비와 높이에 띄어쓰기를 사용하는 것과 다음 코드처럼 쉼표를 사용하는 것은 다릅니다. 쉼표를 사용하면 각 배경에 서로 다른 크기를 입력하는 것으로 인식합니다.
코드 6-19 background-size 속서 ㅇ주의 사항
<style>
body {
background-image: url('BackgroundFrount.png'), url('BackgroundBack.png');
/* 첫 번째 이미지의 너비: 100%
두 번째 이미지의 너비 : 250px */
background-size 100%, 250px;
}
</style>
4.3 background-repeat 속성
다음과 같이 실행 결과들을 살펴보면 패턴처럼 이미지가 반복됩니다. 이는 background-repeat 속성의 기본 키워드가 repeat이기 때문에 나타나는 현상입니다. background-repeat 속성에는 [6-16]의 키워드를 입력할 수 있습니다.
background-repeat:~ (inherit, initial, no-repeat, repeat, repeat-x, repeat-y, round, space
repeat를 입력하면 이미지를 패터너처럼 표시하고, repeat-x를 입력하면 X축 방향으로만 이미지가 반복됩니다. 마찬가지로 repeat-y를 입력하면 Y축 방향으로만 이미지가 반복됩니다.
4.4 background-attachment 속성
background-attachment는 배경 이미지르 화면에 고정하는 속성으로 스타일 값에는 [그림6-17]의 키워드를 입력할 수 있습니다. background-attachment 속성의 기본 키워드는 scroll 입니다. 화면 스크롤에 따라 배경 이미지가 함께 이동합니다.
background-attachment:~ (fixed, inherit, initial, local, scroll)
4.5 background-position 속성
이제 마지막으로 아이콘(스프라이트 이미지)을 만들 때 자주 사용하는 background-position 속성을 살펴봅시다. background-position 속성에는 크기 단위나 [그림 6-18]의 키워드를 다음과 같이 입력할 수 있습니다.
- background-position : 키워드;
- background-position : X축 위치;
- background-position : X축 위치 Y축 위치;
기본 예제 6-6 배경 이미지 배치
1. 배경 이미지 반복 없애기 다음 코드처럼 background-repeat 속성에 no-repeat 키워드를 입력합니다. 반복 없이 배경 이미지가 적용됩니다.
코드 6-20 배경 이미지 반복 제거
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-image: url('backgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
</body>
</html>
2. 스크롤이 가능한 분량의 텍스트 추가하기 태그 내부에 스크롤이 표시될 수 있을 정도의 글을 입력합니다. 결과 화면에서 스크롤을 내리면 배경 이미지가 위로 올라가 사라집니다.
코드 6-21 텍스트 추가
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Property Basic</title>
<style>
body {
background-color: #E7E7E8;
background-image: url('BasckgroundFront.png'), url('BackgroundBack.png');
background-size: 100%;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p> Pellentesque est velit, laoreet vel rhoncus sit amet.</p>
<p> proin vitawe elit est, ut acumsan arcu. Sed consectetur.</p>
<p>Donec molestie massa id lorem hendrerit eu bibendum augue.</p>
<p>Morbi ut lorem in purus facilisis vulputate. Sed purus nibh.</p>
</body>
</html>
3. 배경 이미지 화면에 고정시키기
background-attachment 속성 값에 fixed를 입력합니다. 스크롤을 이동해도 배경 이미지가 고정 됩니다.
코드 6-22 배경 이미지 위치 고정
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFrount.png'), url(BackgroundBack.png');
background-size: 100%
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
4. 배경 이미지 아래쪽에 배치하기 background-position 속성에 키워드 하나를 입력했습니다. 이미지가 아래 쪽에 위치합니다.
코드 6-23 배경 이미지 아래쪽 배치
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFrount.png'), url(BackgroundBack.png');
background-size: 100%
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom;
}
</style>
5. 배경 이미지 위치 조절하기 X축 위치와 Y축 위치를 지정하는 2개의 값을 입력하면 특정 위치에 이미지를 넣ㅇ늘 수 있습니다. 다음 코드는 배경 이미지의 X축 위치를 0px로 지정하고, Y축 위치를 50%로 지정합니다.
코드 6-24 배경 이미지 위치 조절
<style>
body {
background-color: #E7E7E8;
background-image: url('BackgroundFrount.png'), url(BackgroundBack.png');
background-size: 100%
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0px 50%;
}
</style>
NOTE_ background 속성 한행에 입력
지금까지 배운 모든 배경 속성은 background 속성에 한 번에 입력할 수 있습니다.
