4일차 : CSS 배경

Background

background : 색상 이미지경로 반복여부 위치 스크롤특성

예시

일부 속성을 사용하지 않을 수도 있다.

.box1 {
    background: url(../img/image.jpg) no-repeat right scroll;
}

 

background-image

기본 값 none

url(경로)

요소의 배경으로 넣는 것이기 때문에 요소의 크기가 반드시 크기가 있어야 한다.

.box {
 background-image: url(
  width: 120px;
  height: 80px;
}

 

여러개 배경을 넣을 수도 있다. IE8이하 사용할 수 없다. (일반적으로 11버전이라 문제 없을 것)

일반적으로 다중으로 배경에 넣는 일은 많지 않다.

 

background-repeat

기본값 : repeat (기본적으로 크기가 늘어나면 계속 반복적으로 표시된다.)

repeat-x : 수평으로만 출력

repeat-y : 수직으로만 출력

no-repeat : 반복X

 

background-position

기본값 0%, 0% (X축, Y축)

왼쪽 상단은 0%, 0%, 우측 하단은 100%, 100%

방향 top, bottom, left, right, center

단위 px, em, cm 등 단위로 지정

 

위치는 앞뒤를 바꿀 수 있다.

하지만 단위로 입력할 경우 앞뒤를 바꿀 수 없고 x, y에 반영된다.

예시

.box {
    background-position: top left;
    background-position: left top;
}

left 50px 이런식으로 입력도 가능하다. 그러면 x축은 left니 제일 왼쪽에 붙을 것이고 위로부터 50px떨어진다.

 

background-attachment

기본값 scroll

fixed : 배경이미지 고정, 스크롤해서 내려도 이미지는 그대로 있다.

local 많이 사용은 안되나 요소 내부 스크롤 시 배경이미지가 같이 스크롤

 

예시

.section {
    height: 300px;
    border: 2px dashed lightgray;
}
.section2 {
    background-image: url("starbucks.jpg");
    background-size: auto 100%; // 가로 100% 꽉차게
    background-position: right bottom // 우측 하단을 기준으로 잡게
    background-attachment: fixed; // 스크롤해서 내려갈 때 이미지는 뷰포트 기준 그대로 고정.
}

 

local 예시 : 배경을 지역에 국한되게 만들어서 스크롤을 내릴 때 이미지가 딸려서 내려간다. (거의 사용 경우는 없다.)

 

background-size

기본 : auto (원래의 크기로 표시)

단위 : width height 순으로 입력, width만 입력하면 비율 자동으로 맞춰서 출력

cover : 배경이미지 크기 비율 유지하면서 요소의 넓은 너비에 맞춰짐 ( 이미지가 잘릴 가능성 높음 )

contain :  배경이미지 크기 비율 유지하면서 요소의 짧은 너비에 맞춰짐 ( 이미지 외에 빈 공간이 생길 수 있음 )

 

---

Transitions

CSS의 전상태와 후상태의 중간 단계를 처리해준다.

 

transition-property : 기본값은 all, 내가 특정할 수도 있다.

transition-duration : 기본값은 0s, 전환 효과 지속시간. .5s, 0.5s, 1s 다 동작한다. 1000ms도 동작한다.

transition-timing-function : 기본값 ease

transition-delay : 기본값 0s

 

바뀌기 전 상태에 입력해주면 된다.

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition-property: width, background; // 가로와 배경색상을 전환하겠다.
  transition-duration: 1s
}
.box:hover {
  width: 300px;
  background: dodgerblue;
}

 

보통 단축 속성을 많이 사용한다. 아래와 같이 개선한다.

.box {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 50px;
  transition: width 1s, background 1s; // 이렇게 다 적용할꺼면 all이 기본값이니 1s만 해도 된다.
}
.box:hover {
  width: 300px;
  background: dodgerblue;
}

 

transition-timing-function은 

ease

linear

ease-in

ease-out 등이 있는데 검색을 해서 눈으로 시각화된 것을 보는 것이 빠르다.

step(4) 이런식으로 단계별 끊겨서 보이는 것도 가능하다. transition 2s step(4) 이런식으로.

 

transition-delay를 넣을 때

혹여나 transtiion: 2s 3s; 라고 작성했으면 앞에것이 duration  뒤에것이 딜레이다.

 

Transform

요소의 변환 효과

2D 변환 함수

요약

translate : 이동

scale : 크기

rotate : 회전 -> 사용할 때 rotate(45deg)

skew : 비틀기 -> 사용할 때 skew(10deg, 5deg)

마름모를 만들 수 있다. skewX(10deg)

 

예시

.box {
    transition: 1s;
}
.box:hover {
    transform: translate(100px) rotate(45deg); // 띄어쓰기로 여러개 함수를 입력 가능하다.
}

 

 

3D 변환 함수

예시

✅. perspective(원근감)는 항상 제일 앞에 있어야 한다. 뒤에 있으면 동작하지 않는다.

img {
  width: 300px;
  border: 1px solid lightgray;
  transform: perspective(500px) rotateX(45deg);
}