[CSS] background, sr-only, transition, animation

background

• background-color : hex, rgb, rgba

• background-image : url() 주소로 이미지를 넣을 수 있다. Unsplash.com 무료 이미지 다운

  • 전송받는 image의 형태가 정해져있지 않다면 (가로 세로의 비율이 제각각인 경우) img 태그로 이미지를 받을 경우 수정해야할 css, js 코드가 지나치게 길어질 수 있다. 따라서 background-image : url(); 로 처리하는게 쉬운 방법일 수 있다.
• background-repeat : repeat, no-repeat. repeat이 기본값.
  • background-repeat : no-repeat; 으로 이미지 반복을 막을 수 있다.
• background-size : contain, cover, custom. contain(이미지 잘리는 부분 없이 보여줌. 요소에 빈 공간이 생길 수 있다.) cover(요소안에 이미지를 꽉 채움. 이미지가 잘릴 수 있다.)
  • background-size : 100% auto; 가로 100% 세로는 가로에 맞춰서 요소에 맞게 사이즈 자동 변경
  • background-size : 300px 50px; 이미지를 가로 300px, 세로 사이즈 50px로 늘리고 줄여서 사진을 변경한다.
• background-position : bottom, center, inherit px… x, y 설정 가능함.
  • background-position : 50%, 50%; , background-position : center, center; 정 가운데에 위치

img {
  background-position: center, center;
  background-size: auto, 80%;
}

.card-image {
  ...;
  background-image: url(./assets/img-house.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
}

// overflow: hidden; 이미지가 사이즈에 벗어날경우 이미지를 자름

background image가 존재한다면 background-repeat, background-position, background-size 까지 4개 property 를 세트로 작성해주는 것이 좋다.

sr-only

• 접근성을 위해 sr-only 클래스에 screen reader 사용자들을 위한 정보를 입력하고 sr-only 클래스에 css를 사용해서 웹 화면에서 안 보이게 하는 것이 좋다.

.sr-only {
  position: absolute;
  z-index: -100;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}
//display : none; 은 웹 화면 뿐만아니라 screen reader에서도 읽을 수 없어서 사용하면 안됨

transition

• property, duration, (timing-function), (delay)
• property : 어떤 property에 변화가 있을지 명시. font-size, background-color , all…
• duration : 변화의 지속시간 단위는 millisecond, second
• timing function : ease-in, ease-out, ease-in-out, cubic bezier()
  • 앞의 세 function이 마음에 안든다면 원하는 타이밍을 만들 수 있다. cubic bezier

• delay : 효과를 일정 시간이 지나고 시작하게 한다. 1000ms : 1초 뒤에 transition 시작

• 요소의 여러 property에 다른 transition을 설정하고 싶다면 각 property별로 transition 설정 가능

.box {
  ...;
  transition: font-size 1000ms ease-in, background-color 2500ms ease-out 1000ms;
}

.box:hover {
  font-size: 16px;
  background-color: blue;
}

// 모든 transition 요소를 같은 duration, timing function 으로 같은 한번에 적용하고 싶다면
// transition property 에 all을 적용하면 된다.

/* 
.box {
  ...;
  transition: all 1000ms ease-in;
} 
*/

animation

• transition은 property의 값이 스르륵 변할때 사용, animation은 animation을 주고싶을 때 사용. transition보다 적용할 수 있는 범위가 많다.
• keyframe 으로 적용 from - to, 0% - 50% - 100%(퍼센트는 임의로 정할 수 있음) 로 진행 단계를 정할 수 있다.
• animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction
• animation이 끝나면 기본 설정으로 돌아오기 때문에 animation을 설정하는 요소에 기본 설정을 작성해야한다.( background-color : blue; )

.box {
  ...;
  background-color: blue;
  animation-name: move-box;
  animation-duration: 2000ms;
}

@keyframes move-box {
  from {
    ...;
    background-color: blue;
  }
  to {
    ...;
    background-color: red;
  }
}

• animation-timing-function : transition의 timing function 과 같은 속성이 사용된다. ease-in, ease-out, ease-in-out, cubic bezier()
• animation-iteration-count : animation을 반복하는 횟수. 반복할 횟수(1,2,3 …), 혹은 ininite (무한 반복)
• animation-direction : animation의 진행방향. reverse, alternative, alternative-reverse, normal
  • 번갈아서 사용할경우 animation-direction : reverse;
• 이외에도 다양한 property가 많기 때문에 공식문서 참조 MDN animation 공식문서