EverGiver

CSS 애니메이션에서 사용하는 속성 - 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션을 추가할 수 있다. - 특정 지점에서 스타일을 바꾸면서 애니메이션을 만드는데, 이렇게 애니메이션 중간에 스타일이 바뀌는 지점을 키프레임(key frame)이라고 한다. - 키프레임은 @keyframes 속성으로 정의하고, animation 속성과 그 하위 속성을 이용해서 애니메이션의 실행 시간이나 반복 여부 등을 지정한다. - transition 속성과 달리 별도의 동작 구문 없이도 스스로 애니메이션 효과를 발생시키는 css속성 종류 설명 @keyframes 애니메이션이 바뀌는 지점을 지정한다. animation-delay 애니메이션의 시작 시간을 지정한다. animation-direction 애니메이션을 종료한 ..

transform과 변형 함수 transfrom: 함수 2차원 변형 함수 종류 설명 translate(tx, ty) 지정한 크기만큼 x축, y축으로 이동한다. translateX(tx) 지정한 크기만큼 x축으로 이동한다. translateY(ty) 지정한 크기만큼 y축으로 이동한다. scale(sx. sy) 지정한 크기만큼 x축과 y축으로 확대/축소한다. scaleX(sx) 지정한 크기만큼 x축으로 확대/축소한다. scaleY(sy) 지정한 크기만큼 y축으로 확대/축소한다. rotate(각도) 지정한 각도만큼 회전한다. skew(ax, ay) 지정한 각도만큼 x축과 y축으로 왜곡한다. skewX(ax) 지정한 각도만큼 x축으로 왜곡한다. skewY(ay) 지정한 각도만큼 y축으로 왜곡한다 3차원 변형 함..

드롭다운 메뉴 드롭다운 메뉴 예제 과일종류 사과 딸기 포도 동물종류 사자 하마 기린 운동종류 축구 배구 농구 ​ opacity를 활용한 transition ​ 드롭다운 연습문제 시계 ​

z-index - html 태그들이 작성할 때 가지고 있는 고유의 z축 값 - html태그들은 우리들 눈에 보이지 않는 z축 값이라는 게 있다. 이 값은 html 태그를 나중에 적으면 적을수록 값이 올라가는 특징이 있는데 태그들을 겹쳐두는 상황이 발생했을 때 가장 마지막에 적은 태그가 가장 위에 있는 이유가 이것 때문이다. (포토샵 레이어 순서랑 동일한 개념) z-index는 css속성이기 때문에 내가 원하는 html태그에 사용해서 우선순위를 바꿀 수 있다. (z-index 사용 시 넣어주는 값은 원하는 값을 넣어주면 된다) z-index를 수동으로 넣어주면 z-index가 들어가 있지 않은 태그보다 무조건 상위에 위치하게 된다. 모든 position 속성은 사용하면 position 속성이 들어가 있지 ..

transition이란 웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성이 바뀌는 것 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것 트랜지션은 마이크로소프트 엣지와 익스플로러 10 이상에서 지원되며, 대부분의 최신 브라우저에서는 모두 지원한다. ★ 주의점 : 동작구문에는 넣지 말 것! (무조건 transition은 태그에 넣어준다) 트랜지션과 속성 종류 설명 transition-property 트랜지션의 대상을 지정한다. transition-duration 트랜지션의 실행할 시간을 지정한다. transition-timing-function 트랜지션의 실행 형태를 지정한다. transition-delay 트랜지션의 지연 시간을 지정한다. transition tra..

웹 요소의 위치를 정하는 left, right, top, bottom 속성 종류 설명 left 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정한다. right 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정한다. top 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정한다. bottom 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정한다. 배치 방법을 지정하는 position 속성 postition 속성은 웹 문서 안의 요소를 자유자재로 배치해 준다. position 속성을 이용하면 텍스트나 이미지 요소를 나란히 배치할 수도 있고 원하는 위치를 선택할 수 있다. 종류 설명 static 문서의 흐름에 맞춰 배치한다. (기본값) relative 위칫값을 지..