엘리먼트의 배경
엘리먼트의 배경에 색상을 부여하거나 이미지를 표시하고 싶을 때 background 효과를 사용한다. 이 효과를 이용하면 배경에 사용된 이미지의 위치를 지정하거나, 반복 할 수 있다.
배경색
background-color:색상값
| Hex | 16진수로 색상 값을 표현, #ff0000 (붉은색), #00ff00(초록), #0000ff(파랑) |
| RGB | 붉은색, 초록, 파랑의 값을 조합해서 색상 값을 표현, RGB(255,0,0), RGB(0,255,0), RGB(0,0,255) |
| 별명 | red, blue, green등 칼러코드 참고 |
배경 이미지
background-image: url('이미지의 URL');
배경 이미지의 반복
background-repeat: 반복방식
| repeat | 수직, 수평 모두 반복함 |
| repeat-x | 수평만 반복함 |
| repeat-y | 수직만 반복함 |
| no-repeat | 반복하지 않음 |
참고 : w3school.com
배경 이미지의 위치
background-position: 위치값
| left top left center left bottom right top right center right bottom center top center center center bottom | 배경 위치를 지정 |
| x% y% | x%는 수평위치를 y%는 수직 위치를 의미하고, 이미지의 상대적인 위치를 지정한다. |
| xpos ypos | 이미지의 절대적인 위치를 지정한다. |
단축속성
body {background:#00ffff url('image.png') no-repeat right top;}
예제
example1.html - 이미지 대체 기법을 이용해서 <img> 태그 없이 로고 만들기 (github)
-이유 : 이미지는 크롤링 하는 로봇이 이해하기 힘든데, 아래와 같이 하면 의미전달이 가능하다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style> #logo { background: url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png') no-repeat; width: 200px; height: 215px; } .hidden_text { display: none; } </style> </head> <body> <div id="logo"> <span class="hidden_text">생활코딩</span> </div> </body></html> |
example2.html - 조각 이미지를 이용해서 그라디언트 효과의 배경 만들기 (github)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <style> body{ background-image:url('https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/course/94.png'); background-repeat:repeat-x; } h1{ color:white; } </style> </head> <body> <h1>Hello world</h1> </body></html> |
댓글 없음:
댓글 쓰기