ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • 2023년 05월12일 수업 내용 정리
      국비 교육 내용 정리 2023. 5. 12. 09:26

      1. flex-box!

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
        <style>
             body{
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;   /* 높이를 줘야 적용이 되겠지?*/
             }
             .card{
              border: 1px solid #000;
              width: 500px;
              height: 400px;
              padding: 20px;
              display: flex;
              justify-content: center;
              align-items: center;
           
             }
             .content{
              border: 1px solid #000;
              width: 70%;
              display: flex;
              flex-direction: column;  /* 가로를 세로로 바꿔주겠지?*/
              align-items: center;
             
             
             }
        </style>
      </head>
      <body>

          <div class="card">
                <div class="content">
                 <h1>Card Title</h1>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus adipisci sunt saepe fuga odio ut illo incidunt, sapiente blanditiis fugit!
                 </p>
                 <a href="#">Read More</a>
                </div>    
          </div>
         
      </body>
      </html>

      (2)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              section{
                  margin: 0;
                  background-color: #eee;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;  /*vh란?  화면 100을 사용하겠다?*/
              }
              form{
                  border: 1px solid red;
                  width: 700px;
                  padding: 1em;
                  background-color: #fff;
                   
              }
              .form-row{          /* 부모한테 display:flex;를 주고*/
                  display: flex;
              }
              .form-row label{   /* 자식에게 flex로 크기를 주면 비율을 조절할수 있음*/
                  flex:1;
              }
              .form-row input{
                  flex:3;
              }
          </style>
      </head>
      <body>

        <section>
          <form>
              <div class="form-row">  
                  <label for="name">Name:</label> <!-- label은 묶어주기 위하여 쓰임-->
                  <input type="text" id="name">
              </div>

              <div class="form-row">
                  <label for="color">Favorite color:</label>
                  <input type="text" id="color">
              </div>
          </form>
        </section>

         
      </body>
      </html>

       

      (3) 모든 요소 화면 중앙 정렬!

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
           <style>
              body{
                  border: 1px solid red;
                  margin: 0;
                  background-color: #eee;
                  display:flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
              }
              section{
                  border: 1px solid #000;
                  height: 500px;
                  width:  800px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
           </style>
      </head>
      <body>
          <section>
              <h1>Centered Content</h1>
          </section>
         
      </body>
      </html>

      (4)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body{
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
              }
             .yellowgreen{
                  width: 800px;
                  height: 400px;
                  background-color: yellowgreen;
                  display: flex;
                  justify-content: center;
                  align-items: center;
              }
              .royalblue{
                  width: 600px;
                  height: 300px;
                  background-color: royalblue;
                  display: flex;
                  justify-content: center;
                  align-items: center;        
              }
              .crimson{
                  width: 400px;
                  height: 150px;
                  background-color: crimson;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
              }
              .gray{
                  width: 100px;
                  height: 100px;
                  margin: 5px;
                  background-color: gray;
             
                 
              }
          </style>
      </head>
      <body>
          <div class="yellowgreen">
              <div class="royalblue">
                  <div class="crimson">
                      <div class="gray"></div>
                      <div class="gray"></div>
                      <div class="gray"></div>
                  </div>
              </div>
          </div>
         
      </body>
      </html>

       

      (5)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
           
            .container{
               display:flex;
               
            }
            .box{
              border: 1px solid red;
              display: flex;
              flex: 1;
               
            }
           
            .div1{
              height: 200px;
              background-color: yellow;
              flex:1;
            }

            .div2{
              height: 200px;
              background-color: yellowgreen;
             flex:1;  
          }
           
             

          </style>
      </head>
      <body>
          <div class="container">
              <div class="box">
                  <div class="div1"></div>
                  <div class="div2"></div>
              </div>

              <div class="box">
                  <div class="div1"></div>
                  <div class="div2"></div>
              </div>

              <div class="box">
                  <div class="div1"></div>
                  <div class="div2"></div>
              </div>
          </div>
         
         
      </body>
      </html>

       

      (6) space-around 

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <style>
              body{
                  margin: 0;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  height: 100vh;
              }
             
              .card-items{
                  border: 5px solid #000;
                  width: 1000px;
                  padding: 10px;
                  display: flex;
                  justify-content: space-around;
              }
              .card{
                  width: 300px;
                  height: 400px;
                  border: 2px solid red;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between
                 
              }
              .card h3{
                  background: yellow;
              }
          </style>
      </head>
      <body>
              <div class="card-items">
              <div class="card">
                  <h3>card #01</h3>
                  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Distinctio, ad. Earum ratione, illum aut molestias voluptatibus tempore neque blanditiis! Obcaecati eius quidem magnam soluta cupiditate esse, in rem nobis dolorem!</p>
                  <img src="/CSS/ch09_flex/images/300x150.gif" alt="">
              </div>
              <div class="card">
                  <h3>card #02</h3>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit expedita rerum obcaecati maxime architecto ea officia minus distinctio eveniet repellendus earum quia sint, explicabo nobis sunt, natus sapiente vel voluptatibus.</p>
                  <img src="/CSS/ch09_flex/images/300x150.gif" alt="">
              </div>
              <div class="card">
                  <h3>card #03</h3>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ex dignissimos mollitia! Eaque ducimus culpa odio id! Id dolor modi nostrum architecto reiciendis eos perspiciatis neque ullam. Nihil, reiciendis suscipit.</p>
                  <img src="/CSS/ch09_flex/images/300x150.gif" alt="">
              </div>
             


      </body>
      </html>

      (7) hover~ 

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              a{
                  color: #333;
                  text-decoration: none;
                  border: 1px solid #000;
                  width: 120px;
                  display:inline-block; /*수직으로 블록 만들어줌*/
                  text-align: center;
                  padding: 5px;
                  border-radius: 5px;
                  transition: 1s 2s; /*지속시간:하나만 있음면 1s 되고 두개일경우 2초동안 딜레이됨*/
              }
              a:hover{
                  background-color: black;
                  color: #fff;
              }
          </style>
      </head>
      <body>
          <a href="#none">네이버</a>
          <a href="#none">구글</a>
          <a href="#none">다음</a>
      </body>
      </html>

      (8)

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>애니메이션 효과</title>
          <style>
              .box{
                  width: 100px;
                  height: 100px;
                  background-color: dodgerblue;
                  border: 2px solid yellow;
                  border-radius: 10px;
                 
                  position: absolute;

                  animation-name: box,fadeout;
                  animation-duration: 3s;
                  /* animation-iteration-count: infinite; 무한대 설정 */
                 
              }

              @keyframes box{
                  0{top: 0;}
                  50%{top: 200px;}
                  100{top: 400px;}
              }

              @keyframes fadeout{
                  from{opacity: 1;}
                  to{opacity: 0;}
              }
          </style>
      </head>
      <body>
          <div class="box"></div>
      </body>
      </html>

       

      (9) 로그인폼 만들어봐!

      <기본 화면>

      <미디어쿼리 화면>

      code ! 

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>Document</title>
          <link rel="preconnect" href="https://fonts.googleapis.com">
          <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         

          <style>
           body{
              margin: 0;
              border: 1px solid #000;
              font-family: 'Montserrat', sans-serif;
              font-size: 15px;
              line-height: 1.5em;
              background-color: #eee;
             
              display: flex;
              justify-content: center;
              align-items: center;
              height: 100vh;

           }

           .login-form{
              width: 600px;
              padding: 30px;
              border: 1px solid black;
              border-radius: 5px;
              background-color: #fff;
           }
           
          .login-form h2{
            font-weight: normal;
            text-transform: capitalize;
            font-size: 28px;
          }

          .sns-login{
            margin: 20px 0;
            /* border: 1px solid #000; */
            display: flex;
          }

          .btn{
            padding: 5px;
            border: none;
            font-size: 11px;
            color: #fff;
            border-radius: 3px;
            flex:1;
            margin-right: 3px;
          }
          .button-style1{
            background-color: #3b5999;

          }
          .button-style2{
           background-color: #55acee;
          }
          .button-style3{
           background-color: #dd4b39;
          }
          .field{
            /* border: 1px solid #000; */
            margin: 20px 0;/*20px는 상하 0은 좌우*/
            display: flex;
          }
          .field label{
            flex:1;
          }
          .field input{
            flex:4;
            border-radius: 3px;
            padding: 5px;
            border: 1px solid #ddd;
          }
          .btn-login{
            background-color: royalblue;
            border-radius: 3px;
            padding: 5px 40px;
            border: none;
            color: white;
            float: right;
          }

          @media(max-width: 768px) {
            .sns-login{
               flex-direction: column;
            }
            .btn{
               margin: 5px 0;
            }
            .field{
               flex-direction: column;
            }
            .btn-login{
               width: 100%;
            }
          }
         
         
          </style>
      </head>
      <body>
           <div class="login-form">
              <h2>Registeraion</h2>
              <div class="sns-login">
                  <button class="btn button-style1">Login in with Facebook</button>
                  <button class="btn button-style2">Login in with Twitter</button>
                  <button class="btn button-style3">Login in with Google</button>
              </div>

              <div class="field">
                  <label for="User name">User name</label>
                  <input type="text">
              </div>

              <div class="field">
                  <label for="E-mail">E-mail</label>
                  <input type="text">
              </div>

              <div class="field">
                  <label for="Password">Password</label>
                  <input type="text">
              </div>

              <div>
                  <button class="btn-login">Login</button>
              </div>
           </div>
         
      </body>
      </html>

      <10> 드롭다운 관련 hover 이용 

      <!DOCTYPE html>
      <html lang="ko">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
          <style>
              body{
                  color: #222;
                  line-height: 1.5em;
              }
              a{
                  color: #222;
                  text-decoration: none;
              }
              .dropdown{
                  border: 1px solid #000;
                  width: 200px;
                  display: inline-block;
              }
              .dropdown-btn{
                  width: 200px;
                  padding: 10px;
                  background-color: yellowgreen;
                  color: #fff;
                  font-size: 18px;
              }
              .dropdown-submenu{
                  border: 1px solid red;
                  display: none;
                  /* 밑에 있는 텍스트들이 없어져버림*/
              }
              .dropdown-submenu a{
                  width: 200px;
                  border: 1px solid #ddd;
                  display: block;
                    /*블럭 처리 해줘야 됨*/
                  text-align: center;
                   /* 인라인이니깐 text align 적용 가능*/
                  padding: 7px;
                  box-sizing: border-box;
              }
              .dropdown-btn:hover{
                  display: block;
              }
              .dropdown:hover .dropdown-submenu{  /*한칸 띄우는 자체가 부모 자식 관계를 의미함*/
                  display: block;
                   
              }

          </style>
      </head>
      <body>

          <div class="dropdown">
            <button class="dropdown-btn"> Real Estate Type</button>
            <div class="dropdown-submenu">
               <a href="#none">All</a>
               <a href="#none">One Room</a>
               <a href="#none">1.5 Rooms</a>
               <a href="#none">Two Rooms</a>
               <a href="#none">Three Room</a>
               <a href="#none">Officetel</a>
               <a href="#none">Apartment</a>
            </div>

          </div>
      </body>
      </html>
      저작자표시

      '국비 교육 내용 정리' 카테고리의 다른 글

      2023년 05월15일 수업 내용 정리  (0) 2023.05.15
      네이버 회원가입 바 만들어봐~  (2) 2023.05.12
      2023년 05월11일 수업 내용 정리  (0) 2023.05.11
      2023년 05월10일 수업 내용 정리(flex and java)  (0) 2023.05.10
      2023년 05월09일 수업 내용 정리  (0) 2023.05.09

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바