본문 바로가기
프로그래밍/자바스크립트

프로그래밍 「 자바스크립트 편」코드를 사용하여 HTML 및 CSS로 세련된 로그인 페이지 만들기

by grapedoukan 2023. 6. 16.
728x90

안녕하세요 코더입니다! Codewithrandom에 오신 것을 환영합니다., 오늘의 블로그에서는 코드가 있는 HTML 및 CSS로 로그인 페이지를 만들 것입니다. 우리는 웹사이트를 위한 스타일리시한 로그인 양식 페이지 디자인을 만들 것입니다. 현재로서는 로그인을 위한 입력으로 이메일과 비밀번호만 고려하고 있습니다.

로그인 페이지는 승인된 사용자가 전체 사이트 또는 사이트의 하위 집합에 액세스할 수 있도록 허용하므로 웹사이트 또는 앱에서 가장 중요한 페이지 중 하나입니다. 로그인 또는 등록 페이지는 사용자가 로그인으로 보호된 사이트에서 보는 초기 페이지입니다. 가입 또는 로그인 페이지는 시각적으로 매력적이고 사용자 친화적이며 사용하기 쉬워야 합니다.

그렇게. 코드부터 시작하되 코드를 진행하기 전에 확인해보자.

Html 로그인 페이지 소스 코드:-:-

HTML에서는 웹 사이트의 기본 레이아웃을 디자인합니다. div 태그, 입력 태그 및 HTML 양식과 같은 HTML의 기본 사항에 관심이 있기를 바랍니다.

이 로그인 페이지에서는 이메일과 비밀번호에 대한 두 개의 입력 태그를 추가합니다. CheckBox 속성의 input 태그를 추가하여 확인란을 눌렀을 때 팝업을 열 수 있도록 합니다.

먼저 script-src를 추가한 다음 본문에 확인란을 추가하고 ID가 레이블 보기 양식에 대해 show btn으로 표시됩니다.

교차 기호 / 아이콘의 경우 Fontawesome CDN (Content-Delivery-Network) 링크를 사용하여 통합합니다.

그런 다음 form 태그 안에 두 개의 input 태그와 해당 label 태그를 삽입합니다.

그런 다음 로그인 양식의 경우 div 클래스는 데이터이고 레이블은 이메일 또는 전화입니다.

그런 다음 다른 div 클래스는 데이터이고 레이블은 암호입니다.

마지막 div 클래스는 태그를 고정하고 지금 가입하는 잊어버린 암호입니다.

<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8" />
        <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
        <!-- <title>Popup Login Form Design | CodingNepal</title> -->
        <link rel="stylesheet" href="style.css" />
        <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    </head>
    <body>
        <div class="center">
            <input type="checkbox" id="show" />
            <label for="show" class="show-btn">View Form</label>
            <div class="container">
                <label
                    for="show"
                    class="close-btn fas fa-times"
                    title="close"
                ></label>
                <div class="text">Login Form</div>
                <form action="#">
                    <div class="data">
                        <label>Email or Phone</label>
                        <input type="text" required />
                    </div>
                    <div class="data">
                        <label>Password</label>
                        <input type="password" required />
                    </div>
                    <div class="forgot-pass">
                        <a href="#">Forgot Password?</a>
                    </div>
                    <div class="btn">
                        <div class="inner"></div>
                        <button type="submit">login</button>
                    </div>
                    <div class="signup-link">
                        Not a member? <a href="#">Signup now</a>
                    </div>
                </form>
            </div>
        </div>
    </body>
</html>

HTML 코드 출력 로그인 양식 디자인 만 : -

로그인 페이지 디자인을 위한 CSS 코드:-

이제 로그인 페이지의 레이아웃이 준비되었지만 기본적으로 로그인 양식이 사라지고 확인란을 클릭하면 로그인 페이지가 표시되고 십자 기호를 클릭하면 사라지는 방식으로 구현해야하기 때문에 완벽하지 않고 완전히 준비되지 않았습니다.

이를 위해 기본적으로 컨테이너 클래스의 display 속성을 none에 적용하여 사라지고 확인란을 선택하면 컨테이너 클래스의 display 속성을 block으로 설정합니다.

CSS 선택기, border-box, flex-box 및 의사 선택기와 같은 CSS를 사용한 스타일링의 기본 개념을 살펴 보셨기를 바랍니다.

여기에서 우리는 웹사이트를 아름답고 반응이 빠른 것으로 만들기 위한 html 코드를 디자인하고 싶습니다.

