👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..
미디어 쿼리 (Media Query) 와 Viewport
👋 반응형 웹의 미디어 쿼리 (Media Query) 와 Viewport 안녕하세요 TriplexLab 입니다. 오늘은 미디어 쿼리를 사용할때 max-width와 min-width의 차이점에 대해서 말씀드릴게요. /** 반응형 만들때 min-width기준으로 css 작성하는 기준을 설명합니다. min-width는 모바일의 해상도가 가장 우선으로 읽혀야 합니다. */ /** 모바일의 해상도 기준 */ @media screen and (min-width: 320px){ .bg1 { width: 100px; height: 100px; background-color: red; } } /** 테블릿 해상도 기준 */ @media screen and (min-width: 768px){ .bg1 { backgroun..
2021.05.23