목록전체 글 (108)
Jade_o.o
[css] transform 실습 - 함수 여러개 사용
transform을 통해 함수를 여러개 사용해 보자. transform : translateX() skewX() roatae(), perspectiv()
[css] animation 실습 - 공 움직이기
공이 직사각형 방향으로 시계 방향으로 반복해서 움직이게 해보자 @keyframes 활용, animation-direction: alternate; 0~100%에서 다시 100%~0%d으로 돌아가라는 뜻 사용 시 동그랗게 무한히 반복하지 않고 갔다가 돌아옴 html 코드 .continer{ width: 700px; height: 500px; position: relative; } .ball{ width:100px; height: 100px; border-radius: 50%; background-color: yellowgreen; position: absolute; animation-name: round1; animation-duration: 3s; animation-iteration-count: infi..
[css] transition & transform 실습 - 이미지 연달아 나열하기
해변 이미지 3개로 transition & transform 활용하여 이미지 연달아 나열하기(각 다른 방식으로) ver1. html 코드 .img1{ position: absolute; top: 300px; left: 400px; width: 400px; height: 300px; transform: skewY(30deg); transition: transform 1s; z-index: 3; } .img2{ position: absolute; top: 250px; left: 600px; width: 400px; height: 300px; transform: skewY(30deg); transition: transform 1s; z-index: 2; } .img3{ position: absolute; to..
[css] 종합실습 - 오버워치 캐릭터창 만들기(background&flex)
css 종합 실습 backgrund & flex를 활용하여 오버워치 캐릭터창 만들기 body { background-image: url('./img/overwatch/bg.jpg'); background-repeat: no-repeat; background-attachment: fixed; } .container { display: flex; position: relative; /*flex-direction: row;*/ flex-direction: column; justify-content: center; align-items: center; } .container .heroes { display: flex; flex-wrap: wrap; /*justify-content: space-around;*/ ..