예제 4-18. <div> 박스에 배경 꾸미기
WEB/CSS3-CONCEPT 2017. 11. 4. 18:53 |- 배경에 색을 칠할까, 이미지로 그릴까? background-color, background-image
* 배경색을 먼저 칠하고, 배경이미지를 배치하므로, 배경 이미지가 출력 되지 않는 영역에만 배경색이 보인다.
1 2 3 4 | div { background-color : skyblue; background-image : url("media/spongebob.png"); } | cs |
- 배경 이미지의 위치, background-position
left top(디폴트), left center, left bottom
right top, right bottom
center top, center center, center bottom
1 2 3 | div { background-position : center center; /* 박스 중간에 이미지 */ } | cs |
- 배경 이미지의 크기, background-position
1 2 3 4 5 | div { background-size : 100px 100px; /* 100 X 100크기로 출력 */ } | cs |
- 배경 이미지 반복 출력, background-repeat
no-repeat, repreat(디폴트), repeat-x, repeat-y
1 2 3 | div { background-repeat : repeat-y; /* background-position에 지정된 위치에서 이미지를 위해서, 수직 방향으로 반복 출력 */ } | cs |
그림 4-22
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배경 꾸미기</title> <style> div { background-color: skyblue; background-size: 100px 100px; background-image: url("media/spongebob.png"); background-repeat: no-repeat; background-position: left center; } div { width : 200px; height : 200px; color: blueviolet; font-size : 16px; } </style> </head> <body> <h3>배경 꾸미기</h3> <hr> <div>SpongeBob is an over-optimistic sponge that annoys other characters. </div> </body> </html> | cs |
그림 4-23
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배경 꾸미기</title> <style> div { background-color: skyblue; background-size: 100px 100px; background-image: url("media/spongebob.png") background-repeat: repeat-y; background-position: center center; } div { width : 200px; height : 200px; color: blueviolet; font-size : 16px; } </style> </head> <body> <h3>배경 꾸미기</h3> <hr> <div>SpongeBob is an over-optimistic sponge that annoys other characters. </div> </body> </html> | cs |
- background 단축 프로퍼티
color, image, position/size, repeat, origin 순으로 값 설정
1 2 3 | div { color image position/size repeat background : skyblue url("media/spongebob.png") center center/100px 100px repeat-y; } | cs |
* background 프로퍼티에는 배경색이나 배경 이미지만 지정할 수있다.
1 2 | background : skyblue; /* 배경색을 skyblue로 설정 */ background : url("media/spongebob.png"); /* 배경 이미지 지정 */ | cs |
예제 4-18
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>배경 꾸미기</title> <style> div { background-color : skyblue; background-size : 100px 100px; background-image : url("media/spongebob.png"); background-repeat : repeat-y; background-position : center center; } div { width : 200px; height : 200px; color : blueviolet; font-size : 16px; } </style> </head> <body> <h3>div 박스에 배경 꾸미기</h3> <hr> <div>SpongeBob is an over-optimistic sponge that annoys other characters. </div> </body> </html> | cs |
'WEB > CSS3-CONCEPT' 카테고리의 다른 글
| 예제 4-20. box-shadow 프로퍼티로 박스 그림자 만들기 (0) | 2017.11.04 |
|---|---|
| 예제 4-19. text-shadow 프로퍼티로 텍스트 그림자 만들기 (0) | 2017.11.04 |
| 예제 4-17. 이미지 테두리 만들기 (0) | 2017.11.04 |
| 예제 4-16. 다양한 둥근 모서리 테두리. (0) | 2017.11.04 |
| 예제 4-13. <div>의 박스 모델 보이기. 예제 4-14. 박스 모델 활용. 예제 4-15. 다양한 테두리선 스타일. (0) | 2017.11.04 |