순수 화면구성

bright jazz music 2023. 6. 12. 16:42

* {
  margin: 0; /* 브라우저 기본 마진 리셋 */
  padding: 0; /* 브라우저 기본 패딩 리셋 */
  box-sizing: border-box; /* 테두리까지 포함해서 박스 모델 너비로 계산 */
}
#container {
  width: 100%; /* 내용 전체의 너비 */
  margin: 20px auto; /*내용을 화면 가운데 배치하도록 좌우 마진을 auto로 */
  /* 추가 */
}
#header {
  width: 85%; /* 부모 요소의 너비와 똑같게 */
  height: 120px; /* 헤더의 높이 */
  background-color: #acacac;
  float: right;
}
#lefsidebar {
  /* width: 300px; 사이드바의 너비 */
  width: 15%;
  height: 820px; /* 사이드바의 높이 */
  background-color: navy;
  float: left; /* 왼쪽으로 플로팅 */
}

#contents {
  /* width: 900px; 본문의 너비 */
  width: 85%;
  height: 600px; /* 본문의 높이 */
  background-color: grey;
  float: left; /* 왼쪽으로 플로팅 */
}
#footer {
  width: 85%; /* 부모 요소의 너비와 똑같게  */
  height: 100px; /* 푸터의 높이 */
  background-color: #888888;
  /* clear: left; 플로팅 해제 */
  float: right;
}

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>CSS 레이아웃 -2단 레이아웃</title>
    <link rel="stylesheet" href="../css/2column.css" />
  </head>
  <body>
    <div id="container">
      <header id="header">
        <h1>사이트 제목</h1>
      </header>
      <aside id="lefsidebar">
        사이드바
        <div>asdfasdf</div>
        <div>sdfds</div>
      </aside>
      <section id="contents">
        <h2>본문</h2>
      </section>
      <footer id="footer">
        <h2>푸터</h2>
      </footer>
    </div>
  </body>
</html>