@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}
body {
    height: 100vh;
    width: 100%;
    background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn {
    background: #fff;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: 500;
    color: #3498db;
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
input[type="checkbox"] {
    display: none;
}
.container {
    display: none;
    background: #fff;
    width: 410px;
    padding: 30px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
    display: block;
}
.container .close-btn {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 18px;
    cursor: pointer;
}
.container .close-btn:hover {
    color: #3498db;
}
.container .text {
    font-size: 35px;
    font-weight: 600;
    text-align: center;
}
.container form {
    margin-top: -20px;
}
.container form .data {
    height: 45px;
    width: 100%;
    margin: 40px 0;
}
form .data label {
    font-size: 18px;
}
form .data input {
    height: 100%;
    width: 100%;
    padding-left: 10px;
    font-size: 17px;
    border: 1px solid silver;
}
form .data input:focus {
    border-color: #3498db;
    border-bottom-width: 2px;
}
form .forgot-pass {
    margin-top: -8px;
}
form .forgot-pass a {
    color: #3498db;
    text-decoration: none;
}
form .forgot-pass a:hover {
    text-decoration: underline;
}
form .btn {
    margin: 30px 0;
    height: 45px;
    width: 100%;
    position: relative;
    overflow: hidden;
}
form .btn .inner {
    height: 100%;
    width: 300%;
    position: absolute;
    left: -100%;
    z-index: -1;
    background: -webkit-linear-gradient(
        right,
        #56d8e4,
        #9f01ea,
        #56d8e4,
        #9f01ea
    );
    transition: all 0.4s;
}
form .btn:hover .inner {
    left: 0;
}
form .btn button {
    height: 100%;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}
form .signup-link {
    text-align: center;
}
form .signup-link a {
    color: #3498db;
    text-decoration: none;
}
form .signup-link a:hover {
    text-decoration: underline;
}

1 단계 : 먼저 가져오기 링크를 사용하여 Google Fonts에서 일부 새 글꼴을 가져온 다음 font-family 속성을 사용하여 기본 글꼴에서 글꼴을 수정합니다.

이제 범용 선택기 속성을 사용하여 상자 크기를 "border-box"로, 여백과 안쪽 여백을 "0"으로, 글꼴 패밀리를 "Poppins"로 새 본문 글꼴로 설정합니다.

우리 몸에 선형 그라데이션 배경을 추가하고 background 속성을 밝은 파란색과 진한 보라색의 조합으로 설정하여 수행합니다.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
  margin: 0;
  padding: 0;
  outline: none;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  height: 100vh;
  width: 100%;
  background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}

2 단계 : 이제 배경을 "흰색"으로 설정하고 클래스 선택기(.show-btn)를 사용하여 20px의 패딩도 추가했습니다. 버튼에는 상자 그림자가 추가되었습니다.

무언가를 선택하기 위해 태그 선택기를 사용합니다. 다음으로 디스플레이를 "block"으로, position을 "absolute"로, right 속성을 20px로 변경합니다.

마찬가지로 Style이 폼에 추가되었습니다. 코드를 읽기만 하면 됩니다.

.show-btn {
  background: #fff;
  padding: 10px 20px;
  font-size: 20px;
  font-weight: 500;
  color: #3498db;
  cursor: pointer;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.show-btn,
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
input[type="checkbox"] {
  display: none;
}
.container {
  display: none;
  background: #fff;
  width: 410px;
  padding: 30px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
#show:checked ~ .container {
  display: block;
}
.container .close-btn {
  position: absolute;
  right: 20px;
  top: 15px;
  font-size: 18px;
  cursor: pointer;
}
.container .close-btn:hover {
  color: #3498db;
}
.container .text {
  font-size: 35px;
  font-weight: 600;
  text-align: center;
}
.container form {
  margin-top: -20px;
}
.container form .data {
  height: 45px;
  width: 100%;
  margin: 40px 0;
}
form .data label {
  font-size: 18px;
}
form .data input {
  height: 100%;
  width: 100%;
  padding-left: 10px;
  font-size: 17px;
  border: 1px solid silver;
}
form .data input:focus {
  border-color: #3498db;
  border-bottom-width: 2px;
}
form .forgot-pass {
  margin-top: -8px;
}
form .forgot-pass a {
  color: #3498db;
  text-decoration: none;
}
form .forgot-pass a:hover {
  text-decoration: underline;
}
form .btn {
  margin: 30px 0;
  height: 45px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
form .btn .inner {
  height: 100%;
  width: 300%;
  position: absolute;
  left: -100%;
  z-index: -1;
  background: -webkit-linear-gradient(
    right,
    #56d8e4,
    #9f01ea,
    #56d8e4,
    #9f01ea
  );
  transition: all 0.4s;
}
form .btn:hover .inner {
  left: 0;
}
form .btn button {
  height: 100%;
  width: 100%;
  background: none;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}
form .signup-link {
  text-align: center;
}
form .signup-link a {
  color: #3498db;
  text-decoration: none;
}
form .signup-link a:hover {
  text-decoration: underline;
}

마침내... 로그인 페이지 디자인이 준비되었습니다.

로그인 페이지는 반응이 빠르고 아름답습니다. 당신이 그것을 좋아할 수 있기를 바랍니다 / 의견 상자에 의심의 여지가 있는 경우. 코드 또는 블로그와 관련된 질문이 있으면 언제든지 의견을 말하십시오. 다른 블로그를 방문하여 아이디어와 지식을 얻을 수 있습니다.

감사합니다!

글쓴이 — Sayali Kharat 및 Himanshu Singh

이 로그인 양식 디자인에 어떤 코드 편집기를 사용하십니까(복수 선택 가능)?

개인적으로 VS Code Studio를 사용하는 것이 좋으며 매우 간단하고 사용하기 쉽습니다.

이 프로젝트는 반응형입니까?

예, 이 로그인 페이지 디자인 프로젝트는 반응형입니다.

이 프로젝트를 만들기 위해 외부 링크를 사용합니까?

예, Fontawesome CDN (Content-Delivery-Network) 링크를 사용하여 통합하고 있습니다.

728x90
저작자표시

'프로그래밍 > 자바스크립트' 카테고리의 다른 글

프로그래밍 「 자바스크립트 편」Chrome 확장 프로그램 개발을 위한 고급 기술: 종합 가이드  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」HTML 및 JavaScript를 사용한 간단한 카운트 다운 타이머  (0) 2023.06.17
프로그래밍 「 자바스크립트 편」AI 토킹 디스코드 봇 만들기 | ChatGPT 및 JavaScript  (0) 2023.06.16
프로그래밍 「 자바스크립트 편」 IoT 시스템 개발이 왜 그렇게 어려워 보입니까?  (0) 2023.06.16
프로그래밍 「 자바스크립트 편」생계를 위한 프로그래밍은 너무 (매우) 외로울 수 있습니다  (0) 2023.06.16

관련글

티스토리툴바