📌 색상과 배경

💍 opacity

• 불투명도
• 기본값 1 (투명도가 없는 상태)
• 0.0 ~1.0 사이의 값
• 내부에 있는 모든 요소가 투명해짐 (글씨도)
• background-color에 쓰는 rgba() 에는 글짜는 투명도 조절 안됨(배경색만 조절)

💍 background-image

• color보다 image가 더 앞에 있음
• image가 있으면 color 안 보임
• image가 없어야 color 보임

💍 background-repeat

• 가로축, 세로축 모두 반복 (바둑판식)
• repeat-x 가로축으로 사진 반복
• repeat-y 세로축으로 사진 반복
• 요소 크기가 줄어든 게 아니라 배경이 일부분만 보이는 것
• no-repeat : 이미지 본연의 크기로 딱 한번만 반복

💍 backgound-position

• background-image 위치를 변경
• (0,0)으로부터 얼마나 떨어뜨려지는지 시작위치 쓰기
• backgound-position: x축 y축;
• backgound-position: top(y축), bottom(y축), center(x,y축 정중앙), left(x축), right(x축)

💍 backgorund-orgin

• 배경의 원점(0,0)을 테두리 시작점, 테두리 내부, 안쪽 여백 내부 중 하나로 지정
• content-box 패딩 안쪽 여백 내부 왼쪽 상단이 (0,0)
• padding-box 테두리 내부 왼쪽 상단이 (0,0) (기본값)
• border-box 테두리 시작점 왼쪽 상단이 (0,0)

💍 background-size

• 배경 이미지 크기 설정
• 지정하지 않으면 원본 크기로 나옴
• contain 요소안에 이미지가 다 보이게 쏙 들어가게 만듬, 이미지 비율 유지
• cover 확대하면서 요소를 꽉 채움, 이미지 비율 유지, 빈공간X

background-size: 100px 100px;
/*가로 세로 비율 깨지면서 크기 변경됨*/

background-size: 100px;
/*width값 변경됨, 이미지 비율 유지*/

background-size: 100%;
/*width 100프로로 꽉채워짐, 세로는 빌 수도 있음, cover랑 조금 다름*/

💍 background

• 단축속성

background: no-repeat center/80% url("");

• color는 맨 뒤
• size는 position 바로 뒤만 가능하며 / 붙여야함 (포지션뒤 사이즈!)

  ---

📌 transform

• 요소의 자리는 유지하되 형태를 변형시킴
• 함수를 사용함 (여러개도 사용 가능)
• 요소의 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용

💍 scale( )

transform: scale(1.5, 0.5);

• 가로는 1.5배(x축), 세로 절반으로 줄임(y축)
• 요소의 크기는 그대로 가지고 있되 안쪽으로 사이즈만 절반으로 줄어듬
• scaleX, scaleY
  가로나 세로 한개만 조절하고 싶을 때

💍 rotate( )

transform: rotate( );

• deg(도), turn(턴)
• 90deg = 0.25turn

💍 translate( )

transfom: translate(50%, 30%);
/*요소의 가로 50%, 세로% 만큼 이동*/

• x축, y축 움직임
• 음수도 가능
• 한가지만 입력한 경우 -> translateX랑 동일
• translate(100px) = translate(100px, 0) 입력한거랑 같음
• translateX, translateY

💍 skew( )

• 기울이게 변형
• skew(x각도, y각도)
• skew(하나만) = skew(x각도, 0)
• deg, trun 단위 사용
• skewX( ), skewY( )

  ---

📌 transform-origin

• 함수 아니고 별도의 속성임
• 기본값 center 정 가운데 원점
• background-origin 비슷 원점 옮김

transfomr-origin: bottom right;
/*오른쪽 아래 꼭지점으로 원점이 옯겨짐*/

transfomr-origin: 50px 100px;
/*요소 모서리에서 50px 100px 떨어진 곳으로 원점 이동*/

---

📌 transition

• A라는 형태에서 B라는 형태로 변환되는 시간

💍 transition-property

• 어떤 속성을 바꿀 것인가?

transition-property: margin-right, color;
transition-property: all;

💍 transition-duration

• 얼마만큼의 시간을 가지고 바꿀 것 인가?
• A의 css에서 B의 css로 바뀌는 시간

transition-duration: 500ms, 3s;

• 밀리세컨 : 1000ms=1s

💍 transition-delay

• transition되는 걸 지연시키는 속성

transition-delay: 1s;
/*마우스를 올리고 1초 뒤에 transition됨*/

💍 transition-timing-function

• transition되는 사이 속도를 변형
• transition-timing-function: ease or linear or ease-in-out 등

💍 transition

• 단축속성
• 시간 자료형이 두가지가 있다면 앞쪽에 오는게 duration, 뒤쪽에 오는게 delay
  보통 property name | duration | timeing fuction | delay 이순서 지켜서 작성함

transition: margin-left 4s ease-in-out 1s;