ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • css 배경, 박스
      WEB 2021. 12. 31. 16:21
      1.
      <style>
      body{
      height: 3000px;
      }
       
      .box{
      width: 90%;
      height: 200px;
      margin: 200px auto 0;
      overflow: auto;
       
      background-image: url('./images/sky.jpg');
      background-size: 300px 200px;
      background-repeat: no-repeat;
      background-attachment: local;
      }
      </style>
      </head>
      <body>
      <div class="box">
      <p>
      ~Lorem 생략~
      </p>
      </div>
      </body>

      스크롤도 나오고~ 구름도 나온다.

       

      2.

      <style>
      .picture{
      width: 200px;
      height: 150px;
      background: red;
      float: left;
      margin-right: 15px;
      }
      </style>
      </head>
      <body>
      <div class="picture"></div>
      <p>
      Lorem 생략
      </p>
      </body>

       

      3.

      <style>
      .box{
      width: 150px;
      height: 100px;
      background: red;
      font-size: 30px;
      color: #fff;
      margin: 10px;
      float: left;
      }
      .new-box {
      width: 200px;
      height: 150px;
      background: orange;
      clear: both;
      }
      </style>
      </head>
      <body>
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="new-box">4</div>
      </body>

      4 박스에 class명을 new-box로 달아주고 style 태그 안에서 clear both를 해 주면 줄바꿈이 실행됩니다.

      4.

      <style>
      .container{
      width: 700px;
      padding: 20px;
      border: 3px solid red;
      }
      .box{
      width: 200px;
      height: 150px;
      border: 3px solid green;
      background: yellow;
      font-size: 50px;
      float: left;
      }
       
      .clear-box{
      clear: both;
      }
       
      .clearfix::after{
      content: '';
      display: block;
      clear: both;
      }
      </style>
      </head>
      <body>
      <div class="container clearfix">
      <div class="box">1</div>
      <div class="box">2</div>
      <!--<div class="clear-box"></div>-->
      </div>
      <div class="container clearfix">
      <div class="box">1</div>
      <div class="box">2</div>
      </div>
      <div class="container clearfix">
      <div class="box">1</div>
      <div class="box">2</div>
      </div>
       
      </body>
      각 box들에는 float: left 를 하여 왼쪽으로 붙게 하고,
      한 줄씩 두 박스가 정렬되게 하기 위해서 clear:both를 붙인다.
       
      5. 종합 연습!
       
      <style>
      h1 {
      font-size: 36px;
      font-weight: bold;
      margin: 20px;
      text-align: center;
      }
      h2{
      font-size: 24px;
      font-weight: bold;
      text-align: center;
      padding: 10px;
      }
      p{
      font-size: 14px;
      line-height: 1.4;
      padding: 10px;
      }
      .container{
      border: 3px solid orange;
      width: 800px;
      margin: 0 auto;
      }
      header{
      border: 3px solid yellow;
      }
      nav{
      border: 3px solid purple;
      width: 150px;
      height: 200px;
      float: left;
      }
      section{
      border: 3px solid green;
      margin-left: 155px;
      }
       
      footer{
      border: 3px solid blue;
      }
      .clearfix::after{
      content: '';
      display: block;
      clear: both;
      }
      </style>
      </head>
      <body>
      <h1>float 속성을 이용한 레이아웃</h1>
      <div class="container clearfix">
      <header>
      <h2>header 영역</h2>
      </header>
      <div class="main-content clearfix">
      <nav>
      <h2>nav 영역</h2>
      </nav>
      <section>
      <h2>section 영역</h2>
      <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas sed,
      ratione pariatur voluptatibus tempora nesciunt possimus perferendis
      voluptatum rem labore porro quo, repellendus odit enim delectus eos
      reprehenderit minus dolor! Lorem ipsum dolor, sit amet consectetur
      adipisicing elit. Aliquam repellat maxime possimus sed dolorem
      assumenda vitae ad placeat laborum id adipisci blanditiis quis,
      accusantium excepturi eligendi sapiente! Dolor, tenetur nisi.
      </p>
      </section>
      </div>
      <footer>
      <h2>footer 영역</h2>
      </footer>
      </div>
      </body>
      </html>
       
       

      'WEB' 카테고리의 다른 글

      css position & 실습  (0) 2022.01.04
      css position  (0) 2022.01.04
      11/22 html 중간 과제물 제출  (0) 2021.11.23
      11/16-17 html 기초 수업  (0) 2021.11.18
      11/15 html 첫 날  (0) 2021.11.15

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바