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

26 Dec 2023

CSS의 clear 속성은 레이아웃을 설정할 때 특히 유용합니다. 탭 레이아웃을 만들 때 clear를 사용하여 요소들을 올바르게 배치할 수 있습니다.

탭 레이아웃 구조

<div class="tab-container">
  <div class="tab-content active">Tab 1 Content</div>
  <div class="tab-content">Tab 2 Content</div>
  <div class="tab-content">Tab 3 Content</div>
</div>

CSS 스타일링

.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}

Clear 속성 사용

.tab-content {
  clear: both;
}

이러한 방식으로 clear 속성을 사용하여 각 탭 요소가 올바르게 배치되도록 할 수 있습니다.

더 많은 정보는 MDN web docs에서 확인할 수 있습니다.