[4주차] 2. CSS의 배경 관련 속성와 전환효과 & 변환효과

CSS 배경에 관한 속성

background : 요소의 배경 설정

1. 단축 속성

• background : 색상 이미지경로 반복 위치 스크롤특성;
  • 이미지 경로는 url()함수 사용
  • 특정 값 사용하지 않아도 됨(누락 가능)
  • 다중 배경 이미지 삽입시 하나의 background 단축속성, 이미지경로 반복여부 가로사이즈 세로사이즈, 이미지경로 반복유무; 로 작성
  • 다중 배경 이미지는 IE8 이하 버전에서 사용 불가능

2. 개별 속성

• background-color : 요소의 배경 색상 지정, 기본값은 transparent 투명
  • 요소의 색은 기본적으로 투명하다.
  • 단축 속성으로 더 많이 이용
• background-image : 요소 배경에 하나 이상의 배경 이미지 삽입, 기본값은 none
  • background-image : url(“경로”); width:auto; height: auto;
  • none : 기본값으로 이미지 없음을 의미
  • url(“경로”) : 이미지 경로(URL), url 함수 사용
  • 배경 이미지 삽입시, 요소의 가로 사이즈 , 세로사이즈 설정되어 있어야 배경 이미지가 보일 수 있다
  • 쉼표를 통해서 이미지의 여러 장을 요소의 배경 삽입할 수 있다.(다중 이미지 삽입)
  • img 태그가 아닌 background-image 속성으로 가져오는 건 요소의 배경을 가져오는 것인데
    이때 요소의 가로사이즈 세로사이즈를 입력하지 않고 경로만 가져온다면 배경 가로세로 사이즈 값은 auto로 처리되어 블록요소의 기본값인 width:100%, height:0 으로 설정되어 아무것도 출력되지 않는다. 그래서 요소의 가로 세로 사이즈를 입력해 줘야 한다
• 배경이미지 삽입시 요소의 사이즈 범위 내에서 왼쪽 상단에서부터 반복 출력된다.
• background-repeat : 배경이미지의 반복 유무로 기본값은 repeat
  • repeat : 기본값으로 배경이미지를 수직, 수평으로 반복
  • repeat-x: 배경이미지를 수평으로 반복
  • repeat-y : 배경 이미지를 수직으로 반복
  • no-repeat: 반복 없음
• background-position : 배경이미지의 위치를 실질적으로 설정. 기본값은 0 0
  • 이 속성을 통해 배경 이미지가 해당하는 요소의 어디 부분에 위치할 것인지에 대한 실질적인 위치 정보 전달
  • position의 경우 위 오른쪽 아래 왼쪽에 각 값을 입력해서 좀더 자세하게 위치를 정할 수 있었지만 background-position의 경우 x축과 y축을 지정하기 때문에 위쪽에서부터의 거리와 왼쪽에서부터의 거리만 지정해 줄 수 있다.
  • 값을 방향과 단위를 동시에 같이 사용할 수 있다.(단, 순서를 바꿔서 입력하면 안됨. x축은 left, right만 입력 가능, y축은 top, bottom만 입력 가능)
  • background- position : x(왼쪽)축값 y(오른쪽)축값; 으로 입력 (값이 단위 %, px 등 일 경우)
  • % (단위): 기본 값은 0% 0%이다. 왼쪽 상단 모서리는 0% 0%(left top), 오른 쪽 하단(right bottom) 모서리는 100% 100%, % 입력 시 주의해야 함(100%라고 진짜 100%를 의미하는 것이 아니라 요소의 영역 끝 위치을 의미한다.)
  • 방향 : 방향을 입력하여 위치 설정(top, bottom, left, right, center), 순서가 뒤바뀌어도 됨(방향인 경우에만), 요소 전체 가운데 이동시 center 한번만 입력해도 됨
• 단위 : px, em, cm 등 단위로 설정
• background-attachment : 배경이미지의 스크롤 여부(특성)으로 기본값은 scroll
  • 요소가 스크롤 될 때 배경이미지를 어떤 식으로 표시할거냐(배경이미지의 스크롤 여부)
  • scroll : 기본 값으로 배경 이미지가 요소를 따라서 같이 스크롤 됨
  • fixed : 요소는 스크롤이 되지만 요소에 깔려져 있는 배경 이미지는 스크롤 되지 않고 화면(뷰포트)에 고정되버림.
  • local : 많이 사용x, 요소의 내부에 스크롤 있을 경우 배경이미지도 같이 스크롤 됨, 스크롤 하는 어떤 특성이 지역적으로 바뀜. 특정한 요소 내부에 지역적으로 스크롤 할 때 배경이미지를 동시에 같이 스크롤 하는 개념. 하지만 이 값을 사용하는 것은 굉장히 흔치 않다.
