21-12-01 Layout#3 CSS 애니메이션

학원/HTML_CSS

21-12-01 Layout#3 CSS 애니메이션

링규 2021. 12. 1. 15:53

*별도의 CSS 파일을 만들고 HTML 파일과 연결하기

-> CSS 폴더와 파일을 만들고 HTML 파일의 타이틀 밑에

<link rel="stylesheet" type="text/css" href="css 폴더이름/css파일 이름" />

을 적어준다.

css파일은 다른 내용 없이 @charset "UTF-8"; 밑에 스타일을 바로 적는다.

이미지를 배경으로 설정하고 위치를 조절하기

해당 이미지의 인스타그램 로고만 사용하고 싶다면 인스타그램 부분만 따로 잘라서 이용하지 않고 background-image와 background-position 을 이용할 수 있다.

<html>
<head>
<meta charset="UTF-8">
<title>Layout02</title>
<style type="text/css">
	#base {position:relative; width:500px; height:500px; background:white; border:3px dotted black;}
	#box1 {position:relative; width:400px; height:400px; background-image:url(images/icon.png); background-position: -790px -320px; 
	border:1px solid black; margin:50px auto;}
	
</style>
</head>
<body>
<div id="base">
	<div id="box1"></div>
</div>
</body>
</html>

해당 이미지의 가장 좌측 상단이 background-position: 0px 0px 이고 아래로, 우측으로 이동하기 위해서는 음수가 되어야한다. 원하는 이미지가 나오도록 위치를 조정하면 끝

Viscode HTML 기본 양식 단축키 : ! 입력 후 tab 키

viscode 라이브서버 : 확장 - liveserver 설치

-> 설치 후에 ALT를 누른 상태에서 L O를 순서대로 누르면 창이 열린다.

-> viscode에서 내용을 수정 후 저장만 해도 바로 적용된다

CSS 코드를 이용한 애니메이션

변형 속성

애니메이션을 적용할 떄 사용하는 기능

종류

1) transition : 모든 transition 속성을 한 번에 적용

2) transition-delay : 이벤트 발생 후 몇 초 후에 재생할지 지정

3) transition-duration : 몇 초 동안 재생할 지 지정

4) transition-property : 어떤 속성을 변형할지 지정

5) transition-timing-function : 수치 변형 함수를 지정

*transition-duration (duration은 생략하고 transition만 써도 같은 결과)

<style type="text/css">
    .box{width:100px; height:100px; background: rgb(255, 166, 0); transition-duration: 2s;}
    .box:hover{width: 300px; height: 300px; background: green;}
</style>
</head>
<body>
    <div class="box"></div>
</body>

변형함수 (2D)

1) translate(x,y) : 지정한 크기만큼 x축과 y축으로 이동

2) translateX(x) : 지정한 크기만큼 x축으로 이동

3) translateY(y) : 지정한 크기만큼 y축으로 이동

4) scale(x,y) : 지정한 크기만큼 x축과 y축으로 확대 축소

5) scaleX(x) : 지정한 크기만큼 x축으로 확대 축소

6) scaleY(y) : 지정한 크기만큼 y축으로 확대 축소

7) rotate(각도) : 지정한 각도만큼 회전 (단위 : deg)

8) skew(x,y) : 지정한 크기만큼 x축과 y축으로 왜곡

9) skewX(x) : 지정한 크기만큼 x축으로 왜곡

10) skewY(y) : 지정한 크기만큼 y축으로 왜곡

*translate

<style type="text/css">
.origin{width: 200px; height:134px; border: 1px solid black; float: left; margin: 40px;}

.movex, .movey, .movexy {transition: 1s;}

.movex:hover {transform:translateX(50px);}
.movey:hover {transform:translateY(50px);}
.movexy:hover {transform:translate(30px, 30px);}
</style>
</head>
<body>
    <div class="origin">
        <div class="movex"><img src="images/bus.jpg"></div>
    </div>
    <div class="origin">
        <div class="movey"><img src="images/bus.jpg"></div>
    </div>
    <div class="origin">
        <div class="movexy"><img src="images/bus.jpg"></div>
    </div>
</body>

(hover: 에 left값이나 top값의 변형을 적용하여도 같은 결과를 만들 수 있지만 이들은 절대좌표에 의해 움직이며 translate로 인한 변형은 상대좌표에 의해 적용된다.)

브라우저별 연동을 위해

