화면 크기에 따라 toc 변경하기

ordilov / 2022. 1. 16

현재 블로그는 오른쪽에 목차가 나오고 있습니다.
문제는 화면 가로가 짧아지면 따로 처리하지 않아 본문가 겹처보이게 됩니다.

css의 @media 태그를 사용하면 됩니다.

@media screen and (min-width: 800px) {
}

먼저 어느 매체에서 사용할 때를 구분할 수 있습니다.
어떤 매체든 상관없다면 all을 기본적으로 컴퓨터나 태블릿 스크린은 screen입니다.
연산자로는 and, not, .(or)을 사용할 수 있습니다.
조건으로 width, height, orientation등 특정 상황을 가정하고 지정할 수 있습니다.

따라서 가장 간단한 방법으로 최소 가로 길이가 일정 범위가 넘지 않으면 기본 toc로 지정합니다.