HTML #2

이 HTML 코드는 페이지의 헤더와 사이드바를 구성하는 코드입니다. 각 부분을 step by step으로 설명하겠습니다.

1. <header>

• 페이지의 헤더 부분을 정의합니다.

2. <button class="btn btn-text" id="sidebar-open-btn">

• class="btn btn-text": 버튼에 CSS 클래스를 적용하여 스타일링합니다.
• id="sidebar-open-btn": 버튼에 고유한 ID를 부여하여 JavaScript 등에서 접근할 수 있도록 합니다.
• 사이드바를 여는 버튼입니다.

3. <svg class="bi bi-list" ...>

• SVG 아이콘을 정의합니다. 이 아이콘은 리스트 모양을 나타냅니다.

4. <div class="container">

• class="container": 컨테이너 역할을 하는 div 요소입니다.

5. <aside class="sidebar">

• class="sidebar": 사이드바를 정의하는 div 요소입니다.

6. <button class="btn btn-text" id="sidebar-close-btn" aria-label="Sidebar Close Button">

• class="btn btn-text": 버튼에 CSS 클래스를 적용하여 스타일링합니다.
• id="sidebar-close-btn": 버튼에 고유한 ID를 부여하여 JavaScript 등에서 접근할 수 있도록 합니다.
• aria-label="Sidebar Close Button": 접근성을 위해 버튼의 역할을 설명합니다.
• 사이드바를 닫는 버튼입니다.

7. <svg class="bi bi-x" ...>

• SVG 아이콘을 정의합니다. 이 아이콘은 X 모양을 나타냅니다.

8. <s_sidebar>

• 사이드바의 전체 컨텐츠를 포함하는 커스텀 태그입니다.

9. <s_sidebar_element>

• 사이드바의 개별 요소를 정의하는 커스텀 태그입니다.

10. <section id="profile">

• id="profile": 섹션에 고유한 ID를 부여하여 접근할 수 있도록 합니다.
• 프로필 정보를 포함하는 섹션입니다.

11. <s_not_var_profile-image-hide>

• 프로필 이미지가 숨겨지지 않았을 때 표시되는 섹션입니다.

12. <div class="img-wrapper"><img src="https://tistory1.daumcdn.net/tistory/4615641/attach/bd1348c5894846518c9311272de8b03a" alt="profile"></div>

• class="img-wrapper": 이미지를 감싸는 div 요소입니다.
• 프로필 이미지를 포함하는 img 태그입니다.

13. <div class="info">

• 프로필 정보를 포함하는 div 요소입니다.

14. <s_not_var_profile-blogger-hide>

• 블로거 이름이 숨겨지지 않았을 때 표시되는 섹션입니다.

15. <div class="name">이든파이</div>

• 블로거 이름을 표시하는 div 요소입니다.

16. <s_not_var_profile-blog-desc-hide>

• 블로그 설명이 숨겨지지 않았을 때 표시되는 섹션입니다.

17. <div class="desc">독서는 배움 입니다. 배움은 삶의 즐거움 입니다. 삶의 즐거움을 함께 나누고 싶습니다. </div>

• 블로그 설명을 표시하는 div 요소입니다.

18. <section class="sidebar-item" id="category">

• class="sidebar-item": 사이드바 아이템을 정의하는 클래스입니다.
• id="category": 카테고리 섹션에 고유한 ID를 부여합니다.

19. <div class="sidebar-item-title">

• 사이드바 아이템의 제목을 포함하는 div 요소입니다.

20. <svg class="bi bi-text-left" ...>

• SVG 아이콘을 정의합니다. 이 아이콘은 텍스트 정렬을 나타냅니다.

21. <h3>카테고리</h3>

• 카테고리 섹션의 제목을 정의하는 h3 요소입니다.

22. <div class="body">

• 분류 전체보기 (161)
  • 2024 (37)
    • 2nd quarte.. (3)
    • [8] 자율주행 항.. (34)
  • 2023 (78)
    • 1st quarte.. (2)
    • 2nd quarte.. (6)
    • 4th quarte.. (7)
    • isaac sim (20)
    • 논문정리 (3)
    • 시사 (0)
    • 뉴스 (10)
    • HW (1)
    • pytorch (4)
    • 사소한데 궁금한 것 (20)

</div>

• 카테고리 목록을 포함하는 div 요소입니다.

23. <div class="sidebar-ad-container"></div>

• 사이드바 광고를 포함하는 div 요소입니다.

24. <section class="sidebar-item" id="notice">

• class="sidebar-item": 사이드바 아이템을 정의하는 클래스입니다.
• id="notice": 공지사항 섹션에 고유한 ID를 부여합니다.

25. <div class="sidebar-item-title">

• 사이드바 아이템의 제목을 포함하는 div 요소입니다.

26. <svg class="bi bi-bell" ...>

• SVG 아이콘을 정의합니다. 이 아이콘은 벨 모양을 나타냅니다.

요약

이 HTML 코드는 페이지의 헤더와 사이드바를 구성합니다. 헤더에는 사이드바를 여는 버튼이 포함되어 있으며, 사이드바에는 프로필, 카테고리, 광고, 공지사항 등 다양한 섹션이 포함되어 있습니다. 각 요소는 SVG 아이콘과 텍스트를 포함하여 사용자 인터페이스의 다양한 기능을 제공합니다. CSS 클래스를 사용하여 스타일링하고, 접근성을 위해 aria-label 속성을 사용합니다.