[CSS]Day8 -background

Day8 -background-

[1] background

background-color -> 배경색상 지정

background-image : url("파일경로"); -> 배경이미지

background-repeat : repeat/ repeat-x / repeat-y /no-repeat; ->배경이미지 반복 설정

background-attatchment : scroll / fixed; -> 스크롤에 따른 배경 이미지 처리

background-position :left/ right/ top/ bottom /center /px값; -> 배경 이미지 위치

background: 위의 다섯가지 속성을 공백으로 구분하여 일괄 명시. 불필요한 요소는 생략 가능.

[배경관련 속성 활용]

- 이미지에 텍스트가 포함된 경우

1) 원본 텍스트를 HTML안에 명시.

2) 이미지는 그 안에 배경으로 설정.

3) 원본 텍스트를 text-indent 속성으로 화면에서 멀리 떨어지도록 설정.

- 이미지 클립핑  ---> 용량 감소/페이지 로딩 시간 단축

1) 아이콘, 버튼 등의 이미지를 하나의 이미지 파일에 모두 모아놓기.

2) 표시할 항목의 크기와 동일한 박스를 준비한다. 그 안에 배경 이미지로 설정.

3) background-position 속성으로 이미지를 표시하고자 하는 위치까지 이동.

- background-size 속성:

배경 이미지의 크기를 변경할 수 있는 속성

background-size: 가로축크기 세로축크기(px단위값/%단위값);

background-cover; ---> 가로 크기는 박스 가득/ 세로 크기는 설정된 가로 크기에 따라 비율적으로 표시

background-contain; ---> 세로 크기는 박스 가득/ 가로 크기는 설정된 세로 크기에 따라 비율적으로 표시

(CSS3)

background 이미지 중첩처리

background: url(img/123.jpg) right 0 repeat-y.

            url(img/456.jpg) no-repeat,

            url(img/789.jpg) repeat-x;

---> 위 경우 맨 밑에 적힌 789.jpg가 맨 밑에 깔림

(CSS3)

background-image에 Gradient 속성 추가

-각 브라우저마다 차이를 보이므로 각각 따로 코딩해야 함.

Webkit(apple) --> safari, chrome, naver whale

Mozila --> firefox, IE 11, 10(,9, 8), MS Edge

Opera

-webkit-gradient: (유형[linear/radial], 시작위치 끝위치, 시작색상, 끝색상);

-moz-유형-gradient: (시작위치 각도(deg), 시작색상, 종료색상);

background: -webkit-gradient(linear, left top, left bottom, from(#06f), to(#fff));

background: -moz-linear-gradient(top, #06f, #fff);

background: -webkit-gradient(linear, left bottom, right top, from(#06f), to(#fff));

background: -moz-linear-gradient(bottom 45deg, #06f, #fff);

background-image: -webkit-linear-gradient(top, #9fd6c2 8%, #57d6c2 74%);

background-image: -moz-linear-gradient(top, #fce17e 5%, #222 90%);

---

[2] Transform

rotate(돌기): -브라우저접두사-transform: rotate(+-각도);

* z-index 속성 적용 가능

scale(크기변경): -브라우저접두사-transform: scale(가로비, 세로비);

-webkit-transform: scale(0.5, 1.5);

translate(위치변경): -브라우저접두사-transform: translate(가로좌표, 세로좌표);

-position: relative;와 비슷하나 이동 좌표 기준이 요소의 중앙임.

-주변 요소는 위치 변화 사실을 전혀 모르기 때문에 스크롤도 생기지 않음.

skew(기울게): -브라우저접두사-transform: skew(가로축각도, 세로축각도);

[3] 애니매이션 효과

Transition: 가상클래스와 함께 사용 (:hover...)

-브라우저접두사-transition: 속성명 시간 옵션;

A {

     ...변경 전 내용...

     -브라우저접두사-transition: all 1s(1000ms) 옵션;

}

A:hover {

     ...변경 후 내용...

}

* 옵션:

linear: 전 구간 동일 속도로 재생

ease: 중간을 빠르게, 시작과 끝 부분 느리게

ease-in: 시작 부분을 느리게

ease-out: 끝 부분을 느리게

ease-in-out: 시작과 끝 부분을 느리게

** opacity(투명도) / visibility

opacity:0;

visibility:hidden;