2025-08-12 CSS 배운것 기록

오늘은 사이드바가 빠지면 어긋나는 페이지를 좀 이쁘게 다듬다가 깨닫게?된 것을 정리한다

@media (max-width: 1199px) {
  .app-board {
    margin-left: 0;
    width: 100%; /* 필요에 따라 너비도 조절 */
    top: 115px; /* 헤더 높이에 맞춰 조정 */
  }
}

@media (max-width: 1199px) {
   header.app-header {
    margin-left: 0 ;
    width: 100% ;
    left: 0 ;
    top:67px;
  }
}

 

보이듯이 header와 board의 px가 특정된 값에서 작아질 때 적용되는 코드를 적용한 것이다.

크롬을 쓰고있고, F12 키를 누른 후 개발자툴로 화면크기를 조정하면서 픽셀 하나하나 눌러가며 작업했다.

 

문제는 @media의 max-width 였는데 일단 내 템플릿의 셋팅은 일정크기로 줄어들면 사이드바가 빠지면서 햄버거 아이콘이 생기는 것이다. 그래서 개발자 툴을 사용해 한픽셀 한픽셀 검사를 진행했고 사이드바가 빠지는 타이밍에 header와 board에도 @media 를 적용시켰지만 말을 듣지 않는 것이었다. 할수없이 일단위를 하나하나 조정하면서 검사했다. 그결과 max-width : 1199px 는 (1199 미만부터 적용한다는 뜻인걸 알게됐다 다음에 만약에 @media를 쓸일이 또 생긴다면 나 스스로 @media 를 적용해 원하는 타이밍에 화면이 줄어들게 할수있을 것 같다.

 

헛.. 근데 글을 쓰면서 생각해봤는데 사이드바가 빠지는 특정 px 값을 css파일에서 찾아서 header와 board에 적용시켰으면 됐는데 그렇지 않고 무식하게 개발자툴을 켜서 px 바뀌는걸 일일이 찾았었다.. 아무튼 됐으니까..? 다음엔 그렇게 하지말아야지

---

overflow-x: auto 란?

=> overflow-x는 가로 방향의 넘침을, auto는 넘칠 경우 스크롤바를 생성하여 내용이 보이도록 한다는 의미이다. 

즉, div 요소의 너비보다 내용이 길 경우 가로 스크롤바가 나타나서 내용 전체를 볼 수 있게 해주는 스타일을 설정하는 것

주어진 공간이 모자라 넘치는 컨텐츠를 보여주기 위해서 사용하는 코드