[EZ_Scheduler] - [React] 로그인 페이지 스타일링
[React] 로그인 페이지 스타일링
📌로그인 페이지 디자인 및 스타일링안녕하세요, 대학생 개발자 주이어입니다!오늘은 제가 진행 중인 프로젝트에서 로그인 페이지를 구현해보려고 합니다.간단하게 디자인과 스타일링을 해주
juyear-coding.tistory.com
React 프로젝트 개발 일지 읽어보기!
📌프로젝트 결과물 미리보기
🖐️프로젝트 소개
안녕하세요! 대학생 개발자 주이어입니다. 오늘은 "CSS 애니메이션" 관련 글을 처음 올리는 날인데요.
제가 옛날부터 CSS를 마스터해서 웹을 만들든 앱을 만들든 예쁘게 디자인 하고 싶다 라는 생각을 많이 했었는데...
드디어 생각만 하지 않고 실천을 하게 돼서 앞으로 CSS관련해서 많이 배우고 글도 많이 올릴 예정입니다!
그래서 오늘 처음으로 쓸 글은 CSS 애니메이션의 가장 기본적인 transform과 transition에 대해서 간단하게 설명하고 그 후 hover를 이용한 간단하면서도 세련된 애니메이션을 만드는 방법에 대해서 알려드릴려고 합니다!
ℹ️transform과 transition
transform
먼저 transform은 특정 요소를 회전시키거나 이동시키는 등의 변형을 적용하는 데 사용됩니다.
|
1
2
3
4
5
|
transform: translate(50px, 20px); /* X축 50px, Y축 20px 이동 */
transform: rotate(45deg); /* 45도 회전 */
transform: scale(1.5); /* 1.5배 확대 */
transform: skew(20deg, 10deg); /* X축 20도, Y축 10도 기울이기 */
|
cs |
위에 예시 코드를 보면서 추가적으로 설명 하자면,
transform은 기본적으로 transform: "적용시킬 효과"(그에 맞는 값) 이런 식으로 사용됩니다.
위에 코드를 보면 translate(이동)효과를 사용하여 요소를 x축으로 50px, y축으로 20px(값) 이동시키는 것을 알 수 있습니다. 추가적으로 scale(요소 확대), rotate(회전), skew(기울이기) 등의 예시 코드를 확인하실 수 있습니다.
transition
transition은 특정 속성이 변화할 때 부드러운 애니메이션 효과를 추가하는데 사용됩니다.
transition은 기본적으로 transition: 속성명 지속시간 타이밍함수 지연시간 이런 식으로 작성됩니다.
|
1
2
3
4
5
6
7
8
9
10
11
|
.box {
width: 100px;
height: 100px;
background-color: blue;
transition: background-color 0.5s ease-in-out;
}
.box:hover {
background-color: red;
}
|
cs |
위에 예시코드에서 hover상태가 됐을때 background-color가 blue에서 red로 변화하는 것을 알 수 있습니다.
그리고 transition을 사용하여 background-color 속성이 변화하면 0.5초 동안 ease-in-out 효과를 적용하라는 것도 알 수 있습니다.
만약 transition을 사용하지 않았다면, 마우스를 올렸을 때 색깔이 바로 변하겠지만, transition을 사용하여 부드럽게 색깔이 변하는 것을 확인할 수 있습니다.
⭐hover와 transition을 이용한 간단한 애니메이션
index.html
|
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
|
<!DOCTYPE html>
<html lang="kr">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fira+Code:wght@300..700&display=swap"
rel="stylesheet"
/>
</head>
<body>
<div class="LoginDiv">
<button class="LoginButton">LOGIN</button>
</div>
<div class="login-popup">
<h3>LOGIN</h3>
<hr />
<div class="flexDiv">
<p>ID</p>
<input type="text" />
</div>
<div class="flexDiv">
<p>PW</p>
<input type="password" />
</div>
</div>
<script src="test.js"></script>
</body>
</html>
|
cs |
먼저 애니메이션 적용을 위해 간단하게 html을 작성해 주었습니다.
저는 LOGIN버튼과 버튼을 클릭했을 때 나올 Login-Popup 2가지를 생각하고 만들어 주었습니다.
style.css
|
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
|
body {
background-color: #1d1d1d;
}
.LoginDiv {
width: 100%;
height: 100vh;
display: grid;
place-items: center;
}
.LoginButton {
font-size: 30px;
padding: 8px 3px;
font-weight: 600;
background-color: #1d1d1d;
border: none;
cursor: pointer;
position: relative;
color: #e8e8e8;
}
.LoginButton::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3px;
background: #e8e8e8;
transform: scaleX(0);
transition: transform 0.3s;
}
.LoginButton:hover::after {
transform: scaleX(1);
}
|
cs |
위 코드는 LOGIN 버튼에 마우스를 올렸을 때(hover) 밑줄이 부드럽게 그어지는 애니메이션을 적용한 css 코드입니다.
애니메이션 관련 부분만 설명하자면, transform으로 scaleX(x축 크기)를 처음에 0으로 설정해준 다음에 transition을 사용하여 transform 속성에 변화가 생기면 0.3초 걸쳐 변화가 되도록 해주었습니다.
transform 속성의 변화는 hover상태 즉, 마우스를 LOGIN 버튼에 올렸을 때 scaleX 값을 1로 변경하면서 변화됩니다.
이렇게 해주면 버튼에 마우스를 올렸을 때 밑줄이 그어지는 애니메이션을 적용시킬 수 있습니다.
|
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
47
48
49
50
51
52
53
54
55
56
57
|
.login-popup {
opacity: 0;
visibility: hidden;
position: fixed;
border-radius: 5px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
transition: opacity 0.3s, transform 0.3s;
background: white;
width: 15%;
height: 20%;
padding: 20px 30px 20px 30px;
border: 1px solid black;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.login-popup p {
margin: 20px 0 10px 0;
font-size: 20px;
font-weight: 600;
}
.login-popup h3 {
font-size: 40px;
margin: 0 0 20px 0;
text-align: center;
}
.login-popup input {
border: none;
border-bottom: 2px solid #1d1d1d;
height: 30px;
}
.login-popup hr {
border: solid 1px #1d1d1d;
}
.login-popup input {
outline: none;
padding: 0;
width: 100%;
display: block;
font-size: 20px;
}
.login-popup input:focus {
border: none;
border-bottom: 2px solid lightblue;
}
.login-popup.show {
opacity: 1;
visibility: visible;
transform: translate(-50%, -50%) scale(1);
}
|
cs |
이번엔 opacity와 transform을 이용한 약간의 응용 버젼의 애니메이션 입니다.
어느정도 이해하셨다면, 위 코드에서 opacity와 transform 속성에 변화가 생기면 애니메이션이 적용된다는 것은 이해하셨을 겁니다. 근데 opacity와 transform 속성의 변화가 .show 클래스가 있을 때 변화되는데, .show 클래스는 어디서 받아오는 걸까요?
|
1
2
3
4
|
document.querySelector(".LoginButton").addEventListener("click", function () {
document.querySelector(".login-popup").classList.toggle("show");
});
|
cs |
바로 js파일에서 show 클래스를 넣어주었습니다. 딱 3줄 정도만 입력하여 원하는 요소에 클래스를 넣을 수 있으니 참고해주세요.
간단하게 설명하자면, LoginButton 클래스가 있는 요소를 click하면 login-popup클래스를 가지고 있는 요소에 show 클래스를 넣겠다 라는 코드입니다.
이렇게 해주면 버튼을 클릭했을 때 show 클래스를 가지게 되고 그럼 opacity와 transform에 변화가 생기면서 transition 애니메이션 효과가 적용된다는 것을 이해하실 수 있을 겁니다..!
(버튼 클릭 -> show 클래스 생성 -> opacity, transform 변화 -> transition 작동)
애니메이션 시연 영상은 글 맨 위에 올려둔 영상 확인하시면 될 것 같습니다!
🔚마치면서...
오늘은 CSS애니메이션의 기본인 transform과 transition에 대해서 간단하게 알아보고, 이를 활용한 애니메이션을 만드는 법에 대해서 배워봤습니다. 정말 기본적인 것들만 이용해서 만들었는데도 애니메이션이 없을 때보다 훨씬 고급진 느낌의 웹사이트를 만들 수 있어서 재미었고, 앞으로 더 많이 공부해서 훨씬 더 복잡하고 화려한 애니메이션을 만들어 보고 싶습니다. 다음에도 새로운 애니메이션을 배워와서 공유하도록 하겠습니다.
지금까지 읽어주셔서 감사합니다!