[css] CSS clear를 사용하여 세로 메뉴 바를 만드는 방법은?

26 Dec 2023

우선 HTML 코드는 다음과 같이 작성할 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="menu">
    <div class="menu-item">메뉴 항목 1</div>
    <div class="menu-item">메뉴 항목 2</div>
    <div class="menu-item">메뉴 항목 3</div>
  </div>
</body>
</html>

다음으로는 CSS 코드를 작성할 차례입니다.

.menu {
  width: 200px;
}

.menu-item {
  clear: both;
  padding: 10px;
  background-color: #f2f2f2;
  margin-bottom: 5px;
}

이 예제에서는 .menu 클래스가 세로 메뉴 바를 담당합니다. .menu-item 클래스는 각 메뉴 항목을 정의합니다. clear: both; 속성을 사용하여 각 항목이 다음 줄로 이동하도록 만듭니다.

이렇게하면 각 항목이 세로적으로 배열된 메뉴 바를 만들 수 있습니다. 코드를 실행하여 결과를 확인해 보세요!

참고로 작성된 코드는 예시일 뿐이며, 사용하시는 웹사이트나 레이아웃에 따라 스타일을 조정해야 할 수 있습니다.