이 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">
</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
속성을 사용합니다.
'2023 > 4th quarter' 카테고리의 다른 글
HTML #1 (0) | 2024.05.28 |
---|---|
신경 끄기의 기술 (0) | 2023.12.11 |
글 분석 #1 (0) | 2023.11.09 |
자신감 쌓기 연습 (0) | 2023.11.04 |
18시간 몰입의 법칙 (0) | 2023.10.22 |