.movex:hover {
    transform:translateX(50px);
    -webkit-transform: translateX(50px);
    -ms-transform: translateX(50px);
    -moz-transform: translateX(50px);
    -o-transform: translateX(50px);
}

위와 같이 적어야하지만 모든 브라우저에서 translate명령어가 똑같이 동작하기 때문에 생략이 가능하다.

(명령어가 다른 브라우저가 있다면 적어줘야 함)

*Scale

<title>03_Transform_Scale</title>
<style type="text/css">
.origin{width: 200px; height:134px; border: 1px solid black; float: left; margin: 40px;
overflow: hidden;}
.scalex, .scaley, .scale {transition: 1s;}
.scalex:hover {transform:scaleX(1.2);}
.scaley:hover {transform:scaley(1.5);}
.scale:hover {transform:scale(1.7);}
</style>
</head>
<body>
    <div class="origin">
        <div class="scalex"><img src="images/fruit.jpg"></div>
    </div>
    <div class="origin">
        <div class="scaley"><img src="images/fruit.jpg"></div>
    </div>
    <div class="origin">
        <div class="scale"><img src="images/fruit.jpg"></div>
    </div>
</body>

*Rotate

<style type="text/css">

.origin{width: 200px; height:200px; border: 1px solid black; float: left; margin: 40px;}
.rotate1, .rotate2 {transition: 1s;}
.rotate1:hover {transform:rotate(40deg);}
.rotate2:hover {transform:rotate(-40deg);}
</style>
</head>
<body>
    <div class="origin">
        <div class="rotate1"><img src="images/fruit.jpg"></div>
    </div>
    <div class="origin">
        <div class="rotate2"><img src="images/fruit.jpg"></div>
    </div>
</body>

*rotate의 중심점 이동 : orgin

<style type="text/css">
.origin{width: 160px; height: 240px; border: 1px solid black; float: left; margin: 40px;}
.ltop .rose {transform-origin: left top; transition: 1s;}
.rtop .rose {transform-origin: right top; transition: 1s;}
.lbottom .rose {transform-origin: left bottom; transition: 1s;}
.rbottom .rose {transform-origin: right bottom; transition: 1s;}
.rose:hover{transform: rotate(20deg);}
</style>
</head>
<body>
    <div class="origin">
        <div class="ltop"><img src="images/rose.jpg" class="rose"></div>
    </div>
    <div class="origin">
        <div class="rtop"><img src="images/rose.jpg" class="rose"></div>
    </div>
    <div class="origin">
        <div class="lbottom"><img src="images/rose.jpg" class="rose"></div>
    </div>
    <div class="origin">
        <div class="rbottom"><img src="images/rose.jpg" class="rose"></div>
    </div>
</body>

*Skew

<style type="text/css">
.origin{width: 160px; height: 240px; border: 1px solid black; float: left; margin: 40px;
overflow: hidden;}
.skewx, .skewy, .skewxy {transition: 1s;}
.skewx:hover {transform:skewX(30deg);}
.skewy:hover {transform:skewY(20deg);}
.skewxy:hover {transform:skew(25deg, 15deg);}
</style>
</style>
</head>
<body>
    <div class="origin">
        <div class="skewx"><img src="images/rose.jpg"></div>
    </div>
    <div class="origin">
        <div class="skewy"><img src="images/rose.jpg"></div>
    </div>
    <div class="origin">
        <div class="skewxy"><img src="images/rose.jpg"></div>
    </div>
</body>

*여러개의 transform 적용하기

<style type="text/css">
#wrap{position:relative; width: 800px; height: 400px; border: 1px solid black;}
#circle{position: relative; width:200px; height: 200px; top: 100px; text-align: center;
background: orangered; border-radius: 50%; line-height: 200px; transition-duration: 2s; 
color: white; font-weight: bold; font-size: 50px;}

#wrap:hover #circle{transform:translateX(400px) rotate(180deg) scale(1.5); }
</style>
</head>
<body>
    <div id="wrap">
        <div id="circle">타이어</div>
    </div>

    <!-- wrap에 마우스를 올리면 circle이 오른쪽으로 이동+회전+크기증가 -->
</body>

(순서가 바뀌면 이상하게 작동할 수 있으므로 이동 먼저 써주기)

※A영역에 hover했을 때 B영역이 transform되게 하려면 A와 B는 서로 형제나 부모자식 관계여야한다.

