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

선생님 안녕하세요! 1.전체 layout.html에 이미지를 삽입하려고 합니다. 이미지 참조 루트는 MEDIA_ROOT = os.path.join(BASE_DIR, 'media')로 알고있는데 해당 경로는 유저가 업로드한 이미지만 저장한다고 알고있어서, 유저가 업로드한 이미지를 뿌리는게 아닌 이미지는 어느 경로에 지정하면 되나요?2. 만약 os.path.join(BASE_DIR, 'media')에 지정한다면 {% load media %}이렇게 html 맨 윗단에 호출하면 되나요? 항상 감사드립니다!

항상 고생하십니다. 다름이 아니고 이번에 z-index에 대해 궁금한 점이 생겼습니다. 1) z-index 속성은 position 선언 이후이에 사용이 가능한 속성인지 궁금합니다. 2)예제에서 modal-gnb에 가려진 컨텐츠들을 올리기 위해 z-index속성을 ".trigger"에 주었습니다.  제 생각은 z-index를 active클래스에 주지 않고 .trigger에 주었으니 active가 없어도 .modal-gnb보다 .trigger가 밑에 있으면 안된다고 생각합니다. 하지만 active를 추가 하지 않은 .trigger는 z-index속성이 100임에도 불구하고 modal-gnb에 가려지게 되는데 이러한 이유가 궁금합니다. 항상 감사합니다. 연말 잘 마무리 하셨으면 좋겠습니다.  

크롤링 웹기본 - 크롤링을 위한 지식: 웹구조와 HTML 이해하기3 3분 40초   코드는 이렇게 썻는데 이미지는 엑박만 뜹니다 ㅠ   그리고 다른 강의 수업자료(아래) 주피터노트북으로  열때도 이미지가 엑박으로 보이던 부분이있었습니다. 연관이 있을거 같은데 이미지를 이미지로 못받는거같은데 해결방법이 있을까요?

일부분만 발췌해서 가져왔습니다.  2명의 클라이언트가 접속했을 때 index.js에서 접속자 수를 받아오고, html 내 script에서 카운트 실행 코드를 작성했는데  2명 이상이 접속해야 카운트가 실행되는 코드는 어떻게 작성해야 하는지 모르겠네요. 어떤 방법이 있을까요 ??   //index.js io.sockets.on("connection",(socket)=>{     const req=socket.request;     const ip=req.headers['x-forwarded-for']||req.connection.remoteAddress;     console.log("새로운 클라이언트 접속",ip,socket.id, req.ip);     user_count++;     io.emit('users.count',user_count);   //client.html         <script>             let socket=io();                         socket.on('users.count', function(number) {                 document.getElementById('users-count').innerHTML=number;                 let user_count = document.getElementById('users-count').value;                 if(number==2){                     var count=10;                     var counter=setInterval(function(){                         if(count<=0){                             clearInterval(counter);                             document.getElementById("timer").innerHTML="Finished";                         } else {                             document.getElementById("timer").innerHTML=count+"초 남았습니다";                         }                         count-=1;                     },1000);                 }             });         </script>  

안녕하세요. 제로초님  제로초님 하고 같이 진행한 미니 프로젝트들 더 예쁘게 만들어보고 싶어서 html하고 CSS을 추가 작업하고 있는데요. 현재 이런 틀을 만들려고 합니다. 그리고 다 완성도 했는데... 작업 도중에 이해가 안 되는 부분 2가지가 발생해서 질문드립니다.   질문 코드 링크입니다. => https://codepen.io/uscgil0127/pen/bGobxxq 해당 코드를 확인해보시면,  CSS 부분에 Q1. max-height를 설정해줬는데, 왜 내부의 박스들이 overflow해도 height가 max 값만큼 늘어나지 않나요?? => 제 생각에는 내부 박스들이 외부 박스를 삐져나오면, max-height가 발동해서 늘어날 수 있는만큼 늘어날 거라고 생각했는데, 늘어나지를 않네요;;;;;;  max 값만큼 height가 늘어나지 않으면, max-height의 유용성을 잘 모르겠습니다... --------------------------- Q2. CSS 부분에서 .h20 .h40 .h80 에서 flex: 4 0 40%; 를 적용해주면 margin 값인 0.5rem이 포함되서, container 박스를 overflow한 것같은데,  왜 그냥 height: 20%를 설정해줬을 때는 박스를 overflow하지 않는 걸까요?? ---------------------------- 어떻게든 구글링해서 이해해보려고 했는데, 도저히 이해가 안되서 부득이하게 질문드립니다. 감사합니다.

