배경: 백그라운드 (background)
1. 배경색 지정
- 요소의 border 안쪽에 색이 채워진다.
<body> <p> 배경색과 배경그림 </p> </body>
p { background-color: #00FF33; }
2. 배경 이미지
- 의미있는 이미지 컨텐츠와 별도로 장식용 이미지를 넣을 수 있다.
- 요소의 크기보다 작으면 가로 및 세로 방향으로 반복되어 표시된다.
- 이미지를 사용할 수 없는 경우를 대비하여 배경색을 지정
3. background-repeat
- 배경 이미지의 반복 여부와 방법을 지정
3. background-position
- 배경이미지 배치 지정 혹은 이미지 반복의 시작점 지정
- 가로 위치값과 세로 위치값의 순서로 입력
background-position 지정방법
1) 키워드 : 가로방향(left, center, right), 세로방향(top, center ,bottom)
2) 길이 : px, mm, em
3) 퍼센트 : %
4. background-attachment
- 배경 그림이 스크롤이 될 것인지, 고정 될 것인지를 결정
- 사용 가능한 값은 scroll(기본값), fixed
5. 단축 프로퍼티 사용
- font : [font-style] [font-variant] [font-weight] font-size/line-height font-family ;
font : 12px/20px Verdana, Arial, sans-serif;
- border : border : width style color width style color ;
border : 1px solid red;
- background:color position size repeat origin clip attachment image;
background: #fffurl(‘bg.gif') no-repeat fixed center;
6. 이미지 스프라이트
- 여러 개의 이미지를 하나의 그림 파일로 작성
- 이미지에 대한 http 요청을 줄여서 성능을 개선
- http://csssprites.com/
CSS SPRITE GENERATOR (http://csssprites.com/)
- CSS 스프라이트를 자동으로 구현해주는 사이트
- CSS 스프라이트 기법이란 용량이 작은 여러 개의 이미지 파일을 하나의 파일로 통합하여 웹페이지를 불러오는 속도를 향상시키는 기법
- CSS 스프라이트 기법은 이미지에 대한 http 요청을 줄여 성능을 개선해준다.
- 이미지 파일을 선택하여 업로드하면 사이트에서 자동으로 한 개의 통합 이미지를 만들어주고, CSS 구문을 만들어주는 사이트다.
check.png
heart.gif
위의 2개의 이미지를 CSS 스프라이트에서 돌리면 아래와 같은 이미지가 생성된다.
result.png
사용방법은 다음과 같다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML lang="ko" xml="ko">
<HEAD>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<TITLE> New Document </TITLE>
<style type="text/css">
div {height:30px;border:1px solid red;}
.a{background:url('img/result.png') no-repeat 0px 0px;}
.b{background:url('img/result.png') no-repeat 0px -30px;}
</style>
</HEAD>
<BODY>
<div class="a">111</div>
<div class="b">222</div>
<div>333</div>
</BODY>
</HTML>
'웹접근성과 웹표준' 카테고리의 다른 글
| 폼(FORM)의 웹 접근성 요소 (0) | 2013.07.22 |
|---|---|
| 테이블(TABLE)의 웹 접근성 요소 (0) | 2013.07.21 |
| CSS 박스 모델의 이해 (0) | 2013.07.20 |
| CSS 규칙과 선택자 (0) | 2013.07.20 |
| HTML 코딩 복습: 헤딩<h1>, 목록<ul><ol><li> (0) | 2013.07.20 |
