정구리의 우주정복

[HTML,CSS] 로그인 폼 만들기 (공부용) 본문

STUDY/K-DIGITAL

[HTML,CSS] 로그인 폼 만들기 (공부용)

Jungry_ 2022. 8. 6. 02:00
반응형

결과물

 

*서버와 연결하는 방법은 별도로 적지 않습니다 HTML 과 CSS 만 작성합니다*

 

전체 소스코드

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>Login Form</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        body {
            background-color: #1BBC9B;
        }

        div {
            margin: auto;
            width: 300px;
            background-color: #EEEFF1;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
        }

        input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            border: none;
        }

        .in {
            margin-bottom: 10px;
        }

        #btn {
            background-color: #1BBC9B;
            margin-bottom: 30px;
            color: white;
        }

        a {
            text-decoration: none;
            color: #9B9B9B;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <div>
        <form action="">
            <input type="text" placeholder="아이디" class="in">
            <input type="password" placeholder="비밀번호" class="in">
            <input type="submit" id="btn" value="로그인"><br>
        </form>
        <a href="#none">비밀번호를 잊어버리셨나요?</a>
    </div>
</body>

</html>

 

HTML

<body>
    <div>
        <form action="">
            <input type="text" placeholder="아이디" class="in">
            <input type="password" placeholder="비밀번호" class="in">
            <input type="submit" id="btn" value="로그인"><br>
        </form>
        <a href="#none">비밀번호를 잊어버리셨나요?</a>
    </div>
</body>

추후 폼 전송을 위해 form 태그로 묶어줌

input 태그에 각자 placeholder를 통해 역할을 적어주고 text 와 password 부분은 동일한 형태를 갖기 때문에 class='in'으로 묶어줬다

submit 버튼은 또 다른 역할을 하기 때문에 btn 이라는 id 값을 줬다 (class 써도 상관없음 !)

 

CSS

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        body {
            background-color: #1BBC9B;
        }

        div {
            margin: auto;
            width: 300px;
            background-color: #EEEFF1;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
        }

        input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            border: none;
        }

        .in {
            margin-bottom: 10px;
        }

        #btn {
            background-color: #1BBC9B;
            margin-bottom: 30px;
            color: white;
        }

        a {
            text-decoration: none;
            color: #9B9B9B;
            font-size: 12px;
        }

 

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        body {
            background-color: #1BBC9B;
        }

우선 @import 를 통해 구글에서 노토산스 글씨체를 가져와준다.

* 를 이용해서 전체에 글씨체를 적용해줌 !

body 태그 안에는 bgc만 적용해주었다 

 

        div {
            margin: auto;
            width: 300px;
            background-color: #EEEFF1;
            border-radius: 5px;
            text-align: center;
            padding: 20px;
        }

div 태그 (로그인 폼을 감싸고 있는 네모상자) 는 margin:auto 를 통해 중앙배치를 해준다 (margin:auto 는 가로 중앙 배치를 해주는 친구임)

text-align:center를 통해 div 안의 요소들을 중앙정렬해준다 .

 

        input {
            width: 100%;
            padding: 10px;
            box-sizing: border-box;
            border-radius: 5px;
            border: none;
        }

 

input 태그 (id, pw, submit btn) 는 width 100%를 주고 box-sizing : border-box; 를 줘서 모양을 줬다 원래 width 100%만 주면 약간 예쁘지 않으니까 box-sizing 을 꼭 해줘야한다 . 부모요소 기준으로 width 값이 정해지는 것이라 위의 div 태그의 너비에 맞게 예쁘게 된다.

border:none 을 이용해 Input 태그의 테두리를 지워줬다.

 

        .in {
            margin-bottom: 10px;
        }

        #btn {
            background-color: #1BBC9B;
            margin-bottom: 30px;
            color: white;
        }

Input 태그에 별도의 효과들을 줬다

 

        a {
            text-decoration: none;
            color: #9B9B9B;
            font-size: 12px;
        }

 a태그는 특이하게 상속이 되지 않는 요소이기 때문에 별도로 글자 색과 text-decoration 을 해줘야한다. text-decoration:none 과 color 를 지정해주는 것은 a 태그에 필수적으로 같이 붙어다니는 친구들이라고 한다. 

 

 

다른 방식으로 만든 Form 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

        * {
            font-family: 'Noto Sans KR', sans-serif;
        }

        body {
            margin: 0;
            background-color: #1BBC9B;
        }
        .login-form{
            /* border: 3px solid red; */
            border-radius: 5px;
            width: 300px;
            background-color: #eeeff1;
            padding:20px;
            margin : 50px auto;
        }
        .text-field{
            font-size: 14px;
            padding : 10px;
            margin-bottom: 10px;
            border-radius: 5px;
            border : none;
            width : 100%;
            box-sizing: border-box;
        }
        /* 같은 width 100% 인데 submit 은 박스사이징을 안해도 되는 이유는
        submit에는 자동으로 border-box가 적용이 된다 */
        .submit-btn {
            font-size : 14px;
            color : #fff;
            padding : 10px;
            border-radius: 5px;
            background-color: #1bbc9b;
            border : none;
            width : 100%;
        }

        .links {
            text-align: center;
            margin:30px;
        }
        .links a {
            color : #9b9b9b;
            text-decoration: none;
            font-size: 12px; 
        }
        .submit-btn:hover {
            box-shadow: 2px 4px 5px rgba(0,0,0,0.5);
        }
    </style>
</head>

<body>
    <div class="login-form">
        <form action="">
            <input type="text" class="text-field" placeholder="아이디">
            <input type="password" class="text-field" placeholder="비밀번호">
            <input type="submit" class="submit-btn" value="로그인">
        </form>
        <div class="links">
            <a href="#none">비밀번호를 잊어버리셨나요?</a>
        </div>
    </div>
</body>

</html>
반응형

'STUDY > K-DIGITAL' 카테고리의 다른 글

[Java] Math.random 사용법, 배수 출력하기  (0) 2022.08.11
[Java] 계절 출력 (Switch-Case break 사용)  (0) 2022.08.10
[Java] 자바 가위바위보 만들기 (if 사용)  (0) 2022.08.10
[HTML,CSS] 로그인폼 만들기 2 (공부용)  (0) 2022.08.10
[HTML,CSS] 드롭다운 메뉴 만들기  (1) 2022.08.07
'STUDY/K-DIGITAL' Related Articles more
Comments