CSS의 모든 것 6부 - CSS 속성 전환, 변형, 애니메이션, 링크 그리고 입력양식
저번 포스팅에서는 목록, 표, 그림에 부여할 수 있는 스타일들에 대해 살펴봤습니다. 이번에는 변형, 전환, 그리고 애니메이션과 관련된 것들, 링크, 입력양식에 관한 스타일에 대해 알아보겠습니다.
1. CSS속성 - 전환, 변형, 애니메이션
변형(transform), 전환(transition), 에니메이션(animation)에 대한 속성들은 공통적으로 뭔가 변화하는 스타일을 부여해 줍니다.
1-1. 변형 속성
우선 변형(transform)에는 크게 translate(), rotate(), scale(), skewX(), skewY()와 같은 것들이 있습니다. 물론, 이외에도 더욱 다양하게 더 있습니다. 먼저, 이를 사용하기 위해서는 먼저 transform 속성을 먼저 선언하고, 그 후에 적절한 속성을 할당해 주면 된다.
우선, translate(a px,b px)는 html의 element를 x축 방향으로 a 픽셀 만큼, y축 방향으로 b 픽셀 만큼 평행이동 시킵니다. rotate(theta)는 평면으로 theta도 만큼 회전 시키는 속성입니다. 단위는 degree입니다. 3차원 회전도 가능한데, rotateX(theta), rotateY(theta), rotateZ(theta)를 이용합니다. 단위는 역시 degree입니다. scale(sx, sy)는 x축 방향으로 sx배 만큼 크기를 키우고, y축 방향으로 sy 배 만큼 크기를 키워줍니다. skewX(theta)와 skewY(theta)는 각각 x축, y축 방향으로 theta도 만큼 납작하게 만들어 버립니다. 아래는 변형속성에 대한 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
div.after{
width: 200px;
height: 120px;
background-color: yellow;
border: 3px solid black;
transform: translate(100px, 50px);
transform: rotate(30);
transform: rotateX(5) rotateY(5) rotateZ(5);
transform: scale(0.5, 2);
transform: skewX(15), skewY(25);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<div>
Something text.
</div>
<br>
<div class="after">
Something text 2.
</div>
</body>
</html>
1-2. 전환 속성
전환(transition)은 html의 element의 속성값을 부드럽게 변화시킬 수 있게 해준다. 예를 들어, 아래와 같이 div tag에 hover를 선언하게 되면, 마우스를 올리게 되면 텍스트 영역의 크기가 바뀌면서, 회전도 적용이 되게 됩니다. 하지만, transition이 적용되지 않으면 즉각적으로 hover가 적용이 됩니다. 만약, hover가 자연스럽게 적용되고 싶으면, div tag에 transition 속성을 선언하고 값을 할당해 줍니다. transition의 속성 값으로, 처음에는 변화시킬려고 하는 대상의 속성을 먼저 적어주고, 그 후로 어느정도 시간이 소요될지 적어준다. 아래는 이에 대한 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
div {
width: 200px;
height: 120px;
background-color: yellow;
border: 3px solid black;
transition: width 2s, height 3s, transform 4s;
}
div.hover{
width: 350px;
height: 200px;
transform: rotate(180)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<div>
Something text.
</div>
<br>
<div class="after">
Something text 2.
</div>
</body>
</html>
1-3. 애니메이션 속성
애니메이션(animation)은 html의 element가 정해준 순서에 따라서 움직이게 하는 방법입니다. 애니메이션을 적용하기 위해서는 @rule을 적용해야 하는데, @keyframes라고 하는 규칙을 사용해서 진행과정 중간중간 마다 속성의 상태를 저장해 두어야 합니다. 이렇게 정의된 @keyframes을 사용하려면 animation을 사용하려는 html element에 animation관련 속성값을 할당해주면 됩니다. Animation관련 속성들은 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction들이 있습니다.
animation-name은 적용할 @keyframes의 이름을 적어줍니다. animation-duration은 animation의 지속시간을 의미합니다. animation-timing-function은 animation이 적용될 구간동안, 등속으로 진행될지 등을 설정해 줍니다. 사용할 수 있는 값들은 linear, ease, ease-in-out, step-start등 여러가지가 있습니다. 더 자세한 것들은 다음 링크를 참조해 주시기 바랍니다. animation-delay은 animation이 처음 시작할때 지연될 시간을 나타냅니다. animation-iteration-count는 animation 반복횟수를 뜻합니다. 만약, 무한히 반복하려면, infinite로 설정해 주면 됩니다. animation-direction은 animation이 진행되는 정방향, 역방향을 설정해 줄수도 있고, 교대로 진행시킬 수도 있습니다. 그 속성값은 normal, reverse, alternate와 같은 것들을 사용하면 됩니다. 아래는 애니메이션에 대한 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div{
width: 200px;
height: 120px;
position: relative; /* 움직임을 주기위해서 위치 속성: 상대위치로 지정 */
animation-name: ani;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes ani{
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
2. CSS속성 - 링크
HTML에서 hyperlink를 부여하는 방법은 a tag를 이용합니다. 이것에 해당하는 속성은 이미 3부에서 예제를 통해 언급을 했었습니다. 다시한번 상기하자면, 링크를 누르기 전 상태는 a:link, a:visited는 한번 방문하였던 링크를 의미합니다. a:hover링크위에 마우스를 올려둔 상태를 의미하고, a:active는 링크를 클릭한 순간을 의미합니다. 이런 것들을 이용해서 링크에 대한 속성을 부여하면 됩니다. 아래는 이에 대한 예시 입니다.
1
2
3
4
5
6
7
8
9
10
11
12
a {
border: 2px solid green;
color: black;
padding: 14px 25px;
text-align: center;
text-decoration: none;
}
a:hover {
color: white;
background-color: green;
}
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<br>
<a href="#">Page link</a>
</body>
</html>
3. CSS속성 - 입력양식
입력양식에도 속성을 부여할 수 있습니다. 입력양식의 속성은 기존에 배웠던 다양한 것들을 적용할 수 있기 때문에, 아래에 예시로 남겨두었습니다. 다만, 입력양식에는 다양한 type이 있기 때문에, type만 잘 설정해 주면 된다. type할당 또한 아래 예시에 명시해 두었습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
input[type=text], input[type=email], input[type=date],
select, textarea{
width: 100%;
background-color: yellow;
padding: 10px 20px;
margin: 5px 0px;
border: 2px solid orange;
border-radius: 4px;
box-sizing: border-box;
}
input:focus { /* 커서가 위치했을때, 뭔가 스타일을 부여할 수 있음. pseudo-class 선택자인 focus를 사용.*/
border: 2px solid black;
}
/* class를 선택하기 위해 "."을 사용해서 해당 class를 선택할 수 있다. */
input.search { /* input tag안에 image도 입력으로 넣어줄 수 있다. */
background-image: url('searchicon.img');
background-repeat: no-repeat;
background-position: 10px 10px;
padding-left: 40px;
width: 100px;
transition: width 0.5s;
}
input.search:focus{
width: 100%;
}
textarea {
height: 100px;
resize: none;
}
input[type=reset], input[type=submit]{
background-color: green;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer; /* help바꾸면 물음표로 바뀜. 커서를 올리면 shape이 바뀌게됨 */
}
button{
cursor: help;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<link rel="stylesheet" href="somewhere/style.css">
</head>
<body>
<br>
<form>
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="search" placeholder="검색" class="search">
<input type="email" name="email">
<input type="date" name="date">
<select name="fruit">
<option value="au">option 1</option>
<option value="ca">option 2</option>
<option value="usa">option 2</option>
</select>
<textarea>메모를 남겨주세요.</textarea>
<input type="reset" value="리셋">
<input type="submit" value="보내기">
<button type="button">도움말</button>
<!-- <button type="button"> <img src="something.img"> </button> 도 가능 -->
</form>
</body>
</html>