.text-layout { color: #333 } .text-layout:hover { color: #666; background: #eee } .text-layout:active { color: #555; background: #ddd } .text-layout:focus { color: #333; background: #aaa }   .col-left { width: 30% } .col-right { width: 70% }   한줄코딩을 자제하는 게 좋은 건 알고 있는데 이렇게 비슷한 스타일이나 속성이 하나만 들어가는 스타일을 한줄로 작성하는 것도 권장되지 않는 방식인가요?   하나하나 엔터치기엔 너무 어지러워지는 것 같고... 또 저런 것만 붙여놓자니 일관성이 없어보이네요ㅜㅜ

  위의 사진과 같이 2000px 혹은 그 이상의 넓은 화면에서 보면 양 옆에 보기 싫게 흰 너비가 생기게 됩니다. 이걸 어떻게 하면 없앨 수 있을까요? 아예 동영상을 렌더링 할 시 넓게 해봤더니 여전히 안되더군요. 

- 본 강의 영상 학습 관련 문의에 대해 답변을 드립니다. (어떤 챕터 몇분 몇초를 꼭 기재부탁드립니다)- 이외의 문의등은 평생강의이므로 양해를 부탁드립니다- 현업과 병행하는 관계로 주말/휴가 제외 최대한 3일내로 답변을 드리려 노력하고 있습니다- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.     섹션1 HTML5 HTML 주요 태그이해와 정리 2 부분 8분 경에   <input type="text" name="pw" autofocus /> <input type="text" name="pw" autocomplete="off" />   가 나오는데 서로 다른 두 개체에 대하여 변수명이 pw로 동일하여도 상관없나요?

16강에서 소개해주시는 판다스 롤링 및 익스팬딩관련 웹사이트가 지금 바뀐것 같은데   https://pandas.pydata.org/pandas-docs/stable/user_guide/window.html#rolling-window     여기에서 찾으면 되는 거 맞나요??

<img>를 통해서 사진을 삽입해 보았는데요 제 눈으로 봤을 때는 atom상에서는 별 차이가 없는 거 같은데 사진자료처럼 사진이 document라는 단어 아래에 표시되지 않고 그 옆으로 삽입이 돼서 붕 뜨게되네요. 이유를 알려주실 수 있나요?

안녕하세요! spring 입문 동영상을 시청 중인 학생입니다.  /hello-template.html <html xmlns:th="http://www.thymeleaf.org"> <body> <p th:text="'hello ' +${name}">hello! empty</p> </body> </html> 위 파일에서 p 태그 안에 굳이 hello! empty를 넣어주는 이유는 뭔가요? hello! empty 부분을 지워도 잘 작동하더라구요... 개발자 입장에서 해석하기 위한 용도인가요?  별건 아니지만 해당 text를 추가한 이유가 궁금합니다.

문제 사진 버튼 이런 구성으로 만들고 싶은데 어떻게 하는지 궁금합니다. 질문과 버튼의 글씨가 바뀌는 것처럼 사진도 질문마다 바뀌고 페이드인/아웃 효과도 주고 싶습니다.

vscode 코드를 작성하고 라이브 서버로 실행 시키면 사진처럼 나오는데 뭐가 문제인건가요 ?

안녕하세요 따라서 만들고 있는데 이렇게 옆에 남는 부분이 생깁니다 ㅠㅠ html이라고 뜨면서 width를 100%로 채우고 최소 width를 저 html이상으로 높여봐도 오른쪽은 채워지는데 왼쪽과 위가 안채워집니다ㅠㅠ 어떠케 해야 없어질까요?

django 공부 중인 학생입니다. 웹사이트 로그인 예제를 다음과 같이 다른 디자인으로 바꾸고 싶은데 어려움을 느껴 질문 올립니다.         <div class="form-group row">             {{ form.username|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}             <div class="col-sm-5">                 {{ form.username|add_class:"form-control"|attr:"autofocus" }}             </div>         </div>         <div class="form-group row">             {{ form.password|add_label_class:"col-form-label col-sm-2 ml-3 font-weight-bold" }}             <div class="col-sm-5">                 {{ form.password|add_class:"form-control" }}             </div>         </div>         <!-- Email -->         <input type="text" id="defaultLoginFormEmail" class="form-control mb-4" placeholder="E-mail">         <!-- Password -->         <input type="password" id="defaultLoginFormPassword" class="form-control mb-4" placeholder="Password"> 위에 디자인을 아래 디자인으로 바꾸고 싶습니다. widget_tweaks 사용하고 있습니다. 감사합니다.

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

검은색 줄이 쳐져 있는 모습을 보면 알 수 있듯이 공유하기 버튼과 훈련하기 go go 버튼의 높이가 차이가 납니다. 제 오류인가 싶어 fianl 코드로 실행을 해보아도 똑같았습니다. <div class=share> 부분에만 따로 덜 넣거나 더 넣은 것도 아니고 같은 buttons 의 css를 따르고 다른 것은 배경화면의 색과 왼쪽의 마진을 넣은 것 뿐입니다. 제 컴퓨터의 에러로 이런 것인가요? 아니면 따로 해결방법이 있을까요?

먼저 훌륭한 강의를 공급해주셔서 감사합니다. 강의자 영상에서는 Template 코드 작성 시 HTML 인라인 스타일을 작성할 때 CSS 스타일 제안 및 자동완성이 지원되는 모습을 볼 수 있는데 제 개발환경(PyCharm Comm.)에서는 Suggestion이 발생하지 않습니다. 해당 옵션을 어떻게 활성화하는지 문의드립니다.

다이나믹 웹 프로젝트를 생성하고 생기는 폴더중 Javascript Resources 폴더만 만들어지지 않습니다.  해결방안이 없을까요?