[HTML & CSS] 간단한 로그인 페이지 만들어보기

728x90

기본 로그인 뼈대를 만들어보자

우선 타이틀 로그인 페이지로 넣어주자

<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>

페이지의 타이틀을 작성해줬다.

그리고

큰 글씨의 로그인페이지라는 글을 띄워보자

<body>
    <h1>로그인 페이지</h1>
</body>

로그인 페이지라는 큰 제목정도의 글씨가 나왔다.

아래와 같은 아이디와 패스워드 입력칸을 넣어보자

id: 빈칸

pw: 빈칸

<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
</body>

마지막으로 로그인하기 버튼을 넣어보자

<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>

<body>
    <h1>로그인 페이지</h1>
    <p>ID: <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button>로그인하기</button>
</body>
</html>

이런 코드로 간단한 로그인 페이지를 완성해 보았다.

728x90

저작자표시

'📁 𝐡𝐭𝐦𝐥 & 𝐜𝐬𝐬 > HTML & CSS' 카테고리의 다른 글

[HTML & CSS] 부트스트랩 써보기 (2)	2023.01.10
[HTML & CSS] 폰트, 주석, 파일분리 (2)	2023.01.10
[HTML & CSS] 자주 쓰이는 CSS 연습하기 (0)	2023.01.10
[HTML & CSS] CSS 기초 (0)	2023.01.10
[HTML & CSS] 기본 내용 (0)	2023.01.10