Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

bright jazz music

순수 화면구성 본문

web-front-dev/html + css + js

순수 화면구성

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>

'web-front-dev > html + css + js' 카테고리의 다른 글

CSS: grid layout  (0) 2023.07.30
CSS: 플렉스 박스 레이아웃  (0) 2023.07.29
Material UI 스타일의 textfield 만들기  (0) 2023.07.27
css  (0) 2023.07.25
순수 사이드바  (0) 2023.06.12
'web-front-dev/html + css + js' Related Articles more
Comments