김코드의 웹디자인 세상

안녕하세요! 오늘은 애니메이션 속성의 키프레임을 가지고 이미지 슬라이드쇼를 만들어보도록 하겠습니다. 👇👇👇 키프레임에 대한 자세한 설명은 아래 글을 확인해 주세요! 👇👇👇 https://y-seon97.tistory.com/45?category=1046996 ❏ css - 애니메이션(animation) 속성과 키프레임(@keyframse) 애니메이션(animation) 속성은 전환 효과와 함께 자주 사용하는 속성입니다. 전환 효과 속성보다 더 정확하고 부드러운 전환효과를 제어할 수 있으며 키프레임(@keyframse) 문법을 사용하여 더 많은 y-seon97.tistory.com 오늘 만들어 볼 것을 미리보겠습니다! 이렇게 이미지가 자동으로 재생되는 슬라이드 쇼입니다! ✎ html We Are TAESA..

✏ transform transform은 플렉스 아이템을 2D(2차원), 3D(3차원)의 변환 함수를 사용하여 원근법, 이동, 회전, 기울임이 화면에 출력이 되도록 하는 속성이다. 주로 2D와 3D 변환 함수가 있으며 자주 사용하는 함수를 알아보겠다. 2차원 변환 함수(2D) 1. translate 이동 플렉스 아이템을 이동시킬 때 사용하는 변환 함수로 x축과 y의 축을 사용하여 이동한다. 단위로는 px을 사용한다. x축과 y의 축을 같이 입력할 수 있지만 필요시 x축과 y의 축을 각각 입력하여 이동할 수 있다. 2. scale 크기 플렉스 아이템의 크기를 배수로 조절할 때 사용하는 변환 함수이다. 단위로는 x축과 y의 축을 사용하며 괄호에는 늘리고 싶은 크기의 배수를 입력한다. 입력된 배수는 x축과 y..

✏ order order는 플렉스 아이템 속 요소들의 순서를 정하는 속성으로 order의 수가 작을수록 먼저 정렬된다. 기본적으로 모든 요소는 0이라는 기본값을 가지고 있어서 동일선상에 있다. order의 수는 음수, 0, 양수를 적을 수 있다. order 속성의 가장 큰 장점은 작업 중 html의 구조를 변경하지 않아도 화면의 출력되는 요소의 순서를 그때 그때 변경할 수 있다. ✏ flex-grow flex-grow 플렉스 아이템의 너비를 비율로 넓히는 속성이다. 보통 플렉스 아이템들의 flex-grow는 0으로 기본값으로 지정되어있으며, 만약 너비를 비율로 넓히고 싶다면 수로 입력하면 된다. 여기에 가로 width 100px, height 100px인 플렉스 아이템이 있다. 지금은 요소의 너비가 넓혀..

✏ justify-content justify-content는 플렉스 아이템들의 주축이 수평일 때 정렬방법을 지정해주는 속성이며 주로 사용되는 flew-start, flex-end, center 세 가지가 있다. 1. flex-start flex-start는 플렉스 아이템들을 시작점으로 정렬 즉 왼쪽 정렬시키는 속성이다. 기본적으로 아이템들은 왼쪽으로 정렬이 되어 있기 때문에 flex-start는 기본값으로 생각하면 된다. 2. flex-end flex-end는 플렉스 아이템들을 끝점으로 정렬 즉 오른쪽 정렬시키는 속성이다. 주축이 변경되지 않기 때문에 순서는 바뀌지 않는다는 것을 알고 있어야 한다. 3. center center는 플렉스 아이템들을 가운데 정렬시키는 속성이다. ✏ align-conten..