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;