[JS프로젝트] 5. Sidebar 만들기

노트포미 2023. 5. 15. 16:27

[나의 코드]

- index.html

...
<body>
	...
    <div class="sidebar">
    	<!-- sidebar-header -->
        ...
        <!-- links -->
        ...
        <!-- social media -->        
        ...
    </div>
    ...
</body>

[더 나은 코드]

- index.html

...
<body>
	...
    <aside class="sidebar">
    	<!-- sidebar-header -->
        ...
        <!-- links -->
        ...
        <!-- social media -->        
        ...
    </aside>
    ...
</body>
...

-> sidebar 클래스를 div 가 아닌 aside로 사용함

- aside태그

: 별도 구획 요소 - 문서의 주요 내용과 간접적으로만 연관된 부분. 주로 사이드바 혹은 콜아웃 박스를 표현한다.

전체 코드 보기

https://github.com/mokjakA/std_JS

GitHub - mokjakA/std_JS

Contribute to mokjakA/std_JS development by creating an account on GitHub.

github.com

프로젝트 참고

https://www.freecodecamp.org/news/javascript-projects-for-beginners/#how-to-create-a-review-carousel