style을 이용하여 전체배경에 여러 개의 이미지 고정하기 | style태그의 기본형태 (예)
<style>
body, #primaryContent {
background-image:url(http://cfile287.uf.daum.net/original/9901D23359EFF936282E46);
background-attachment: fixed;
background-color:#ffffff;
background-repeat: no-repeat;
background-position:right bottom;
background-size:100% 100% ;
}
</style>
| 속 성 명 | 속 성 값 | 입 력 방 법 | background-image (배경 이미지) | url(이미지의 주소) | 사용하는 이미지는 주로 jpg, png, gif파일로 여러 개의 이미지주소를 아래와 같이 차례로 입력함 (앞에 입력되는 순서로 앞으로 이미지가 자리함) url(이미지1의 주소),url(이미지2의 주소),.......url(이미지n의 주소);
또는 아래로 나열 url(이미지1의 주소), url(이미지2의 주소), . . url(이미지n의 주소); 각각의 입력값은 콤마(,)로 구분하고, 맨 끝에는 세미클론(;)으로 마감 | [입력 예 : 이미지 3개를 배경에 고정] background-image: url(http://cfile266.uf.daum.net/image/99AD353359EFF94D280D23), url(http://cfile252.uf.daum.net/image/9983EF3359F55F912FB6BB), url(http://cfile287.uf.daum.net/original/9901D23359EFF936282E46); | background-attachmen (배경 고정) | fixed | fixed (배경에 모든 이미지가 고정되는 것이니-공통-한 번만 입력함) | [입력 예] background-attachment: fixed; | background-color (배경바탕색) | 색상명이나 헥사값 또는 RGB값 | 색샹명 이나헥사값 또는 RGB값으로 한 번만 입력 맨 뒤의 배경이 화면전체를 커버할 경우는 특별히 지정하지 않아도 되며, 화면에 여백이 생기거나, png 파일을 사용할 경우는 필요에 따라 색상을 지정함 | [입력 예] background-color:#e0e2f0; background-color:green; background-color:rgb(0,255,12); | background-repeat (배경이미지 반복) | repeat(반복) no-repeat(반복안함) repeat-x(x축반복) repeat-y(y측반복) | 각 이미지의 반복여부를 지정하는 것으로 - 반복하는 이미지가 없으면 공통으로 no-repeat(한 번 입력) - 하나라도 반복하는 이미지가 있으면, 각 이미지의 반복 여부를 아래처럼 구분하여 차례로 각각 입력 이미지가 화면 전체로 반복할 때는 "repeat", 반복하지 않을 때는 "no-repeat" X축방향으론 반복하고, Y축방향으론 반복하지 않으면 "repeat-x"를 X축방향으론 반복하지 않고, Y축방향으론 반복하면 "repeat-y"를 각 이미지 순서대로 지정 입력 각각의 입력값은 콤마(,)로 구분하고, 맨 끝에는 세미클론(;)으로 마감 | [입력 예] background-repeat: repeat-x, repeat-y, no-repeat; repeat-x (맨 앞의 이미지가 좌우로 반복하고 상하로는 반복 없슴의 예) repeat-y (가운데의 이미지가 좌우는 반복없고, 상하로는 반복하는 예) no-repeat(맨 뒤의 이미지는 반복하지 않음의 예) | background-position (배경이미지 위치) | X축방향(left,center,right) Y축방향(bottom,center,top)
픽셀(px) | 각 이미지의 고정 위치를 지정하는 것으로, 위치명과 픽셀값을 사용하여 X,Y선상의 좌표 표시로 각각 지정 (좌표의 기준점은 화면 왼쪽 상단이 됨) X,Y선상의 위치명만으로 조합, 또는 X,Y선상의 위치명과 픽셀값의 혼합 조합, 또는 X,Y선상의 픽셀값만으로 조합하여 각각 지정할 수 있슴 (예: right bottom, left 10px, 250px 10px, 300px top 등) (단 픽셀값에는 px(단위)를 꼭 표시해야 함) 각각의 입력값은 콤마(,)로 구분하고, 맨 끝에는 세미클론(;)으로 마감 | [입력 예 1] background-position: 300px top, 200px 300px, right bottom;
[입력 예 2] : 각 기준위치에서 일정 거리를 이동할 때(기준위치명 뒤에 공백주고 px 수치 붙임 background-position: left 250px bottom; (윈쪽 기준점에서 250px 안쪽으로 이동)
[입력 예 3] : 오른쪽 기준점에서100px 안쪽으로 이동하고 밑에서 위로 200px 이동할 때 background-position: right 250px bottom 200px; | background-size (배경이미지 크기) | 공백
픽셀(px)
%
cover | 사용하는 배경이미지의 크기를 조정하며 나타낼 수 있는 것으로, - 사용하는 이미지 모두를 원본 크기 그대로 나타낼 때는 원본 값을 입력하거나 공백으로 함. (하나의 이미지라도 크기에 변동이 있을 때는 각각의 이미지 지정값을 입력해야 함) - 픽셀(px)수치로 나타낼 수 있슴(원본 크기를 그대로 나타낼 때는 원본 이미지의 속성에서 크기를 확인하여 사용하면 됨(꼭 px단위를 붙임). - %로 나타낼 때 %의 값은 화면 크기(폭, 높이)에 대한 비율임 - cover는 화면(폭과 높이)과 이미지(가로와 세로)크기의 각각 비율에서 큰 비율로 이미지가 확대되어 나타나게 됨 (따라서 cover는 맨 뒤의 배경이나, png파일일 경우만 사용이 가능 함-아니면 뒤에 이미지는 보이지 않게 됨) (%나 cover를 사용할 경우는 원본이미지가 변형(일그러짐, 비균형) 또는 확대될 수 있슴) 각각의 입력값은 콤마(,)로 구분하고, 맨 끝에는 세미클론(;)으로 마감 | [입력 예 1] background-size:292px 212px, 350px 350px, 100% 100% ;
[입력 예 1] background-size:292px 212px, 60% 600px, cover ; | 정 리 | 1.속성과 속성값은 콜론(:)으로 구분하며 속성값 끝은 세미콜론(;)으로 마감함
2. 속성값을 여러 개 입력할 때 :
각 입력값은 반드시 콤마(,)로 구분하며, 맨 끝에서는 세미콜론(;)으로 마감
3. 픽셀단위를 사용할 때는 꼭 px단위를 붙여야 함
4. 이미지 배치의 기준점은 좌측 상단이며,
위치 지정이름(left, right, top, bottom등) 사용시는 그 곳이 기준점
5. 이미지 크기 지정에 %(백분율)나 cover를 사용할 때는 이미지 배열순서
(앞과 뒤)에 유의 하여 뒤에 이미지가 가려질 경우를 고려하며 지정할 것
6. 이미지 X,Y위치 지정좌표는 앞에 값이 X좌표이나, left, right, bottom, top
같은 명칭을 사용할 경우는 순서에 관계없이 우선적으로 적용됨
7. 속성값을 이미지 개별적으로 지정할 때는 이미지 갯수와 속성값의 갯수가
같아야 됨
| 배경으로 실제 사용한 예
<style>
body , #primaryContent
{
background-image:
url(http://cfile254.uf.daum.net/image/9916F9375E5E4D691A2A11),
url(http://cfile295.uf.daum.net/image/9903E3495E61DDFF30909E),
url(http://cfile290.uf.daum.net/image/186078104B6598B99EBB9B),
url(http://cfile287.uf.daum.net/original/9901D23359EFF936282E46);
background-attachment: fixed;
background-color: ;
background-repeat:no-repeat, repeat-x, repeat-y, no-repeat;
background-position:right 50px bottom 150px, left top 50px, left 300px bottom, right bottom;
background-size:380px 350px, 150px 137px, 90px 202px, 100% 100% ;
}
</style> |
STYLE 태그의 이미지 다중 배치(다른 이름으로 대상 저장) |
+
|