CSS, background 를 알아보자.

background-img : url( 사진 경로 ) ; 

url 함수에 경로를 지정하여 백그라운드 이미지를 지정한다.

background-image: url(../image/hamburger_img.JPG);
}

 

background-repeat:

이미지의 반복 여부를 결정.

배경크기가 이미지보다 클 경우 부분 조각이미지로 반복하여 패턴을 완성함으로 메모리 낭비를 최소화.

 

background-repeat: repeat ; 

디폴트 값.

가로 세로 방향으로 반복한다.

 

background-repeat: no-repeat ; 

반복하지 않겠다.

 

background-repeat: repeat - x ;

수평방향으로 반복하겠다.

 

background-repeat: repeat - y ;

수직 방향으로 이미지를 반복하겠다.

 

---

background-position :

수평 수직에 대한 이미지 배치.

형식 : background-position : x 값 y 값 ;

/*※ px, %, em 등의 단위로도 수평, 수직 위치 지정 가능.
*/
.position_cc {
    background-repeat: no-repeat;
    background-position: center center;
    /* background-position: center; */
}

.position_rb {
    background-repeat: no-repeat;
    background-position: right bottom;

 

 

Imge Sprites 기법
다중 이미지들을 하나로 이미지화 하여 background-position 속성을 이용하여
개별 이미지의 크기에 맞는 너비와 높이를 지정하여 로드한다.
이미지 별 로드할 때의 메모리를 최소화 하기위한 기법

 

다중 이미지들을 하나로 이미지화 한 후 , 사용할 이미지의 크기 지정은

그림판의 눈금자 (보기메뉴) 를 이용하면 너비와 높이를 알 수 있다.

좌표 지정시 이미지 사이 경계선 1px 도 포함시켜 이동함을 주의하자.

.cafe {
    background-position-x: -305px;
}

.blog {
    background-position-x: calc(-305px * 2);
}

.knowledge {
    background-position-x: calc(-305px * 3);

 

수직 메뉴 구성법 ( li>a )
1 ) 리스트의 스타일을 제거,
a 태그 사이즈 조정을 위한 인라인-블럭화
2 ) a의 백그라운드 사이즈를 확인.
3) 백그라운드 이미지 위치를 포지션을 통해 이동시켜 조율.
4)리스트 내의 a 텍스트를 text-indent를 음수값을 주어 보이지 않게 함.
5) a태그 의 배경자체로 메뉴를 구성.

수평 메뉴 구성법
1) 리스트 스타일을 제거,
리스트의 나열을 위한 인라인-블럭화
2)백그라운드를 수직메뉴와 같이 구성해줌.
3) 인라인 특성으로 인해 자동 개행을 막기 위해 nowrap 을 설정.

 

---

background-attachment : 

백그라운드 배경이 해당 요소 자체에 고정인지 ,

또는 뷰포트에 대한 고정인지를 결정.

 

:scroll ; ( 디폴트 값)

백그라운드 배경이 해당 요소 전체에 고정됨.

뷰포트 영역을 넘쳐 스크롤이 되도 요소 전체에 고정한다.

 

:fixed ; 

배경이 뷰포트에 의해 고정되어 표시된다.

 

---

background-size :

단위를 사용하여 원본 사이즈를 조정.

사이즈는 이미지 원본 크기와 관계없이 이미지 전체의 크기를 할당된 크기 내에서 표현.

단, 이미지 원본은 실제 크기가 이를 포함하는 컨테이너 보다 작은 경우 ,

컨테이너 전체를 백그라운드 이미지로 다 채우지는 못할 수 있음의 주의.

 

body {
    /* 수평, 수직 크기를 동시 지정. */
    /* background-size: 100vw; */

    /* 아래와 같이 수평, 수직 크기를 순서대로 별도 지정 가능. */
    /* background-size: 300px 500px; */
}

 

 

: cover ;

이미즈를 컨테이너에 가득 채우되,

컨테이너 크기 변화에 따른 수평 수직구조에 대한 이미지 늘림과 줄임으로 원본 왜곡 현상을 최소화하는 방법.

좀 더 자연스러운 배경으로 표현이 가능하다.

 

단 , 컨테이너를 확장하는 경우

이미지에 대한 늘림 대신 확대가 적용됨으로 이미지 잘림 현상이 발생 할 수 있다.

이때 position 의 위치는 이미지 확대시의 기준점이 되어 , 0 또는 center로 지정함으로

이미지 확대시의 이미지 중앙을 기준으로 확대 축소가 가능하다.

    background: url(../image/starbucks_logo.jpg) center/cover; 
    background: url(../image/starbucks_logo.jpg) top/cover;

 

---

 

background :

repeat / position / attachment / color / size / img 등을 하나로 통합하여 표현.

단 , position 과 size 는 / 구분자를 기준으로 순서대로 구분되어야지만 , 

다른 속성들과 순서는 상관 없음.