[css] CSS clear를 사용하여 네비게이션 메뉴 레이아웃을 디자인하는 방법은?

26 Dec 2023

아래는 clear를 사용하여 간단한 수평 네비게이션 메뉴를 디자인하는 예제입니다.

.nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav li {
  float: left;
  margin-right: 10px;
}

.nav li:last-child {
  margin-right: 0;
  clear: right;
}

이 예제에서는 float: left를 사용하여 각 메뉴 항목을 좌측으로 부유시키고, clear: right를 사용하여 다음 항목이 이전 항목의 오른쪽에 배치되지 않고 아래에 배치되도록 하였습니다.

CSS clear 속성을 사용하여 네비게이션 메뉴를 원하는 대로 디자인할 수 있습니다.