반응형웹 - 미디어쿼리

2022. 1. 5. 10:57ㆍStudy/Publishing

반응형 웹 디자인

다양해지는 사용자 브라우저 환경에 따라 웹사이트를 제작하는 데는 한계가 있다.

미디어쿼리를 사용하여 화면 크기에 맞게 화면 요소들을 재배치하고 각 요소의 표시 방법만 다르게 해서 사이트를 구현할 수 있다.

미디어쿼리
미디어쿼리란 웹을 접속하는 기기의 화면 해상도에 따라 각각 다른 CSS를 적용해주는 기능을 한다.
media 속성에는 all, screen, print 등의 값을 지정하고 웹이 표시되는 대상별로 디자인을 달리 지정해 줄 수 있다.
미디어쿼리는 같은 screen이라도 기기의 해상도에 따라 CSS를 다르게 지정할 수 있다.

＊ 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 함
＊ 뷰포트(View Port) 너비 같은 여러 장치들의 조건에 맞춰 특정한 CSS 스타일을 지정함

미디어쿼리 구문

대소문자를 구별하지 않는다.

디바이스

값	설명	예
all	모든 디바이스를 대상으로 함	media="all"
screen	컴퓨터 화면을 대상으로 함	media="screen"
print	인쇄 미리보기, 또는 실제 인쇄매체를 대상으로 함	media="print"
orientation	디바이스의 방향을 나타냄 portrait (세로로 길게) landscape (가로로 길게) 값을 사용해서 방향을 지정함	media="orientation:landscape"

연산자

값	설명	예
and	And 연산자 역할을 수행함	media="screen and (oriendtation: landscape)"
,	Or 연산자 역할을 수행함	media="screen, print"

속성값

값	설명	예
width	대상 매체의 해상도 너비 값을 지정해서 미디어 쿼리가 만족하는 조건을 설정함 min-(최소값), max-(최대값)의 접두어를 함께 적어서 범위를 지정할 수 있음	media="screen and (min-width:320px)"
height	대상 매체의 해상도 높이 값을 지정해서 미디어 쿼리가 만족하는 조건을 설정함 접두어 min-max를 함께 적어서 범위를 지정할 수 있음	media="screen and (max-height:480px)"

디바이스별 기준 해상도

정해진 사이즈는 아니지만 일반적으로 아래의 사이즈를 기준으로 나눈다.

구분	사이즈
와이드PC	1281px ~ 이상
PC	1025px ~ 1280px
태블릿	769px ~ 1024px
소형 태블릿	641px ~ 768px
모바일	320px ~ 640px

미디어 쿼리를 사용하는 3가지 방법

1. <style>에 미디어쿼리를 적용하는 방법

＊ header안의 style에 media 속성을 추가하여 사용할 수 있다.
＊ max-width만 사용해도 같은 스타일을 얻을 수 있다.

<style media="screen and (min-width:641px) and (max-width:1024px)">

<!-- 데스크 톱 환경 : 해상도가 1280px 이상에서 적용됨 -->
<style media="screen and (min-width:1280px)">
	#exampleSub{}
</style>

<!-- 테블릿 환경 : 가로 해상도가 641px이상 1024px이하에서 적용됨 -->
<style media="screen and (min-width:641px) and (max-width:1024px)">
	#exampleSub{}
</style>

<!-- 모바일 환경 : 가로 해상도가 640px 이하에서 적용됨 -->
<style media="screen and (max-width:640px)">
	#exampleSub{}
</style>

2. link로 연결시키는 방법

＊ 링크 된 CSS 파일 내부에서 @media를 통해 사용할 수 있다.
＊ max-width만 사용해도 같은 스타일을 얻을 수 있다.
＊ 권장되는 방법

@media only screen and (min-width:641px) and (max-width:1024px) {
}

/* 제일 높은 해상도는 미디어쿼리를 생략한다 */
#exampleSub{}


/* 꼭 높은해상도에서 낮은해상도 순으로 media query를 작성한다 */
@media only screen and (max-width:1280px) { /* 1280 이상 */
	#exampleSub{}
}

@media only screen and (max-width:1024px) { /* 1024 ~ 641*/
	#exampleSub{}
}

@media only screen and (max-width:640px) { /* 640 이하 */
	#exampleSub{}
}

3. 각각의 css파일 링크 시

<head>
  <link rel="stylesheet" href="css/desktop.css" media="screen and (min-width:1280px)">
  <link rel="stylesheet" href="css/tablet.css" media="screen and (min-width:641px) and (max-width:1024px)">
  <link rel="stylesheet" href="css/mobile.css" media="screen and (max-width:640px)">
</head>

'Study > Publishing' 카테고리의 다른 글

CSS3 mix-blend-mode (0)	2022.01.07
CSS 속성 해제 방법 (0)	2022.01.05
스크롤바 숨기기 (0)	2022.01.04
div 팝업 시 body scroll 비활성화 (0)	2022.01.03
youtube iframe 동영상 반응형 비율 (0)	2021.12.24

SLOG