IT 성장기 (교육이수)/모의해킹 스터디 (2024.04-09)

[webDev] 로그인 페이지 구현 HTML & CSS

eezy 2024. 4. 23. 20:18

(2024.1.8 수정) : 처음 웹사이트를 구현해본 내용으로, HTML 태그와 요소 선택자 그리고 CSS의 활용법에 대한 간략한 코드입니다. 

 

처음 웹페이지를 개발하면서 로그인 기능 구현이 가장 큰 도전 과제 중 하나였습니다.

아래는 로그인 기능을 구현하기 위해 설정한 코드에 대한 설명입니다:

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Jersey+25&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Gaegu&display=swap" rel="stylesheet">
</head>

/* 
link rel = linking this php login page to external css sheet for configuring style.
it improves readability for basic function codes
link href = "link" -> links necessary fonts
*/

<body>
    <div class = "login-page">
        <h2>yyz code</h2>
        <div class = "form">
            <form class = "login-form" method="get" action="login2.php">
                <input type="text", name="id", placeholder="User Id">
                <input type="text", name="password", placeholder="User Password">
                <button type="submit", placeholder="login">login</button>
            </form>
        </div>
    </div>

</body>

 

> CSS file

더보기 
.login-page {
    width: 360px;
    padding: 8% 0 0;
    margin: auto;
  }

.login-page > h2{
    position: relative;
    margin: 0 auto 10px;
    padding: 1px;
    text-align: center;
    font-family: "Gaegu", sans-serif;
    font-size: 250%;
    font-weight: 900;
    color: white;
}

.login-form > input{
    position: relative;
    z-index: 1;
    background-color: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form {
    position: relative;
    z-index: 1;
    background: #FFFFFF;
    max-width: 360px;
    margin: 0 auto 100px;
    padding: 45px;
    text-align: center;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

.form input {
    font-family: "Nunito", sans-serif;
    outline: 0;
    background: #f2f2f2;
    width: 100%;
    border: 0;
    margin: 0 0 15px;
    padding: 15px;
    box-sizing: border-box;
    font-size: 14px;
}

.form button {
    font-family: "Nunito", sans-serif;
    text-transform: uppercase;
    outline: 0;
    background: #4CAF50;
    width: 100%;
    border: 0;
    padding: 15px;
    color: #FFFFFF;
    font-size: 14px;
    -webkit-transition: all 0.3 ease;
    transition: all 0.3 ease;
    cursor: pointer;
}

.container {
    position: relative;
    z-index: 1;
    max-width: 300px;
    margin: 0 auto;
}

body {
    background: #76b852; /* fallback for old browsers */
    background: rgb(141,194,111);
    background: linear-gradient(90deg, rgba(141,194,111,1) 0%, rgba(118,184,82,1) 50%);
    font-family: "Nunito", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;      
}

> PHP : 로그인 검증 (DB 연결 미완료)

더보기 
<head>
    <meta charset="utf-8">
</head>

<body>
    <?php
    $id = $_GET["id"];
    $password = $_GET["password"];

    if($id == "admin" && $password == "1234"){
        echo "<script>alert(\"환영합니다!\"); location.href = 'https://yyz-code.tistory.com/' </script>";
    }
    else{
        echo "<script>alert(\"다시 시도하세요\"); location.href = 'logintest.php' </script>";
    }
    ?>
/* 
echo alert : sends out pop up with the message written as following
location.href : redirects to the link attached. 
	if login success, redirects to this tistory.
    if login fail, redirects to previous login page.
    wanted to make it more interesting but failed, due to lack to time and knowledge.
*/
</body>

 

그룹 콘텐츠: div와 span 이해하기

 

div (블록 레벨 요소)

  • 목적: 더 큰 콘텐츠 섹션을 그룹화하는 데 사용됩니다.
  • 동작: 기본적으로 부모 컨테이너의 전체 너비를 차지하며, 새로운 줄에서 시작합니다.
  • 사용 사례: 섹션, 컨테이너, 콘텐츠 블록 등 레이아웃 구조화에 적합합니다.

span (인라인 레벨 요소)

  • 목적: 텍스트의 특정 부분을 그룹화하는 데 사용됩니다.
  • 동작: 인라인 요소로 작동하며, 주변 텍스트와 같은 줄에 유지됩니다.
  • 사용 사례: 텍스트의 스타일을 부분적으로 변경하거나 특정 텍스트를 강조할 때 적합합니다.
<div id = "box2"><span id="span">Lorem ipsum</span> dolor sit amet consectetur adipisicing elit.</div>

/* css code */
#box2{
    margin-top: 80px;
    margin: auto;
    border: 5px solid;
    width: 250px;
    height: 150px;
    padding: 2px;
    text-align: center;
    background-color: bisque;
}

#span{
    font-weight: bolder;
    color: orange;
}

 

요소 선택자

Id

  • HTML 코드에서 단일 요소를 식별하고 특정 스타일을 적용할 수 있도록 합니다.
  • 코드에는 여러 요소가 있을 수 있지만, id는 한 요소에만 고유하게 사용됩니다.
  • id는 재사용할 수 없습니다.
#idname {
	color: green
}

 

Class

  • 페이지나 사이트 내에서 동일한 선택자를 여러 번 사용할 경우 class를 사용해야 합니다.
  • 하나의 요소에 여러 개의 class를 적용할 수 있습니다.
.classname{
	color: pink
}

 

<참고 문서>

  • youtube : learn css in 1 hr (beginner tutorials)