220404

🎃KEEP

• CSS 부수기
  

상위 div에 row를 적용하고 하위 div들에 col-3을 적용했는데, 위 이미지처럼 div끼리 다닥다닥 붙어 있었다. 간격을 만드려고 margin을 적용하면 끝에 있는 div가 다음 줄로 넘어가서 일단 넘기고 다음 부분부터 만드는데, 거기서는 또 간격이 알아서 설정 되었다! 둘이 뭐가 다른 걸까 싶어서 비교하던 찰나, 깨달음을 얻고야 말았다.

      <div class="row">
          <div class="col-md-6 col-lg-3 callout p-3"></div>
      </div>

이때까지는 이렇게 콘텐츠를 담고 있는 div에 바로 col을 적용했었는데

      <div class="row">
          <div class="col-md-6 col-lg-3">
              <div class="callout p-3"></div>
          </div>
      </div>

이렇게 col을 적용하는 div와 내용물을 분리하니까

원하는 대로 구현되었다! row가 적용되어 12블록으로 나뉠 때, 블록끼리는 간격 없이 빽빽히 구역을 나눠 갖는다. 그러므로 위 이미지처럼 div 사이에 거리를 두고 싶으면 내부에 div를 하나 더 추가해서 그곳에 margin이나 padding 값을 적용해야 하는 것.
추가적으로, row 적용한 div에 바로 padding 값을 주지 않기! body를 뚫고 나간다!

• 그럴 듯한 대시보드 완성
  
  • 강의에 있는 실습 과제인 대시보드를 완성했다. 거의 flexbox와의 싸움이라고 해도 과언이 아닌... 사진이라 보이지 않지만 사이드바에 마우스를 올리면 감춰져 있는 메뉴도 나온다. 이제 이걸 바탕으로 처음부터 다시 새롭게 만들어 봐야겠다.

🎃TRY

• 다시 또 열심히
  • 평소에 자주 안 나가는 대신 약속을 잡으면 몰아서 잡는 경향이 있어서 요 며칠 공부에 집중하지 못했다! 겨우 익숙해진 루틴에서 벗어나지 않도록 다시 또 열심히, 일찍 자고 일찍 일어나서 공부해야겠다.