Coding

[CSS] 이미지 불러오기, 이미지 편집 (feat. 로그인 페이지)

이즈 life 2021. 8. 31. 23:13

<html><head></head>

<style>
 .mytitle {
          color: white;
           width: 500px;
           height: 300px;

          background-image: url('https://lh3.googleusercontent.com/proxy/UauoFirfyANtQdMT1xGNGm3h9FQKBg JKpVBeHlIq98BIFRqpLLFAL5cUodRb3LW8ZeN5pPYUbZjXU83BIEShkNzS96GhodyP5wNjhNEE9rBrRcUPgXIl8s0CleQ');
           background-position: center;
           background-size: 100%, 100%;

 

-> image 파일을 가져오기 위한 3가지 기본 태그


          border-radius: 10px;
           text-align: center;
           padding-top: 40px;
      }

 

-> image 파일 내에 텍스트 위치 설정


     .wrap {
          margin: auto;
           width: 500px;
      }

 

-> margin: auto; div class 설정한 image background의 여백을 좌우 동일하게 한다.


     .login {
          padding-left : 150px ;
      }
     .button1 {
         margin: auto;
          display : block;
      }
</style>

<body>

         <div class="wrap">
                   <div class="mytitle">
                            <h1>로그인 페이지</h1>
                            <h5>아이디, 비밀번호를 입력해주세요</h5>
                   </div>
          <div class="login">
                  <p>
                            ID : <input type="text" />
                   </p>
                   <p>
                            PW : <input type="password" />
                   </p>
          </div>         
          <button class="button1" >로그인하기</button>

         </body>

</html>