나만의 개발노트

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

[실습]/[실습] 프론트엔드

[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

 

'[실습] > [실습] 프론트엔드' 카테고리의 다른 글

[JS프로젝트] 7. QnA 게시판 만들기  (0) 2023.05.17
[JS프로젝트] 4. Navbar 만들기  (0) 2023.05.12
[JS프로젝트] 2. 버튼으로 숫자 카운트  (0) 2023.05.03
[JS프로젝트] 1. 배경색상 랜덤하게 만들기 _ 230419(수)  (0) 2023.04.19
'[실습]/[실습] 프론트엔드' Related Articles more