서론

스크린샷 2023-03-08 오후 11.35.29.png

스크린샷 2023-03-08 오후 11.36.08.png

Velog 클론 코딩을 하던 중, Velog에서 사용한 레이아웃의 Media Query 형식을 그대로 차용하여 코드에 적용하였으나, 지속적으로 max-width: 1919px 가 사용되어, 1376px 이 width로 적용되는 문제를 발견하였다.

필자는 개인적으로 Media Query 사용이 익숙치 않은 개촙촙촙초보라서 누구에게 물어보기는 부끄럽고…

이왕 이렇게 된 김에 연구를 해보기로 했다.


본론

BreakPoints

Breakpoints

Bootstrap 에서 사용하는 대략적인 BreakPoint를 확인해보면 아래의 표와 같다.

스크린샷 2023-03-08 오후 11.40.25.png

(’응? 근데, 벨로그는 왜 저런 뷰포트를 쓴거지?’ 라는 생각이 들었다.)

스크린샷 2023-03-08 오후 11.47.36.png

난 잘 모르겠고, 지금 적용되고 있는 미디어가 뭔지 확인해봤다.

⇒ 현재, 화면에 적용되고 있는 미디어는 1919px 에 맞춰진 스타일임을 확인할 수 있었다.