ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (57)CSS_2단 레이아웃
      HTML, CSS 2023. 4. 3. 17:13
      728x90
       

      (56)CSS_레이아웃 기본 문법

      다단 레이아웃 텍스트를 column 속성으로 다단을 생성 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 column-count: 단의 갯수를 설정 column-rule: 단과 단사이의 구분선, 구분의 모양,

      jm-rograming.tistory.com

      <!DOCTYPE html>
      <html lang="en">
      <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>2단 레이아웃</title>
          <link rel="stylesheet" href="CSS/layout1.css">
      </head>
      <body>
          <div id="container">
              <header id="header">
                  <h1>사이트제목</h1>
              </header>
              <div id="contents">
                  <h2>본문</h2>
                  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore suscipit qui unde amet, nisi debitis, molestiae assumenda corrupti in voluptate voluptas nam explicabo aperiam quas excepturi tenetur. Quod, necessitatibus animi.</p>
              </div>
              <div id="sidebar">
                  <h2>사이드바</h2>
                  <ul>
                      <li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Labore facere, rerum ullam consequuntur corrupti neque laboriosam excepturi, atque, reprehenderit quae dolorem magni recusandae architecto quidem. Voluptatem exercitationem optio tempore dolore.</li>
                  </ul>
              </div>
              <footer id="footer">
                  <h2>푸터</h2>
                  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, reiciendis! Recusandae ea fuga possimus magni, ut, amet quis tempore officiis nemo delectus reprehenderit provident architecto accusamus, minima ab doloribus voluptatum!
                  </p>
              </footer>

          </div>    
      </body>
      </html>

      • 외부 css 파일
      #container{

          width: 1000px;
          margin: 0 auto;
      }

      #header{
          padding: 20px;
          border: 1px solid gray;
          margin-bottom: 20px;

      }

      #contents{
          border: 1px solid gray;
          padding: 20px;
          width: 700px;
          float: left;
      }

      #sidebar{
          border: 1px solid gray;
          padding: 20px;
          background-color: gold;
          width: 200px;
          float: right;
          margin-bottom: 20px;
      }

      #footer{
          border: 1px solid gray;
          padding: 20px;
          clear: both;





      }

      'HTML, CSS' 카테고리의 다른 글

      (59)CSS_다단 레이아웃  (0) 2023.04.03
      (58)CSS_3단 레이아웃  (0) 2023.04.03
      (56)CSS_레이아웃 기본 문법  (0) 2023.04.03
      (55)CSS_clear  (0) 2023.04.03
      (54)CSS_float2  (0) 2023.04.03

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바