HTML 요소

1. <link rel="stylesheet" href="css/nav.css">: CSS 스타일시트를 연결합니다.
2. <script src="js/nav.js"></script>: JavaScript 파일을 연결합니다.
3. <nav>: 네비게이션 메뉴를 정의하는 요소로, 주로 메뉴 항목들이 포함됩니다.

CSS 속성

폰트 및 텍스트 스타일링

• font-family: 텍스트의 글꼴을 지정합니다.
• font-size: 텍스트의 글꼴 크기를 설정합니다.
• color: 텍스트의 색상을 지정합니다.
• text-align: 텍스트의 수평 정렬을 설정합니다.

요소 크기 및 레이아웃

• width: 요소의 너비를 설정합니다.
• min-height: 요소의 최소 높이를 설정합니다.
• max-width: 요소의 최대 너비를 지정합니다.
• height: 요소의 높이를 설정합니다.

여백과 패딩

• margin: 요소의 마진(외부 여백)을 설정합니다.
• padding: 요소의 패딩(내부 여백)을 설정합니다.

배경 및 그림자

• background-color: 요소의 배경 색상을 지정합니다.
• box-shadow: 요소에 그림자 효과를 추가합니다.

플렉스 및 정렬

• display: 요소의 표시 방법을 설정합니다.
• flex-direction: 플렉스 컨테이너 내의 아이템들의 배치 방향을 설정합니다.

JavaScript 함수

변수.onclick

• 변수 아이콘을 클릭했을 때 실행되는 함수입니다.

변수.classList.toggle("아이콘 이름")

• 변수 아이콘의 클래스를 토글하여 아이콘 모양을 변경합니다.

sidebarElements.forEach(element => { element.classList.toggle("클래스 이름"); });

• sidebarElements 배열에 있는 모든 요소의 클래스를 토글하여 클래스를 추가하거나 제거합니다