미디어쿼리 적용하기

🚨만든 웹페이지를 모니터, 노트북, 아이패드 팀원 각각 다른 매체를 이용하다보니 화면 해상도에 따라 레이아웃이 깨지거나 늘어져서 보이는 경우가 있다.

여러 페이지 코드를 확인한 결과 전체 태그들을 하나의 div로 묶어서 wrap값을 주기도하던데 이렇게 할 경우 가장 간단하긴 하지만 해상도가 커지면 양쪽 여백이 생기고 해상도가 줄어들면 좌우 스크롤을 이용해야해서 조금 불편한 느낌이 들었다.

어차피 현재 실제 웹페이지들이 사용하는 코드이기도하고 이용자 입장에서 생각하면 해상도에 따라 레이아웃이 거기에 맞춰지는게 더욱 편하니 이번엔 미디어쿼리를 적용해보았다!

미디어 쿼리 적용하는법

스타일 시트를 만들어 시트 자체에 조건을 주는 방법

<link rel="stylesheet" media="screen and (max-width: 1024px)" href="style.css" />

스타일 시트 내에서 조건을 주는 방법

@media screen and (max-width: 1024px) {
        body { background-color: white; }
    }

📍미디어타입을 생략하면 all이 기본값이 되고 대부분 웹사이트를 만드는데는 screen/all이 사용된다.

📍mix-width > 최대 너비값이니 조건을 준 width보다 이하일 때 적용된다.
min-width > 최소 너비값이니 조건을 준 width보다 이상일 때 적용된다.

혹시나 나중에 참고될까하여!