[css] CSS clear를 사용하여 삼단 레이아웃을 만드는 방법은?

26 Dec 2023

웹 개발에서 삼단 레이아웃은 일반적인 디자인 패턴 중 하나입니다. CSS의 clear 속성을 활용하여 효율적으로 삼단 레이아웃을 만들어볼 것입니다.

1. HTML 구조 설정

가장 먼저 HTML을 사용하여 삼단 레이아웃의 기본 구조를 설정합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>삼단 레이아웃</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>헤더 영역</header>
  <nav>내비게이션 영역</nav>
  <main>본문 영역</main>
  <aside>사이드바 영역</aside>
  <footer>푸터 영역</footer>
</body>
</html>

2. CSS 속성 적용

nav {
  float: left;
  width: 200px;
}

aside {
  float: right;
  width: 200px;
}

main {
  margin-right: 210px;
  margin-left: 210px;
}

header, nav, main, aside, footer {
  padding: 20px;
  margin: 10px;
  background-color: #f2f2f2;
}

위의 코드에서 float 속성을 사용하여 nav와 aside 요소를 좌우에 띄우고, margin 속성을 사용하여 main 영역과 header, footer 사이의 여백을 조절할 수 있습니다. 마지막으로, clear 속성을 사용하여 레이아웃이 이상적으로 표시되도록 만들 수 있습니다.

nav, aside {
  height: 300px;
}

nav:after, aside:after {
  content: "";
  display: block;
  clear: both;
}

nav와 aside에 clear를 적용하여 부유(Floating) 요소로 인해 발생하는 높이의 비정상한 증가를 방지하고 원하는 레이아웃을 만들 수 있습니다.

결론

clear 속성을 사용하면 삼단 레이아웃을 효과적으로 만들 수 있습니다. 이를 통해 각 영역을 명확하게 구분하고 원하는 디자인을 쉽게 구현할 수 있습니다.

1. HTML 구조 설정

2. CSS 속성 적용

결론

참고 자료