HTMLCSS 썸네일형 리스트형 animation 간단한 움직임을 만드는 animation animation은 자동으로 요소를 움직이게 하는 속성입니다. animation 속성은 @keyframes 속성과 함께 사용됩니다. @keyframes 속성은 요소 움직임의 처음부터 마지막까지를 정의합니다. 사용방법은 다음과 같습니다. 1. @keyframes 속성 @keyframes ani이름 { 0% {요소의 animation 시작할 때의 설정} : n% {전체 animation 시간중 n% 진행됐을때 실행될 내용 설정} : 100% {요소의 animation 끝날 때의 설정} } 2. animation 속성 animation: ani이름 시간 진행속도 지연시간 반복횟수 방향지정 ㄱ. ani이름 : @keyframes에 정의된 이름을 말합니다. ㄴ. 시간 : .. 더보기 HTMLCSS - transform 1 HTML에서 지정해주는 값만큼 이동하는 translate와 기울기를 주는 skew에 대해서 알아보겠습니다. 1) translate 이 기능은 블록을 좌우상하(x축, y축)로 이동시킬 때 사용합니다. 사용 방법은 다음과 같습니다. transform:translateX(이동거리) : 좌우 방향(x축 방향)으로 이동거리만큼 블록이 이동 transform:translateY(이동거리) : 상하 방향(y축 방향)으로 이동거리만큼 블록이 이동 transform:translate(x축 이동거리, y축 이동거리) : 좌우상하 방향(x축 방향, y축방향)으로 이동거리만큼 블록이 이동 예제) [그림 1] HTML에서는 화면에 블록 3개를 출력하는 내용을 작성했습니다. 그리고, [그림 2] CSS 파일에서 블록의 디자인을 .. 더보기 이전 1 다음
아무개의 취미생활
