html과 css를 이용하여 사용자 경험을 높이기 위한 디자인을 적용시키는 연습을 해보려고 한다.
여기서는 html의 태그와 클래스를 이용해 css를 지정하기 때문에 평소 React에서 만들던 styled-component에 적용하려면 구조를 조금 수정해야 하지만,
적용 원리가 어떻게 되는지 이해하면 그 변경도 쉬워질 거라 생각하기에 그 기초가 되는 코드를 작성해보았다.
만들고자 하는 것
Login을 위해서 id와 password를 입력하는 창을 만들 것이다.
평소 정적인 디자인을 자주 구현해 왔기에 이번에는 사용자의 눈이 다채로워지도록 만드는 게 목표이다.
코드
html
<body>
<form class="box" action"Hello.html" method="post">
<h1>Login</h1>
<input type="text" name="" placeholder="Username">
<input type="password" name="" placeholder="Password">
<input type="submit" name="" placeholder="Login">
</form>
</body>단순히 html로 userName(id)와 password를 입력하고 submit하는 form을 만들었다.
아무 디자인도 적용되어 있지 않기 때문에 이렇게 기본적인 형태의 입력창이 나온다.
css
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background: #232121;
}
.box {
width: 300px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
color: white;
transform: translate(-50%, -50%);
background: #191919;
text-align: center;
border-radius: 14em;
box-shadow: 5px 5px 50px 50px rgba(252, 5, 5, 0.699);
animation: animateBg 5s linear infinite;
}
@keyframes animateBg {
100% {
filter: hue-rotate(360deg);
}
}
.box input{
border: 0;
background: none;
display: block;
margin: 20px auto;
border: 3px solid #0399fd;
padding: 14px 10px;
width: 200px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
}
.box input[type = "text"]:focus, .box input[type = "password"]:focus {
width: 280px;
border-color: #04fb6f;
}
.box input[type = "submit"] {
border: 0;
background: none;
display: block;
margin: 20px auto;
text-align: center;
font-size: 100%;
border: 3px solid #04fb6b;
padding: 14px 40px;
outline: none;
color: white;
border-radius: 24px;
transition: 0.25s;
cursor: pointer;
}
.box input[type = "submit"]:hover {
background: #04Fb5b;
}
이제 디자인을 적용하여 주요 요소들을 담고 있는 form태그의 box-shadow를 조작하여 배경색이 지속적으로 변하게 만들었다.
추가로 input태그들의 border에도 색을 부여한 후 테두리 색깔이 변하도록 animation을 함께 적용한다.
이를 통해 지루할 수 있는 화면에 색다른 변화를 주었다.
이건 focus와 hover옵션을 부여한 결과인데
- password입력 창에 focus가 되면 width를 변경하고 기존 border-color을 변경한다.
(여기서 변경되는 색은 제출 버튼에 마우스hover했을 시 변하는 색과 동일하다) - type="submit"인 input태그 즉, 제출 버튼에 마우스 호버 이벤트가 발생하면 배경 색을 변경하도록 옵션을 부여했다.
후기
사실 작성 코드로 보면 크게 어려울 것 없는 코드들이지만, 작은 변화만으로도 재미난 효과를 줄 수 있던 것 같아서 기분이 좋았다. 지금까지 했던 프로젝트들에서는 이런 효과를 줄 기회가 많지 않아 사용하지 않고 생각만 하고 있었는데, 앞으로 기회가 생기면 적극 사용해보려고 한다.
결과물
