레이아웃을 구성하는 css 박스모델 (2)

배치 방법을 결정하는 속성

- display : 블록 레벨 요소와 인라인 레벨 요소를 서로 바꿔서 사용할 수 있게 함. 네비 속성에서 메뉴 항목을 가로로 배치하거나 이미지를 표 형태로 배치할 수 있게 함

종류	설명
block	인라인 레벨 요소를 블록 레벨 요소로 만든다
inline	블록 레벨 요소를 인라인 레벨 요소로 만든다
inline-block	인라인 레벨 요소와 블록 레벨 요소의 속성을 모두 가지고 있으며 마진과 패딩을 지정할 수 있다,
none	해당 요소를 표시하지 않음

좌우 배치를 결정하는 속성

- float : 특정 요소를 왼쪽이나 오른쪽에 고정하는 속성. 이 때 요소를 배치한 후 다른 요소와 적당한 간격을 유지하고 싶다면 margin속성을 이용해 조절할 수 있다.

- clear : float속성을 이용하면 다음 요소에도 속성이 전달되기 때문에 더이상 float 속성을 유지하고 싶지 않을 때 사용

3단 레이아웃 만들기

css파일

* {
  margin:0;
  padding:0;
  box-sizing: border-box;
}
#container{
  width: 1200px;
  margin: 20px auto;
}
#header{
  width: 100%;
  height: 120px;
  background-color: #acacac;
}
#sidebar_left{
  width: 250px;
  height: 600px;
  background-color: #e9e9e9;
  float: left;
}

#contents{
  width: 800px;
  height: 600px;
  background-color: #f7f7f7;
  float: left;
} 
#sidebar_right{
  width: 150px;
  height: 600px;
  background-color: #e9e9e9;
  float: left;
}
#footer{
  width: 100%;
  height: 100%;
  background-color: #888888;
  clear: left;
}

html 코드

<!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="sidebar_left">
      <h2>사이드바1</h2>
    </aside>				
    <section id="contents">
      <h2>본문</h2>
    </section>
    <aside id="sidebar_right">
      <h2>사이드바2</h2>
  </aside>
    <footer id="footer">
      <h2>푸터</h2>
    <footer>
  </div>
</body>
</html>

저작자표시

'Front end > CSS' 카테고리의 다른 글

CSS 고급 선택자 (연결 선택자) (0)	2022.11.03
이미지와 그라데이션 효과로 배경 꾸미기 (2)	2022.10.02
레이아웃을 구성하는 css 박스모델 (1) (2)	2022.09.09
텍스트를 표현하는 다양한 스타일 (2) (0)	2022.09.01
텍스트를 표현하는 다양한 스타일 (1) (3)	2022.08.23