HTML, CSS로 로그인페이지 만들기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인페이지</title> //밑에 link는 구글폰트 jua임 <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"> <style> //*라는뜻은 전체페이지에 적용하겠다는뜻임(전체페이지에 폰트를적용하겠다.) *{ font-family: 'Jua', sans-serif; .mytitle { width: 300px; height: 200px; color: white; text-align: center; background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"); background-size: cover; background-position: center; border-radius: 10px; padding-top: 40px; } .wrap{ margin: auto; width: 300px; } </style> </head> <body> <div class="wrap"> <div class="mytitle"> <h1>로그인페이지</h1> <h5>아이디, 비밀번호를 입력해주세요</h5> </div> <h1>로그인 페이지</h1> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </div> </body> </html>
개발작