[Day 09] Entities + Background + CSS Animation + Transition

Entities + Background

• HTML Entities

  

• background image

  • multi-background
    • 단일 요소에 멀티 백그라운드가 가능하지만, 선언한 순서대로 등장하기 때문에 가장 먼저 선언된 게 가장 위로 온다.
  • background-repeat
    • default: no-repeat
    • 배경 이미지는 자신의 크기 만큼 요소 영역를 채우고 반복해서 남은 공간을 계속 채운다.
    • 멀티 백그라운드일 경우 값을 , 로 구분해서 여러 개 줄 수 있다.
  • background-position
    • x좌표, y좌표로 위치를 지정한다.
    • px일 경우 고정값으로 적용된다.
    • 좌표값이 % 일 경우, 부모 요소의 크기의 % 위치와 이미지 크기 % 위치 모두를 고려해서 적용된다.
    • 멀티 백그라운드에 적용 될 수 있다. (, 로 구분)
  • background-size
    • keyword로 auto, contain, cover 등이 있다.
    • 직접 length 값도 입력 가능
  • background-attachment
    • default: crawl;
    • fixed 값을 주면 배경이 고정된다.
  • background 단축 표기법
    • (color image repeat position / size attachment)
      • position과 size는 단위때문에 / 로 구분한다.
    • 멀티 백그라운드일 경우 1세트가 끝나고 , 로 구분한다.
      • 멀티 백그라운드일 경우 background-color는 있으면 안되고, background 속성 다음에 background-color로 따로 적용해줘야 한다.
      • background 속성은 color를 default로 transparent를 가지고 있다. 그래서 background-color가 background 속성보다 나중에 와야 적용된다.

CSS Animation

• 시나리오

  1. 애니메이션 이름을 정한다. (textAni)
  2. 텍스트 이동 (왼쪽 상단 -> 오른쪽 하단) (0, 0 -> 400px, 75px)
     • position
     • padding, margin
  3. 텍스트 크기 (12px -> 24px)
     • font-size
     • transform: scale()
  4. 텍스트 투명도 (0.2 -> 1)
     • 박스 자체의 투명도는 opacity로 조정
     • 텍스트의 투명도는 color: rgba(0, 0, 0, 1)

• 정의(선언)

  • @keyframes : 이제부터 애니메이션을 정의하겠다.

    @keyframes textAni {
        from {
        	font-size: 12px;
            color: rgba(0, 0, 0, .2);
            /* margin: 0; */
            /* padding: 0; */
            transform: translate(0, 0);
        }	// 시작점, from 대신 0%로 사용 가능
        to {
            font-size: 24px;
            color: rgba(0, 0, 0, 1);
            /* margin: 75px 0 0 400px; */
            /* padding: 75px 0 0 400px;*/
            transform: translate(400px, 75px);
        }	// 종료점, to 대신 100%로 사용 가능
    }
        
    // margin, padding, position을 사용하면 렌더링 엔진에서 레이아웃을 새로 그리기(reflow 하기) 때문에 성능 저하가 발생한다.
    

• 사용

  • 필수 속성
    • animation-name : textAni; (애니메이션 이름)
    • animation-duration : 3000ms; (얼마동안 실행될 것인지)
  • 선택 속성
    • animation-fill-mode : forwards; (애니메이션 실행 완료 이후 되돌릴 것인가 멈출 것인가)
    • animation-iterate-count : infinite; (애니메이션을 순회하는 횟수)
    • animation-direction : alternate; (애니메이션이 실행되는 방향(from, to)을 결정한다)
    • animation-delay : 3s; (애니메이션이 실행되는 것을 지연시키는 시간)
    • animation-timing-function: ease; (애니메이션이 발생하는 타이밍을 빠르고 느리게 조절해서 자연스러운 애니메이션이 가능하도록 한다.)
    • animation-play-state: running or paused; (애니메이션 작동 상태를 결정)
  • 단축표기법
    • animation : flowerAni 3s forwards infinite alternate 1s;
      • 속성의 순서는 상관 없다. 하지만 animation-duration과 animation-delay가 단축표기법 상에서 구분이 안되는데, animation-duration 속성의 경우 필수 속성이기 때문에 무조건 delay 속성보다 먼저 나와야 한다. 그래서 앞에 나온 것이 duration 속성이 된다.
  • 단축표기법 유의사항
    • 단축 표기법을 사용할 경우 해당 속성과 관련된 세부 속성들이 전부 default로 적용되기 때문에 cascading 과정에서 재정의 문제가 발생할 수 있다. 하지만 쪼개서 세부 속성으로만 사용하면 해당 세부 속성만 적용되고 나머지는 값이 없기 때문에 이후 재정의 문제가 발생하지 않는다.
  • transform 속성
    • animation과 transform 속성은 함께 사용해서 성능 향상에 시너지 효과를 낼 수 있다.
    • 레이아웃은 그대로 두고 그리는 것만 새로 하기 때문에 박스 모델의 overflow가 발생할 수 있다. (overflow: hidden 또는 박스를 inline-block 처리)

• 다중 백그라운드 이미지

  • 백그라운드 이미지들이 하나의 요소에 멀티로 적용되어 있을 경우 각각의 이미지들을 따로 컨트롤 하기 위해서는 ::before, ::after 의 가상 요소를 이용해서 이미지들을 각각 할당한 뒤 CSS 처리한다.
  • 가상요소 상자는 부모의 요소와 같은 사이즈로 만들어야 한다. (부모 요소를 relative로, 가상 요소를 absolute로 만든 뒤 가상 요소의 사이즈를 100%로 만들고, 포지션을 동일하게 맞추기 위해 top:0으로 맞춰준다.)

Transition

• transition : 중간과정을 포함해 부드럽게 해당 요소의 속성값을 변화시킨다.
  • transition-property: background, border-radius, width, height; (transition이 일어날 속성값)
  • transition-duration: 2s; (몇초동안 일어나는지)
  • transition-delay: 0s, 2s, 4s, 6s; (순서대로 속성값이 변화한다.)
• 트랜지션 속성은 이벤트가 발생하지 않는 default 요소에 적용한다.
  • .box1 에 트랜지션 속성을 적고, .box1:hover에 변화시키고 싶은 속성 값을 적는다.