-
이미지가 삽입된 로그인 페이지 유형개발일지 2021. 6. 29. 15:16
이미지가 삽입된 로그인 페이지 1.기존에 있던 로그인 페이지를 불러온다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인페이지</title> </head> <body> <h1>로그인 페이지</h1> <h5>아이디, 패스워드를 입력해주세요</h5> <p>ID: <input type="text"></p> <p>PW: <input type="text"></p> <button>로그인하기</button> </body> </html>2. head 태그에 style을 넣어준다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>로그인페이지</title> <style> </style> </head> <body> <h1>로그인 페이지</h1> <h5>아이디, 패스워드를 입력해주세요</h5> <p>ID: <input type="text"></p> <p>PW: <input type="text"></p> <button class="mybtn">로그인하기</button> </body> </html>3. body 태그안에 있는 태그들을 div 태그로 묶어주고, 각각 클래스 선택자를 지정해 준다.
<body> <div class="wrap"> <div class="mytitle"> <h1>로그인 페이지</h1> <h5>아이디, 패스워드를 입력해주세요</h5> </div> <p>ID: <input type="text"></p> <p>PW: <input type="text"></p> <button class="mybtn">로그인하기</button> </div> </body>4. 스타일을 지정해준다.
<style> .mytitle{ background-color: green; 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: 20px; } .wrap{ width: 300px; } .mybtn{ width: 100px; } </style>★background-color를 지정해 준 이유는 해당 선택자의 크기를 맞추기 위해 눈으로 보기 쉽게 표시했다.
background-size는 cover로 설정해 이미지 크기를 맞췄고, background-position은 center로 지정해서이미지를 중앙으로 오도록 만들었고, border-radius를 줘서 사각형에 곡률을 줬다.또한 Padding-top을 통해 안쪽에서 20px를 띄웠다.
'개발일지' 카테고리의 다른 글
나홀로 링크 메모장-기본 틀 (0) 2021.06.30 만년필 쇼핑몰 메인페이지 (0) 2021.06.30 2019년 웹 구동 및 UI 디자인 구현 합동조별과제수행(애견 쇼핑몰 '몽개') (0) 2021.06.29 간단한 로그인 페이지 (0) 2021.06.29 HTML, CSS의 구분 (0) 2021.06.29