[ 전체 배경용 style 소스 기본 구성 ]
소스 사용 방법 :
- 공통 : 각 속성의 값은 콤마(,)로 구분하며, 끝에는 세미콜론(;)으로 마감함
{콤마와 세미콜론의 사용 오류는 게시물 출력에 문제를 발생 시키니 주의 요함}
- 각 속성의 값이 사용하는 이미지에 따라 다르면 각각 구분 입력해야 하며,
각 속성의 값이 모두 같을 때는 속성값은 한 번만 입력해도 됩니다.
1. 사용할 이미지를 입력합니다.
2, 배경 이미지의 고정 또는 유동 여부를 지정하는 곳으로 특별한 경우가 아니면
background-attachment: fixed; 를 그대로 사용합니다.
배경 이미지를 화면 스크롤에 따라 움직이게 할 경우는
background-attachment: scroll; 을 사용합니다.
3. 바탕 배경색을 지정하는 곳으로 "색 이름"이나 "헥사 코드값"으로 지정합니다.
(사용하는 이미지가 전체를 채울 때는 가려지므로 지정 의미는 없습니다)
예 : background-color: blue; 또는 background-color:#d1f3e9; 등
(별도로 지정하지 않으면 게시판 바탕색으로 나타 남)
4. 사용 이미지의 반복 여부를 지정하는 곳으로 아래와 같이 지정할 수 있습니다.
repeat(화면전체로 반복), no-repeat(반복안함),
repeat-x(x축 방향으로만 반복), repeat-y(y축 방향으로만 반복)
※ 이미지에 따라 반복 여부가 다를 때는 각각의 이미지에 대해 배치 순서대로
각각의 "반복여부 지정 값"을 콤마로 구분하면서 지정해야 합니다.
예 : background-repeat: no-repeat; ☜ 모두 반복하지 않을 때,
background-repeat: repeat-y, no-repeat, no-repeat; ☜ 값이 다를 때,
5. 이미지의 배치 위치를 지정하는 곳으로 좌표로 지정합니다.
가로축 방향에는 left, center, right 를 기본 값으로 사용하며,
세로축 방향에는 top, center, bottom 을 기본 값으로 사용합니다.
기본 값에는 + - 수치로 부분적으로 위치 이동을 지정할 수도 있습니다.
(수치를 입력할 때는 위치 표시와 공백으로 사이를 띄움 ; 예 right 150px)
※ 이미지에 따라 배치 위치가 다를 때는 각각의 이미지에 대해 배치 순서대로
각각의 "배치위치 지정 값"을 콤마로 구분하면서 지정해야 합니다.
예 : bottom right ☜ 모두의 지정 위치가 같을 때
bottom right, top right 150px, bottom right; ☜ 지정 위치가 다를 때
top 100px right 150px, bottom 200px right, bottom right; 등
6. 이미지의 크기를 지정하는 곳으로 px, %, cover 등을 사용합니다.
(크기 값을 공백으로 하면 원본 크기로 출력됨)
※ 하나의 이미지라도 크기에 변동이 있으면 각각의 이미지 지정값을 입력해야 함)
※ 원본 크기의 폭과 높이의 비를 같게 할 때는 폭 또는 높이 값만 지정해도 됨
※ 원본 크기의 폭과 높이의 비를 다르게 할 때는 폭과 높이 값을 각각 지정함
※ px 단위로 지정하면 그 크기로 출력됨
※ %로 단위로 지정하면 화면 크기(폭, 높이)에 % 값에 대한 비율로 출력됨
예 : background-size:100% 100% ; 이면 이미지 비(比)에 관계없이
전체가 화면에 출력 됨{비(比)에 따라 출력 이미지가 일그러질 수도 있슴}
※ cover는 화면(폭과 높이)과 이미지(폭과 높이)크기의 각각 비(比) 비교에서
큰 비에 맞추어 이미지가 확대되어 출력 됨
예 : background-size: cover ; 이면
화면크기 1920 * 1080 이고, 이미지 크기 1000 * 600 일 때는
폭은 1920/1000=1.92 , 높이는 1080/600=1.8 가 되니 比가 큰 1.92 배로
확대되어 즉 1920 * 1152의 크기(높이=600*1.92)로 이미지가 출력되게 됨
따라서 화면 높이(1080)보다 커진(1152)의 일부(1152-1080=72)는 잘려지게 됨
※ 100% 나 cover의 경우는 화면 전체를 가리게 되므로 맨 뒤에 배경으로만 사용 함
★ 속성 값을 두개 이상 입력할 때는 꼭 콤마(,)로 구분하고,
끝에는 세미콜론(;)으로 마감합니다. ★
|