배경/리스트 (Background/List)

* 배경 이미지 저장하기

- 웹 페이지나 테이블의 셀에 배경 이미지를 넣을 수 있음.

.mybg {

background-image: url("wall.png");

background-repeat: no-repeat;

background-attachment: scroll;

background-position: center center;

}

1) background-image 프로퍼티

- 배경 이미지를 지정함.

- http로 시작하는 절대 URL이나 CSS의 상대 URL로 지정.

- 이미지가 없을 때는 none을 지정.

2) background-repeat 프로퍼티

- 반복할 방향을 지정함.

no-repeat : 반복 없음

repeat : 가로 세로로 반복

repeat-x : 가로로 반복

repeat-y : 세로로 반복

3) background-attachment 프로퍼티

- 이미지를 고정할 것인지 지정함.

scroll : 문서와 함께 스크롤

fixed : 웹 브라우저 화면에 고정

4) background-position 프로퍼티

- 이미지의 표시 위치(가로, 세로)를 지정함.

left : 왼쪽 맞춤

right : 오른쪽 맞춤

center : 가운데 맞춤

top : 위쪽 맞춤

bottom : 아래쪽 맞춤

그 외 %나 px도 지정 가능

- background 관련 값을 일괄 지정하는 background 프로퍼티도 있음. 값의 순서는 상관 없음.

background: color image repeat attachment position;

*리스트 설정

- 항목 쓰기(리스트)의 마크를 설정함.

.myliststyle {

list-style-type: decimal;

list-style-image: none;

list-style-position: outside;

}

1) list-style-type 프로퍼티

- 항목 쓰기의 마크를 지정함.

none : 마크 없음

disc : 검정 동그라미 (●)    // 초기값

circle : 흰 동그라미 (○)

square : 검정 사각 (■)

decimal : 숫자(1, 2, ...)

decimal-leading-zero : 맨 앞에 0을 붙인 숫자(01, 02, ...)

lower-roman : 소문자 로마 숫자(i, ii, ...)

upper-roman : 대문자 로마 숫자(I, II, ...)

lower-greek : 소문자 그리스 문자(α, β, ...)

lower-latin, lower-alpha : 소문자 알파벳(a, b, ...)

upper-latin, upper-alpha : 대문자 알파벳(A, B, ...)

armenian : 아르메니아 숫자

geogian : 그루지아 숫자

2) list-style-position 프로퍼티

- 항목 쓰기 마크의 위치를 지정함.

outside : 리스트 항목의 바깥쪽    // 초기값

inside : 리스트 항목의 안쪽

3) list-style-image 프로퍼티

- 항목 쓰기 마크의 이미지를 지정함.

- http로 시작하는 절대 URL이나 CSS의 상대 URL로 지정.

- 이미지가 없을 때는 none을 지정.     // 초기값

- list-style 관련 값을 일괄 지정하는 list-style 프로퍼티도 있음. 값의 순서는 상관 없음.

list-style: type image position;

내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)