미리 어도비XD로 구현한것을 토대로 코딩을 하는데도 결과물이 너무 달라서 너무 당황했다.
알고 보니 어도비XD로 구현한것은 해상도 1920x1080을 기준으로 만들었기 때문에 당연히 맥북의 해상도가 다를수 밖에 없다.

깨닫고 이 해상도란 문제가 멀리 있는 문제가 아니구나 라고 느끼고 바로
사실 메디아 쿼리,해상도 문제는 거리가 먼 문제인지 알았지만 바로 눈앞에 있는 문제라는걸 느꼈다.

Media Query

미디어 쿼리는 화면, 프린터와 같은 미디어 타입과 적어도 하나 이상의 표현식(expression)으로 구성된다. 표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있다.

Media Query 첫번째 적용방법

기존 CSS 적용하듯 <link>요소에 css파일을 불러온다 이렇게 작성을 하게된다면
screen and (max-width: 768px)"의 의미는 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것이다.

media Query 두번째 적용방법

첫번째 방법 보다는 대부분 이 방법을 사용한다. 첫번째와 마찬가지로 화면 최대 너비가 768px이 되는 것이다. 미디어 타입에 사용되는 값을 여러종류가 있지만 웹 사이트를 만드는데는 screen을 사용하거나 all 을 사용하는것이 일반적이라고 한다. 만약 screen and 를 제외한다면 all이 기본 디폴트 값이 된다.

미디어 특성에서 max-width 와 min-width 가 가장 일반적으로 쓰인다.

데스크 탑을 우선으로 사용할때는 max-width 모바일을 우선으로 사용하는 경우는 min-width를 사용한다.

참고 자료 : https://offbyone.tistory.com/121,
https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries