[CSS] #4-2 Transform으로 버튼 만들어보기
1. 버튼을 만들어보자!
마우스를 손에 올리면 색이 바뀌는 버튼을 만들려고 한다.
아래와 같은 순서로 만들어보자.
1) 버튼의 기본 칸 만들기
menu라는 이름을 가진 한 블럭을 만든 뒤 그 블럭을 버튼처럼 사용하려 한다.
이때 버튼처럼 테두리도 동그랗게 깎아보았다.
<!DOCTYPE html>
<html lang="ko">
<head>
<title>18_rotate.html</title>
<style>
#menu{
position: relative;
width: 150px;
height: 130px;
background-color: silver;
margin: auto;
border-radius: 10px; /* 테두리 라운드 */
}
</style>
</head>
<body>
<div id="menu">
</div>
</body>
</html>
2) 커서 만들기
마우스를 올렸을 때 커서가 화살표에서 포인터로 변하게 하려한다.
아래와 같은 코드를 #menu의 스타일 안에 추가하였다.
cursor: pointer;
3) 마우스를 올렸을 때 색깔 바뀌기
#menu:hover{
background-color: orange;
}마우스를 올렸을 때 배경 색깔이 바뀌게 하는 것에 대한 명령어로 hover를 사용했다.
그리고 그 안에 색깔을 지정해주면 마우스를 갖다 대자 색이 변한다.
4) 버튼에 글씨 넣기
버튼 안에 글씨를 넣기 위해 menu 안에 <strong> 태그를 사용해서 SETTINGS 글자를 넣었다.
그리고 글자에 대한 스타일을 지정해주었다.
포지션은 당연히 버튼 안에서 움직여야하기 때문에 absolute로 속성값을 주었다.
(그리고 버튼이 들어간 menu 블럭의 포지션은 relative로 주었다)
#menu>strong{
position: absolute;
bottom: 15px;
left: 35px;
}<body>
<div id="menu">
<strong>SETTINGS</strong>
</div>
</body>
5) 버튼에 이미지 넣기
이미지를 넣을 gear라는 이름을 가진 블럭을 새로 만들어주었다.
그리고 포지션은 역시 absolute로 준 후 이미지를 불러온 뒤 크기를 지정해주었다.
그런데 크기를 줄여버리니까 이미지가 잘려진 상태로 작아진다.
#menu>.gear{
position: absolute;
background-image: url(../images/gear-gray.png);
width: 40px;
height: 40px;
}
이럴 땐 background의 사이즈도 맞게 조정하면 된다.
background-size: 40px 40px;
이 때!
나는 이 톱니바퀴를 두개를 넣고 싶다.
어떻게 하면 될까.
이 톱니바퀴는 class로 만들어진 블록이다.
그래서 아래와 같이 같은 코드를 하나 더 입력하면 한개 더 만들어질 것이다.
<body>
<div id="menu">
<div class="gear"></div>
<div class="gear"></div>
<strong>SETTINGS</strong>
</div>
</body>
6) 이미지 배치하기
이제 두 개의 톱니바퀴를 배치해보자.
여러가지 방법이 있겠지만 이전에 배웠던 nth-child 코드를 사용해보려한다.
#menu>.gear:nth-child(1){
top: 16px;
left: 46px;
}
#menu>.gear:nth-child(2){
top: 45px;
left: 72px;
}
+
이미지를 회전하는 것도 가능하다.
transform에 rotate라는 속성을 주면 된다.
rotate 뒤에는 얼마나 회전시킬 것인지에 대한 정도를 설정하는데 30deg(degree)는 30도를 뜻한다.
transform: rotate(30deg);
6) 마우스를 올렸을 때 톱니바퀴 색깔 바꾸기
마우스를 올렸을 때 톱니바퀴 색깔도 주황색과 어울리는 색깔로 바꾸려한다.
그럴 땐 위에서 사용했던 hover를 사용하려 한다.
#menu:hover>.gear{
background-image: url(../images/gear.png);
}
7) 매끄럽게 변화주기
transition: .2s linear;이미지가 변화할 때 바로 바뀌는 것이 아니라 서서히 변하도록 하고 싶을 때 사용하는 코드이다.
방식은 여러가지가 있는데 크게 linear | ease 를 사용한다.
linear 는 처음부터 끝까지 같은 속도로 서서히 바뀌게 한다.
ease 는 갈수록 빨라지는 속도로 서서히 바뀌게 한다.
그리고 사이의 숫자는 바뀌는 속도를 뜻한다.
.2s 는 0.2초라는 뜻이다.
8) 이미지 회전시키기
이제 톱니바퀴를 회전시키려한다.
위에서 사용했던 rotate 코드를 사용해서 회전시켜보자.
#menu:hover>.gear:nth-child(1){
transform: rotate(-180deg);
}
#menu:hover>.gear:nth-child(2){
transform: rotate(180deg);
}