Peep

• Character Entity Reference Chart - http://dev.w3.org/html5/html-author/charref
• Named character references - http://www.w3.org/TR/html5/syntax.html#named-character-references
• HTML ISO-8859-1 Reference - http://www.w3schools.com/tags/ref_entities.asp
  
• HTML Entities - http://www.danshort.com/HTMLentities/

저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다.

CSS

.hands{
  // 이건 애니메이션 보여지는 크기
  width:125px;
  height: 175px;

  // 연결된 이미지 bg로 깔고 이미지 크기 정함.
  background:url('/images/hands2.jpg')no-repeat;
  background-size:384px;

  // 0.5초동안 step 3으로 나누어서 무한 실행
  animation: animate .5s steps(3,end) infinite;
}

// 100%까지 bg이미지 크기 position-x로 지정
@keyframes animate{
  0%{
  	background-position-x:0;
  }
  100%{
  	background-position-x:-384px;
  }
}

예제는 https://leeyoonseo.github.io/css_animate_ex1/ 여기서 확인 가능합니다.

유튜브 영상 너비(width)값에 맞추어 높이(height)값 비율 맞추기

가로 세로 비율을 이용하여 스타일을 적용하는 방법입니다.

html

<div class="wrap">
  <div class="content">
    <iframe src="https://www.youtube.com/embed/wwWcusQMBPI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
  </div>
</div>

css

.wrap{
  width:500px;
}

.content{
  position:relative;
  padding-top:56%;
  width:100%;  
}

iframe{
  position:absolute; 
  top:0; 
  left:0; 
  width:100%; 
  height:100%;
}

적용 사항은 아래와 같습니다.