[CSS] RESPONSIVE - 반응형

@media [only | not] 미디어 유형 [and 조건] * [and 조건]

 

반응형 : 디바이스 종류에 따라 웹페이지 크기가 자동적으로 조정되는 것

 

뷰포트 : 접속한 기기 화면에 맞춰 확대하거나 축소해 표시

<meta name="viewport" content="<속성1 = 값>, <속성2 = 값> ...">

속성	설명
width / height	뷰포트 넓이 / 높이
user-scalable	확대 / 축소 가능 여부
initial-scale	초기 확대 / 축소 값
minimum-scale	최소 확대 / 축소 값
maximum-scale	최대 확대 / 축소 값

 

 

가변 그리드 레이아웃 : 사이트의 모든 요소들을 상대적 크기로 지정해 브라우저의 크기에 따라 탄력적으로 보여주는 방법

- 가변 글꼴 : 글자 크기도 유동적으로 바뀌어야 함 (em과 rem을 주로 사용)

- 가변 이미지 : 창의 넓이에 따라 이미지 넓이도 적절히 조절되도록 만듦

  -> srcset 속성 : 화면 넓이 값이나 픽셀 밀도에 따라 고해상도의 이미지 파일을 지정할 수 있음

- 가변 비디오 : 화면의 넓이에 따라 비디오의 넓이가 늘어나거나 줄어들 수 이도록 함

 

 

미디어 쿼리 : 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해줌

- 구체적인 조건으로 필요한 스타일을 적용할 수 있도록 확장

 

 

- 연산자

연산자	설명
and	조건 계속 추가 가능
, (쉼표)	동일한 스타일 유형을 사용할 미디어의 유형과 조건이 있을 때 사용
only	미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 됨
not	not 다음에 지정하는 미디어 유형을 제외

 

- 미디어 유형 종류

미디어 유형	사용 가능한 미디어
all	모든 미디어 유형
print	인쇄 장치
screen	컴퓨터 / 스마트폰 스크린
tv	음성과 영상이 동시 출력되는 TV
aural	음성 합성 장치
braille	점자 표시 장치
handheld	패드처럼 손에 들고 다니는 장치
projection	프로젝터

 

- 미디어 쿼리 조건

1. 웹 문서의 가로 넓이와 세로 높이

속성	설명
width / height	가로 넓이 / 세로 높이
min-width / min-height	최소 넓이 / 최소 높이
max-width / max-height	최대 넓이 / 최대 높이

 

2. 단말기의 가로 넓이와 세로 높이

속성	설명
device-width / device-height	가로 넓이 / 세로 높이
min-device-width / min-device-height	최소 넓이 / 최소 높이
max-device-width / max-device-height	최대 넓이 / 최대 높이

 

3. 화면 회전

속성	설명
orientation : portrait	단말기 세로 방향
orientation : landscape	단말기 가로 방향

 

4. 화면 비율

속성	설명
aspect-ratio	화면 비율
min-aspect-ratio	최소 화면 비율
max-aspect-ratio	최대 화면 비율

 

5. 단말기의 물리적 화면 비율

속성	설명
device-aspect-ratio	화면 비율
min-device-aspect-ratio	최소 화면 비율
max-device-aspect-ratio	최대 화면 비율

 

6. 색상당 비트 수

속성	설명
color	비트 수
min-color	최소 비트 수
max-color	최대 비트 수

 

- 미디어 쿼리 웹 문서에서 직접 정의

<style media="미디어 쿼리 조건"> 스타일 규칙들 </style>

 

---

 

예시

 

 

 

 

배틀그라운드의 상단 메뉴만 추출

 

- 일반형

 

 

 

- 반응형