강사님 강의를 들으면서 의문이 들었는데 강사님 버튼 부분으로 되어있는 것들을 div태그로 전부다 만드시던데 혹시 이유가 따로 있을까요???북마크를 추가하는 부분이나 취소, 추가 부분은 button태그를 사용하거나 북마크를 입력하는 div태그 전체를 form태그로 묶어서 사용하는게 좀 더 좋지 않을까요??강사님이 div 태그만 사용하시던데 혹시 이유가 따로 있으신건가요??

hl-aria-live-container 가 무엇인가요??모든 div에 css를 적용 해서 그런것 같은데 선생님이 강의 진행 하실때는 왜 안나타난 걸까요?? 

영상 ~5:48 시청중 질문 드립니다. <section> <div class="login"> <div class="login-type"> </div> <div class="login-footer"> </div> </div> </section> <section>안에 .login 안의 .login-type과 .login-footer로 div태그가 사용이 되었는데요. .login없이 바로 <section>안에 .login-type과 .login-footer을 사용하면 무슨 차이가 있나요?  

a태그 안에 있는 div에 계속 노란줄이 그어지는데, a태그 안에 div태그가 들어가지 못하나요?   아래 코드 어떻게 수정해야 하는지 답변 부탁드릴께요. 아니면 수정 필요 없이 이렇게 진행해도 문제 없을까요? 아래에 노란색으로 오류나는 부분 표시해 두었습니다.   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ include file="common/header.jsp"%>                          <div class = "container"> <nav class="sb-sidenav accordion sb-sidenav-light"             id="sidenavAccordion">              <div class="sb-sidenav-menu">                <div class="nav">                              <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse01" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-book-open"></i>                      </div> 개발·프로그래밍 <!-- sb-nav-link-icon -->                                       </a> <!-- nav-link collapsed -->                                  <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse02" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 웹 개발                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a> <!-- nav-link collapsed -->                   <div class="collapse" id="collapse02"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">HTML/CSS</a> <a class="nav-link"                            href="#!">Front-End</a> <a class="nav-link" href="#!">JavaScript</a>                         <a class="nav-link" href="#!">웹 개발</a>                         <a class="nav-link" href="#!">Back-End</a>                         <a class="nav-link" href="#!">웹 퍼블리싱</a>                         <a class="nav-link" href="#!">Node.js</a>                         <a class="nav-link" href="#!">React</a>                         <a class="nav-link" href="#!">Java</a>                         <a class="nav-link" href="#!">Vue.js</a>                         <a class="nav-link" href="#!">Spring</a>                         <a class="nav-link" href="#!">Python</a>                                                                                           </nav>                   </div>                                      <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse03" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 프론트엔드                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse03"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">Front-End</a> <a class="nav-link"                            href="#!">JavaScript</a> <a class="nav-link" href="#!">HTML/CSS</a>                         <a class="nav-link" href="#!">웹 개발</a>                          <a class="nav-link" href="#!">Vue.js</a> <a class="nav-link" href="#!">React</a> <a class="nav-link" href="#!">웹 퍼블리싱</a> <a class="nav-link" href="#!">jQuery</a> <a class="nav-link" href="#!">인터랙티브 웹</a> <a class="nav-link" href="#!">웹앱</a> <a class="nav-link" href="#!">ES6</a> <a class="nav-link" href="#!">Angular</a>                        </nav>                   </div>                    <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse04" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 백엔드                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse04"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">Back-End</a> <a class="nav-link"                            href="#!">Java</a> <a class="nav-link" href="#!">Spring</a>                         <a class="nav-link" href="#!">Node.js</a>                           <a class="nav-link" href="#!">Vue.js</a>    <a class="nav-link" href="#!">Spring Boot</a>     <a class="nav-link" href="#!">MVC</a> <a class="nav-link" href="#!">JPA</a>   <a class="nav-link" href="#!">Docker</a>    <a class="nav-link" href="#!">REST API</a>     <a class="nav-link" href="#!">DevOps</a> <a class="nav-link" href="#!">AWS</a> <a class="nav-link" href="#!">Python</a>                      </nav>                   </div>                                        <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse05" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 풀스택                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse05"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">Django</a> <a class="nav-link"                            href="#!">Node.js</a> <a class="nav-link" href="#!">React</a>                         <a class="nav-link" href="#!">Full-Stack</a>                           <a class="nav-link" href="#!">웹 개발</a>    <a class="nav-link" href="#!">Python</a>     <a class="nav-link" href="#!">MongoDB</a> <a class="nav-link" href="#!">HTML/CSS</a>   <a class="nav-link" href="#!">Express</a>    <a class="nav-link" href="#!">Firebase</a>     <a class="nav-link" href="#!">JavaScript</a> <a class="nav-link" href="#!">Back-End</a>                      </nav>                   </div>                                       <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse06" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 모바일 앱 개발                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse06"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">모바일 앱 개발</a> <a class="nav-link"                            href="#!">Android</a> <a class="nav-link" href="#!">iOS</a>                         <a class="nav-link" href="#!">Swift</a>                           <a class="nav-link" href="#!">Kotlin</a>                            <a class="nav-link" href="#!">Firebase</a>    <a class="nav-link" href="#!">Flutter</a>    <a class="nav-link" href="#!">Java</a>    <a class="nav-link" href="#!">IONIC</a>    <a class="nav-link" href="#!">React Native</a>    <a class="nav-link" href="#!">게임개발</a>     <a class="nav-link" href="#!">웹앱</a>                      </nav>                     </div>                                       <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse07" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 프로그래밍 언어                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse07"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">모바일 앱 개발</a> <a class="nav-link"                            href="#!">Python</a>                             <a class="nav-link" href="#!">JavaScript</a>    <a class="nav-link" href="#!">Java</a>    <a class="nav-link" href="#!">알고리즘</a>    <a class="nav-link" href="#!">데이터 분석</a>    <a class="nav-link" href="#!">Swift</a>    <a class="nav-link" href="#!">C</a>    <a class="nav-link" href="#!">코딩테스트</a>    <a class="nav-link" href="#!">C#</a>    <a class="nav-link" href="#!">C++</a>    <a class="nav-link" href="#!">ES6</a>     <a class="nav-link" href="#!">Front-End</a>                                                     </nav>                   </div>                                       <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse08" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 알고리즘·자료구조                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse08"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">알고리즘</a> <a class="nav-link"                            href="#!">코딩테스트</a>                             <a class="nav-link" href="#!">자료구조</a>                            <a class="nav-link" href="#!">Java</a>     <a class="nav-link" href="#!">Python</a> <a class="nav-link" href="#!">취업</a>   <a class="nav-link" href="#!">객체지향</a>    <a class="nav-link" href="#!">C</a>     <a class="nav-link" href="#!">C++</a> <a class="nav-link" href="#!">JavaScript</a>   <a class="nav-link" href="#!">Scratch</a>    <a class="nav-link" href="#!">게임개발</a>                                                     </nav>                   </div>                                       <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse09" aria-expanded="false"                      aria-controls="collapseLayouts">                                            <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 데이터 사이언스                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                                       </a>                   <div class="collapse" id="collapse09"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">데이터 분석</a>     <a class="nav-link" href="#!">데이터 분석</a>     <a class="nav-link" href="#!">머신러닝</a>     <a class="nav-link" href="#!">딥러닝</a>     <a class="nav-link" href="#!">Python</a>     <a class="nav-link" href="#!">인공지능</a>     <a class="nav-link" href="#!">Tensorflow</a>     <a class="nav-link" href="#!">데이터 과학</a>     <a class="nav-link" href="#!">Pandas</a>     <a class="nav-link" href="#!">Keras</a>     <a class="nav-link" href="#!">인공신경망</a>     <a class="nav-link" href="#!">데이터 시각화</a>                             <a class="nav-link" href="#!">SQL</a>                                                  </nav>                   </div>      <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse10" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 데이터베이스                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse10"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">SQL</a>     <a class="nav-link" href="#!">데이터베이스</a>     <a class="nav-link" href="#!">데이터 분석</a>     <a class="nav-link" href="#!">MySQL</a>     <a class="nav-link" href="#!">DBMS/RDBMS</a>     <a class="nav-link" href="#!">MSSQL</a>     <a class="nav-link" href="#!">Back-End</a>     <a class="nav-link" href="#!">Oracle</a>     <a class="nav-link" href="#!">Notion</a>     <a class="nav-link" href="#!">Python</a>     <a class="nav-link" href="#!">MongoDB</a>     <a class="nav-link" href="#!">Java</a>                                                                            </nav>                   </div>       <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse11" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 개발도구                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse11"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">Git</a>     <a class="nav-link" href="#!">버전관리시스템</a>     <a class="nav-link" href="#!">Github</a>     <a class="nav-link" href="#!">Java</a>     <a class="nav-link" href="#!">Jetbrains</a>     <a class="nav-link" href="#!">웹 개발</a>     <a class="nav-link" href="#!">IntelliJ IDEA</a>     <a class="nav-link" href="#!">웹 퍼블리싱</a>     <a class="nav-link" href="#!">Python</a>     <a class="nav-link" href="#!">ATOM</a>     <a class="nav-link" href="#!">웹 디자인</a>                                                                            </nav>                   </div>      <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse12" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 데브옵스·인프라                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse12"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">AWS</a>     <a class="nav-link" href="#!">클라우드</a>     <a class="nav-link" href="#!">DevOps</a>     <a class="nav-link" href="#!">Docker</a>     <a class="nav-link" href="#!">Back-End</a>     <a class="nav-link" href="#!">Linux</a>     <a class="nav-link" href="#!">Kubernetes</a>     <a class="nav-link" href="#!">네트워크</a>     <a class="nav-link" href="#!">Azure</a>     <a class="nav-link" href="#!">서버리스</a>     <a class="nav-link" href="#!">Ansible</a>      <a class="nav-link" href="#!">정보보안</a>                                                                            </nav>                   </div>        <a class="nav-link collapsed" href="#" data-bs-toggle="collapse"                      data-bs-target="#collapse13" aria-expanded="false"                      aria-controls="collapseLayouts">                      <div class="sb-nav-link-icon">                         <i class="fas fa-columns"></i>                      </div> 게임 개발                      <div class="sb-sidenav-collapse-arrow">                         <i class="fas fa-angle-down"></i>                      </div>                   </a>                   <div class="collapse" id="collapse13"                      aria-labelledby="headingOne" data-bs-parent="#sidenavAccordion">                      <nav class="sb-sidenav-menu-nested nav">                         <a class="nav-link" href="#!"><strong>ALL</strong></a> <a                            class="nav-link" href="#!">게임 개발</a>     <a class="nav-link" href="#!">Unity</a>     <a class="nav-link" href="#!">C#</a>     <a class="nav-link" href="#!">Unreal Engine</a>     <a class="nav-link" href="#!">iOS</a>     <a class="nav-link" href="#!">C++</a>     <a class="nav-link" href="#!">Swift</a>     <a class="nav-link" href="#!">UE Blueprints</a>     <a class="nav-link" href="#!">게임기획</a>     <a class="nav-link" href="#!">블록코딩</a>     <a class="nav-link" href="#!">Scratch</a>      <a class="nav-link" href="#!">GUI</a>                                                                            </nav>                   </div>                                                              </div> <!-- nav -->           </div> <!-- sb-sidenav-menu -->      </nav> <!-- "sb-sidenav accordion sb-sidenav-light  -->                          </div> <!-- 컨테이너  -->   <%@ include file="common/footer.jsp"%>    

안녕하세요. 궁금한 것이 div태그에 대한 별다른 언급을 안하시는 이유가 있나요? 뭔가 div, span 이런 태그가 꽤 자주 쓰이는 걸로 알고 있었는데 span태그는 별도의 pdf자료에 언급이 되어있는데, div는 없어서 궁금해서 질문 드립니다

<div >           <a href="www.naver.com">           <Icon as={IoLogoSnapchat} />           Chatbot           </a> </div> 위 코드는 chatbot 글 혹은 icon을 클릭하면 기존 페이지에서 네이버 화면을 여는 코드 입니다. 제가 구현 하고 싶은 것은 기존 페이지 위에 작게 네이버 화면을 여는 것인데 어떻게 해야 할까요?