1. 배경색 변경
background-color 속성을 이용해 요소의 배경 색상을 설정할 수 있다.
색상을 설정할 땐 색상명, rgb코드, hex코드 등의 방법을 통해 설정한다. (이전 포스팅 참고)
아래는 각각의 요소를 다른 배경색상으로 칠하는 예제이다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-color: #FFFFB6 } h1 { background-color: #FFBB00 } p.p1 { background-color: crimson } p.p2 { background-color: darkgreen } </style> </head> <body> <h1>CSS background color</h1> <p class="p1">first paragraph</p> <p class="p2">second paragraph</p> </body> </html> | cs |
2. 배경 이미지 변경
background-image 속성을 이용해 요소의 배경 이미지를 바꿀 수 있다.
컴퓨터에 저장된 파일의 경로 또는 이미지의 URL을 입력한다.
불러온 이미지는 기본적으로 브라우저의 왼쪽 상단에 배치되고 기본적으로 이미지는 수평/수직 방향으로 계속 반복되어 나타난다.
1 2 3 4 5 6 7 8 9 10 11 12 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url(images/bg.jpg) } </style> </head> <body> </body> </html> | cs |
3. 배경 반복 설정
위에서 배경 이미지를 설정했는데 기본적으로 반복되어 나타나는 설정을 가지고 있는데 이 설정을 변경하고 싶다면 background-repeat 속성을 이용한다.
값 |
설명 |
repeat |
배경 이미지를 수평, 수직 방향으로 반복함(default 값) |
repeat-x |
배경 이미지를 수평 방향으로만 반복함 |
repeat-y |
배경 이미지를 수직 방향으로만 반복함 |
no-repeat |
배경 이미지를 반복하지 않음 |
ex) 이미지 수평 반복
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url(images/bg.jpg); background-repeat: repeat-x; } </style> </head> <body> </body> </html> | cs |
ex) 이미지 수직 반복
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url(images/bg.jpg); background-repeat: repeat-y; } </style> </head> <body> </body> </html> | cs |
4. 배경 이미지 고정 여부
background-attachment 속성을 이용해 배경 이미지를 고정하거나 스크롤되면 배경도 함께 스크롤되게 할 지의 여부를 설정할 수 있다.
값 |
설명 |
scroll |
배경이 요소와 함께 스크롤됨 (default 값) |
fixed |
화면이 스크롤되어도 배경 이미지는 스크롤되지 않고 고정되어 있음 |
local |
배경이 요소의 내용과 함께 스크롤됨 |
5. 배경 이미지 위치 설정
background-position 속성을 이용해 배경 이미지가 시작하는 위치를 설정할 수 있다.
참고 사이트(https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position&preval=10px%20200px)
키워드로 설정
left top |
center top |
right top |
left center |
center center |
right center |
left bottom |
center bottom |
right bottom |
굵은 테두리 전체가 브라우저 화면이라고 가정했을 때, left top을 써줄 경우 화면의 좌측 상단 모서리에 위치하고, right bottom을 써줄 경우에는 화면 우측 하단 모서리에 이미지가 위치하게 된다.
픽셀/퍼센트등의 단위로 설정
'Xpx Ypx'이나 'X% Y%'와 같이 설정한다. X값은 가로 위치를 정의하며 Y값은 세로 위치를 정의한다.
'0% 0%'이면 왼쪽 상단 모서리에 위치하고, '100% 100%'이면 오른쪽 하단 모서리에 위치하게 된다.
px, % 이외에도 다른 CSS 에서 지원하는 단위를 사용할 수도 있다.
6. 배경 속성을 한 번에 설정하기
다양한 background 관련 속성들을 background 속성으로 한 번에 표시하는 방법이다.
각 속성의 값들을 띄어쓰기로 구분하며, 속성 값의 순서는
bg-color > bg-image > bg-repeat > bg-attachment > bg-position 순으로 작성한다.
만약 값들 중 생략된 값이 있으면 default 값으로 설정되기 때문에 상관이 없다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background : #ffffff url('images/bg.jpg') no-repeat fixed left top; } </style> </head> <body> </body> </html> | cs |
7. 다중 배경 설정(CSS3)
요소에 여러 개의 배경 이미지를 설정할 수 있다. 이 서로 다른 이미지들은 콤마(,)로 구분되며 처음으로 삽입되는 이미지가 가장 상단에 위치하게 된다. 또한 이미지에 따른 속성들도 각각의 콤마로 구분하여 준다.
background로 배경 속성을 한 번에 설정할 때도 여러 개의 배경 이미지를 삽입할 수 있다.
이 때는 background : url(첫 번째 배경) 배경 관련 속성들, url(두 번째 배경) 배경 관련 속성들, … ; 과 같은 형식으로 사용한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> body { background-image: url(images/img2.png), url(images/pattern.png); background-repeat: no-repeat, no-repeat; background-position: 100px 200px, left top; } </style> </head> <body> </body> </html> | cs |
8. 배경 크기 지정(CSS3)
background-size 속성을 통해 배경 이미지의 크기를 지정한다.
픽셀(px) 혹은 퍼센트(%)단위를 이용해 크기를 바꿀 수 있다.
또는 속성 값으로 auto, contain, cover 키워드를 사용할 수도 있다.
참고 사이트(https://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover)
'프로그래밍 > 웹표준' 카테고리의 다른 글
| [CSS] 5. 폰트 설정하기 (0) | 2017.09.18 |
|---|---|
| [CSS] 4. 텍스트 서식 지정 (1) | 2017.06.30 |
| [CSS] 2.CSS에서 색상 표현하기 (0) | 2017.06.24 |
| [CSS] 1.CSS 소개와 사용방법 (0) | 2017.06.18 |
| 14. 글자 서식 지정과 특수 문자 표현 (0) | 2017.05.14 |
댓글,
