화면 프로젝트 (2) - AWS 풀스택 과정 26일차

Project/AWS-Front

화면 프로젝트 (2) - AWS 풀스택 과정 26일차

awspspgh 2024. 8. 20. 18:14

▣ login 초안

- html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/login.css">
</head>
<body>
    <div class="inner">
        <div class="container">
            <div><a href=""><img src="../img/img_logo1.png" alt="" class="logo-image"></a></div>
            <form action="">
                <input type="text" class="text-field" name="id" placeholder="아이디">
                <input type="password" class="text-field" name="pw" placeholder="비밀번호">
                <input type="sumbmit" class="btn" value="로그인" disabled>
            </form>
            <div class="top-box">
                <!-- check Ex -->
                <label class='checkbox'>
                    <input type="checkbox"/>
                    <span class="icon"></span>
                    <span class="text">로그인 유지</span>
                </label>
                <!-- 기존 check -->
                <!-- <span class="small line">
                    <input type="checkbox" class="check" id="login">
                    <label for="login">로그인 유지</label>
                </span> -->
                <span><a href="">회원가입</a></span>
                <span class="small"><a href="">아이디/비밀번호 찾기</a></span>
            </div>
            <div class="middle-login">
                <input type="image" src="../img/img_google_icon.png">
                <input type="image" src="../img/img_naver_icon.png">
                <input type="image" src="../img/img_kakao_icon.png">
            </div>
            <div class="bottom-exp">
                <span><a href="">이용약관</a></span>
                <span class="before bold"><a href="">개인정보처리방침</a></span>
                <span class="before"><a href="">문의하기</a></span>
                <span class="before"><a href="">OOO</a></span>
            </div>
        </div>
    </div>
</body>
</html>

- css

@font-face {
    font-family: "NotoSansKR";
    src: url(../font/NotoSansKR-VariableFont_wght.ttf);
}
body {
    font-family: "NotoSansKR";
}
.small{
    font-size: 12px;
}
.bold{
    font-weight: 700;
}
.line{
    display: flex;
    line-height: 22px;
}
.inner{
    width: 1280px;
}
.inner>.container{
    width: 400px;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    border-radius: 10px;
    padding: 20px 30px;
}
.inner>.container .logo-image{
    margin-bottom: 40px;
}
.inner>.container>form>.text-field, .btn{
    width: 100%;
    height: 45px;
    padding: 10px;
    border-radius: 15px;
    box-sizing: border-box;
    margin-bottom: 10px;
    border: none;
    outline: none;
}
.inner>.container>form>.text-field{
    background-color: rgba(128, 128, 128, 0.048);
}
.inner>.container>form>.btn{
    background-color: #FFAA00;
    color: white;
    text-align: center;
    font-size: large;
    font-weight: 700;
}
.inner>.container>form>.btn:hover{
    background-color: #FF9900;
    cursor: pointer;
}
.inner>.container>.top-box{
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 50px;
}
.inner>.container>.top-box>span{
    width: 110px;
}
/* 기존 check */
/* .check{
    color: white;
    accent-color: #FFAA00;
}
.inner>.container>.top-box>span>input, label:hover{
    cursor: pointer;
} */
.inner>.container>.top-box>span>a{
    text-decoration: none;
    color:black;
}
.inner>.container>.middle-login{
    width: 100%;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: end;
}
.inner>.container>.middle-login>input{
    width: 40px;
    margin: 5px 10px 5px 15px;
    border-radius: 20px;
}
.inner>.container>.middle-login>span>a{
    vertical-align: text-top;
}
.inner>.container>.middle-login>input:last-child{
    width: 50px;
    margin: 0 10px;
}
.inner>.container>.bottom-exp{
    width: 100%;
}
.inner>.container>.bottom-exp>span{
    margin: 5px;
    position: relative;
}
.before{
    padding-left: 15px;
}
.before::before{
    content: " ";
    background-color: #d6d6d6;
    width: 3px;
    height: 13px;
    position: absolute;
    top: 35%;
    left: 0; 
}
.inner>.container>.bottom-exp>span>a{
    text-decoration: none;
    font-size: 12px;
    color: black;
}

/* check Ex */
.checkbox{
    width: 90px;
    padding-right: 20px;
}
.checkbox input{
    display: none;
  }
  
  .checkbox span{
    display: inline-block;
    vertical-align:text-top ;
    cursor: pointer;
    font-size: 12px;
  }
  
  .checkbox .icon{
    position: relative;
    width: 17px;
    height: 17px;
    border: 1px solid #c8ccd4;
    border-radius: 3px;
    transition:.1s ease;
  }
  
  .checkbox .icon::after{
    content: '';
    position: absolute;
    top: 1px;
    left: 5px;
    width: 5px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg) scale(0); 
    transition: all 03s ease;
    transition-delay: .1s;
    opacity: 0;
  }
  
  .checkbox input:checked~ .icon {
    border-color: transparent;
    background-color: #FF9900;
    animation: jelly .6s ease;
  }
  
  .checkbox input:checked~ .icon::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
  }
  
  @keyframes jelly {
    from {transform: scale(1,1);}
    30%  {transform: scale(1.25, 0.75);}
    40%  {transform: scale(0.75, 1.25);}
    50%  {transform: scale(1.15, 0.85);}
    65%  {transform: scale(0.95, 1.05);}
    75%  {transform: scale(1.05, 0.95);}
    to   {transform: scale(1,1);}
  }

