인프런 커뮤니티 질문&답변

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"%>