CSS

문제 및 실습 (div(2))

보갱:) 2020. 10. 15. 09:14

div(1)을 활용하여 로그인 창 생성하기

(해당 실습 역시 div 속성만 사용할 것!)

 

 

 

 

#divExam2.html

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title>Insert title here</title>
   <style>
      div {
         box-sizing: border-box;
      }

      /*넓이 : 부모요소가 정한 크기를 사용하도록 / 높이 : 자식들의 크기를 감싸도록*/
      .wrap {
         width: 1000px;
         border: 1px solid red;
      }

      .header {
         border: 1px dashed blue;
         /*float사용 시 부모요소의 마지막에 overflow*/
         overflow: hidden;
      }

      .header>div {
         height: 150px;
         border: 1px double yellow;
         float: left;
      }

      .header-1 {
         width: 25%;
      }

      .header-2 {
         width: 50%;
      }

      .header-3 {
         width: 25%;
      }

      .content {
         border: 1px dashed blue;
         /*float사용 시 부모요소의 마지막에 overflow*/
         overflow: hidden;
      }

      .content>div {
         height: 500px;
         border: 1px double green;
         float: left;
      }

      .content-1 {
         width: 20%;
      }

      .content-2 {
         width: 50%;
      }

      .content-3 {
         width: 30%;
      }


      .login div {
         border: 1px solid black;
      }

      .input-box {
         overflow: hidden;
      }

      .input-box>div {
         float: left;
      }

      .link-box {
         text-align: center;
         line-height: 25px;
      }

      .window {
         width: 70%;
      }

      .input-id {
         width: 100%;
      }

      input[name=id] {
         width: 100%;
         height: 100%;
         box-sizing: border-box;
      }

      .input-pw {
         width: 100%;
      }

      input[name=pw] {
         width: 100%;
         height: 100%;
         box-sizing: border-box;
      }

      .login-but {
         width: 30%;
         height: 54px;
         text-align: center;
         /*line-height는 컨텐츠 높이만큼*/
         line-height: 52px;
      }

      input[type=submit] {
         width: 90%;
         height: 90%;
         box-sizing: border-box;
      }

      .footer {
         height: 150px;
         border: 1px dashed blue;
      }

      .navi {
         height: 50px;
         border: 1px dotted aqua;
      }

   </style>
</head>

<body>

   <div class="wrap">
      <div class="header">
         <div class="header-1"></div>
         <div class="header-2"></div>
         <div class="header-3"></div>
      </div>

      <div class="navi"></div>
      <div class="content">
         <div class="content-1"></div>
         <div class="content-2"></div>
         <div class="content-3">

            <div class="login">
               <form action="https://nid.naver.com/nidlogin.login??id=id&pw=pw" method="get">
                  <div class="input-box">

                     <div class="window">
                        <div class="input-id">
                           <input type="text" placeholder="아이디를 입력하세요." name="id">
                        </div>
                        <div class="input-pw">
                           <input type="password" placeholder="패스워드를 입력하세요." name="pw">
                        </div>
                     </div>
                     <div class="login-but">
                        <input type="submit" value="로그인" name="button">
                     </div>

                  </div>

                  <div class="link-box">
                     <a href="https://nid.naver.com/user2/V2Join.nhn?m=agree&lang=ko_KR&cpno=">회원가입</a>
                     <a href="https://nid.naver.com/user2/help/idInquiry.nhn?menu=idinquiry">ID</a>
                     <a href="https://nid.naver.com/user2/help/pwInquiry.nhn?menu=pwinquiry">PW 찾기</a>
                  </div>
               </form>
            </div>

         </div>
      </div>
      <div class="footer"></div>
   </div>


</body>

</html>

 

 * line-height는 border 픽셀을 제외한 컨텐츠 높이만큼 줄 것

'CSS' 카테고리의 다른 글

문제 및 실습 (폴라로이드)  (0) 2020.10.15
문제 및 실습 (div(3)-GO GREEN)  (0) 2020.10.15
문제 및 실습 (div(1))  (0) 2020.10.13
00_CSS(애니메이션)  (0) 2020.10.13
04_CSS(색상배경(2))  (0) 2020.10.13

'CSS'의 다른글

  • 현재글문제 및 실습 (div(2))

관련글

티스토리툴바