• background-size : 배경 이미지의 크기 지정
  • background-size: width height;(가로 사이즈와 세로 사이즈 띄어쓰기 통해 입력)
  • auto : 기본 값으로 배경 이미지가 원래 크기로 지정
  • 단위 : px, em, % 등 단위로 지정, width만 입력하면 비율에 맞게 지정됨. 조절될 크기를 명확하게 아는 것이 아니고 비율대로 출력하기 위해서는 되도록 가로 사이즈만 입력
    [주의깊게 봐야하는 값]
• cover : 배경이미지의 크기 비율을 유지하는 상태에서 요소의 조금 더 넓은 너비에 맞춰서 출력됨 그러다 보니 이미지가 잘릴 수도 있다. 요소를 다 커버하는 개념
• contain : 배경이미지의 크기 비율을 유지하는 상태에서 요소의 조금 더 짧은 너비에 맞춰서 출력되서 이미지 전체가 다 나올 수 있음(이미지 잘리진 않지만 요소의 빈공간이 나올 수 있음)

---

CSS 속성의 전환효과(Transitions)

• CSS 속성의 전환 효과 지정
• CSS 속성의 시작지점과 끝 지점을 지정해서 중간에 있는 특정한 값들을 애니메이션 처리
• 굉장히 많이 사용되니 곡 기억해두기
• 단축 속성
• transition: transition property transition-duration . transition-timing-function, 속성이름 지속시간;
• 전상태와 후상태의 중간단계를 애니메이션 처리해주는 기능

[개별속성]

1. transition property

• 전환효과를 사용할 속성 이름 설정
• 내가 전환 효과를 지정할 속성을 일부 지정 가능
• all : 기본 값으로 전환효과가 모두 적용된다.
• 속성 이름 : 전환 효과를 사용할 속성 이름, 특정 속성만 지정해서 전환효과 부여 가능

2. transition-duration

• 전환 효과의 지속시간 설정
• s는 second의 약자(초단위), ms는 miliseconds의 약자
• 시간 : 전환효과가 지속되는 시간, 기본 값은 0s

3. transition-timing-function

• 타이밍 함수(애니메이션 전환효과를 계산하는 방법을 의미, 전환효과가 빠르게 진행되다가 천천히 끝남 or 천천히 진행되다가 빨리 끝남 or 일정하게 지속 할 것인가를 결정) 지정
• 많이 사용x
• 참고 https://easings.net/ko
• ease함수와 timing 함수는 그래프들을 내부적으로 제공하고 그 그래프에 맞게 전환효과 적용되는 개념
• ease :기본값으로 빠르게 진행되다가 천천히 끝남, cubic-bazier(.25, .1, .25, 1)
• linear : 일정한 속도로 전환효과 동작, cubic-bazier(0,0,1,1)
• ease-in: 느리게 시작해서 빠르게 끝남, cubic-bazier(.42, 0, 1, 1)
• ease-out : 빠르게 시작해서 느리게 가는데 ease와 빠름과 느림이 조금 다름, cubic-bazier(0, 0, .58, 1)
• ease-in-out : 느리게 시작해서 빠르게 올라갔다가 다시 느리게 끝남 cubic-bazier(.42, 0, .58, 1)
• cubic-bazier(n,n,n,n): 자신만의 값을 정의, 컴퓨터가 적용하기 좋은 함수, 수치화 해서 입력할 수 있는 배경지식 있으면 넣는 것도 괜찮지만 위 속성들처럼 특정한 이름이 있는 것을 쓰는 것이 좋다.
• steps(n): n번 분할된 애니메이션 적용, step으로 각각의 횟수대로 쪼개서 딱 그부분들만 보여주는 개념

4. transition delay

• 전환효과의 대기시간(전환효과가 몇초 뒤에 시작할 것인가) 설정
• s는 second의 약자(초단위), ms는 miliseconds의 약자
• 기본값은 0s
• 원본과 변경된 상태의 사이의 전환효과를 얼마만큼 기다렸다가 그 효과를 부여할 것인가
• 요소의 action이 처리될 때 처리되기 시작하기 하는 시간을 조금 더 미룰 수 있다.
• 전환효과가 얼마나 대기하고나서 적용될 것 인가.
• 많이 사용 x

 

 

---

CSS 속성의 변환 효과 Transform

• 요소의 변환 효과(변형)를 지정
• 요소를 회전 시키거나 비틀거나 확대하거나 축소하거나 이동시 이 효과 사용 가능
• deg:degree로 각도라는 뜻
• transform: 변환함수1, 변환함수2..;
• 2d 변환효과(평면적인 변형 이뤄냄), 3d 변환효과(3차원 변형 이뤄냄) 존재
• rotate(각도) : 회전하는 변환 함수
• translate(x축, y축) : 이동하는 변환함수\
• skew(): 회전하는 변환함수
• scale : 확대 축소해주는 변환 함수

---

tips

• 상대경로 ./ ../
• 개발자 도구로 로고를 가져올 때 로고를 selector 도구를 눌렀을 때 이미지 경로가 없다면 배경이미지로 삽입된 것이기 때문에 두번째 칸 부분의 styles의 background 부분 보기
• 0.x일경우 0 생략 가능