(#A:hover #B 양식으로 작성 (class라면 # 대신 .))

예제

전에 만들었던 위 예제를 transform을 이용해 구현하기

(hover 세로 메뉴 만들기 : https://omp14.tistory.com/33)

<style type="text/css">
    #base{width:250px; height:1000px; background:#595959;}
    #top{width:100%; height:150px; border:1px solid white;}
    .menuall{width:100%; height:40px; border:1px solid yellow; 
    background:#232323; color:white; line-height:0px; text-align:center;}
    .submenuall{width:100%; height:1px;
    background:#989898;}

    .menuall:hover{color:orange}
    #menu1:hover~#submenu1{display:block; transform-origin: top;  transform: scaleY(100);}
    #menu1:hover~#menu2{transform: translateY(100px);}
    #menu1:hover~#menu3{transform: translateY(100px);}
    #menu1:hover~#menu4{transform: translateY(100px);}
    #menu1:hover~#menu5{transform: translateY(100px);}
    #menu1:hover~#submenu2{transform: translateY(100px);}
    #menu1:hover~#submenu3{transform: translateY(100px);}
    #menu1:hover~#submenu4{transform: translateY(100px);}
    #menu1:hover~#submenu5{transform: translateY(100px);}

    #menu2:hover~#submenu2{display:block; transform-origin: top;  transform: scaleY(100);}
    #menu2:hover~#menu3{transform: translateY(100px);}
    #menu2:hover~#menu4{transform: translateY(100px);}
    #menu2:hover~#menu5{transform: translateY(100px);}
    #menu2:hover~#submenu3{transform: translateY(100px);}
    #menu2:hover~#submenu4{transform: translateY(100px);}
    #menu2:hover~#submenu5{transform: translateY(100px);}

    #menu3:hover~#submenu3{display:block; transform-origin: top;  transform: scaleY(100);}
    #menu3:hover~#menu4{transform: translateY(100px);}
    #menu3:hover~#menu5{transform: translateY(100px);}
    #menu3:hover~#submenu4{transform: translateY(100px);}
    #menu3:hover~#submenu5{transform: translateY(100px);}

    #menu4:hover~#submenu4{display:block; transform-origin: top;  transform: scaleY(100);}
    #menu4:hover~#menu5{transform: translateY(100px);}
    #menu4:hover~#submenu5{transform: translateY(100px);}

    #menu5:hover~#submenu5{display:block; transform-origin: top;  transform: scaleY(100);}
</style>

※scale을 이용하면 위 아래로 커지기 때문에 transform-orgin:top; 으로 윗부분 고정하기

※scale을 이용하면 height를 이용했을 때와 달리 하위 div들이 자동으로 이동되지 않기 때문에 일일히 이동시켜주어야한다.

예제

상품 사진 위에 마우스를 올렸을 때 상품 정보가 올라오는 화면 구현

<style type="text/css">
ul{list-style-type: none; margin:0; padding: 0;}
.item{position:relative; width: 300px; height: 200px; margin: 10px 10px 10px 10px; float:left;
overflow:hidden;}
.caption{position: absolute;  width: 300px; height: 200px; top:200px; left:0; opacity: 0.7;
    background: black; transition-duration: 0.5s; color:white; margin:0 auto; text-align: center;}

.item:hover .caption{transform:translateY(-200px)}
/* .item:hover .caption{top:0px} 와 같은 결과*/ 

</style>
</head>
<body>
    <ul>
        <li class="item">
            <img src ="images/prod1.jpg">
            <div class="caption">
                <h1>상품1</h1>
                <p>상품1 : 설명 텍스트</p>
                <p>가격 : 12,345원</p>
            </div>
        </li>
        <li class="item">
            <img src ="images/prod2.jpg">
            <div class="caption">
                <h1>상품2</h1>
                <p>상품2 : 설명 텍스트</p>
                <p>가격 : 12,345원</p>
            </div>
        </li>
        <li class="item">
            <img src ="images/prod3.jpg">
            <div class="caption">
                <h1>상품3</h1>
                <p>상품4 : 설명 텍스트</p>
                <p>가격 : 12,345원</p>
            </div>
        </li>
    </ul>
</body>

caption의 top값을 0으로 하고 opacity만 조절하면 아래와 같은 효과도 구현이 가능하다

.caption{position: absolute;  width: 300px; height: 200px; top:0px; left:0; opacity:0;
    background: black; transition-duration: 0.5s; color:white; margin:0 auto; text-align: center;}

.item:hover .caption{opacity: 0.7;}