▷ 출력

◈ 움직이는 checkbox

: 버튼 클릭시 젤리처럼 튕겨지는 효과가 생기는 css 체크박스

- html

<label class='checkbox'>
      <input type="checkbox"/>
      <span class="icon"></span>
      <span class="text">Library</span>
</label>

▶ 설명

- 라벨 태그를 이용해 체크 옆 글씨를 눌러도 체크가 됩니다.

- input 태그를 통해 checkbox 타입을 만들어줍니다.

- 새로운 체크박스를 만들어 줄 하나의 span 태그를 만들어 줍니다.

- css

.checkbox input{
  display: none;
}

.checkbox span{
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 45px;
}

.checkbox .icon{
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid #c8ccd4;
  border-radius: 3px;
  transition:.1s ease;
}

.checkbox .icon::after{
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0); 
  transition: all 03s ease;
  transition-delay: .15s;
  opacity: 0;
}

.checkbox input:checked~ .icon {
  border-color: transparent;
  background-color: #ff1616;
  animation: jelly .6s ease;
}

.checkbox input:checked~ .icon::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

@keyframes jelly {
  from {transform: scale(1,1);}
  30%  {transform: scale(1.25, 0.75);}
  40%  {transform: scale(0.75, 1.25);}
  50%  {transform: scale(1.15, 0.85);}
  65%  {transform: scale(0.95, 1.05);}
  75%  {transform: scale(1.05, 0.95);}
  to   {transform: scale(1,1);}
}

▶ 설명

.checkbox input{
  display: none;
}

- input 부분이 안보이게 해줍니다.

.checkbox span{
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  font-size: 30px;
}

- display: inline-block; -> icon 클래스를 가지고 있는 span 태그에 새로운 체크 상자를 만들 수 있습니다.

- vertical-align: middle; -> 두 span 태그의 높이가 달라도 가운데에 위치할 수 있도록 설정합니다.

.checkbox .icon{
  position: relative;
  width: 17px;
  height: 17px;
  border: 1px solid #c8ccd4;
  border-radius: 3px;
  transition:.1s ease;
}

- 새로운 체크박스를 만들어줍니다.

.checkbox .icon::after{
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 5px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: all .3s ease;
  transition-delay: .15s;
  opacity: 0;
}

- 클릭시 나오는 체크부분을 css를 통해 만들어 줍니다.

transition-delay: .15s; -> 박스가 빨간색으로 변경된 후 체크가 나오도록 합니다.

border-right: 2px solid #fff;

vorder-bottom: 2px solid #fff;

transform: rotate(45deg) scale(0);

=> 선 두 개를 만들어 45도 기울여 체크를 만들었습니다.

.checkbox input:checked~ .icon{
  border-color: transparent;
  background-color: #ff1616;
  animation: jelly .6s ease;
}

- input 태그가 checked일 때 테두리를 투명하게 하고 빨간색으로 변경하게 설정합니다.

animation: jelly .6s ease; -> jelly 애니메이션을 주어 동적인 효과를 줍니다.

.checkbox input:checked~ .icon::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

- input 태그가 checked일 때 체크부분도 설정해줍니다.

@keyframes jelly {
  from {transform: scale(1,1);}
  30%  {transform: scale(1.25, 0.75);}
  40%  {transform: scale(0.75, 1.25);}
  50%  {transform: scale(1.15, 0.85);}
  65%  {transform: scale(0.95, 1.05);}
  75%  {transform: scale(1.05, 0.95);}
  to   {transform: scale(1,1);}
}

- 마지막으로 클릭 시 checkbox가 움직이는 효과를 주기 위해서 애니메이션 효과를 넣어줍니다.

▷ 출력

- 느낀 점

애니메이션 효과를 배워서 재미있는 요소를 로그인 화면에 잘 녹아들게 할 수 있었다. 다른 효과도 배워보고 재미있는 요소들을 화면에 넣어보고 싶어졌다.

'Project > AWS-Front' 카테고리의 다른 글

화면 프로젝트 (6) - AWS 풀스택 과정 30일차 (0)	2024.08.26
화면 프로젝트 (5) - AWS 풀스택 과정 29일차 (0)	2024.08.23
화면 프로젝트 (4) - AWS 풀스택 과정 28일차 (0)	2024.08.22
화면 프로젝트 (3) - AWS 풀스택 과정 27일차 (0)	2024.08.21
화면 프로젝트 (1) - AWS 풀스택 과정 25일차 (0)	2024.08.19

현재글화면 프로젝트 (2) - AWS 풀스택 과정 26일차

awspspgh 님의 블로그

awspspgh 님의 블로그 입니다.

JSP, MySQL, DB, JS, 오블완, spring boot, java, jpa, 자격증, Project, react, html_css_js, CSS, 티스토리챌린지, Spring, AWS, Python, 풀스택, final, sqld,

Today :
Yesterday :

awspspgh 님의 블로그