TIL12 - CSS 미디어쿼리

난 지금 나만의 웹 페이지를 만들고 있다.
노트북의 브라우저에 맞춰 구현을 하고 있는데 이런 세상에! 브라우저의 크기를 줄여서 보니 레이아웃이 망가져버렸다.

마음도 아프고 머리도 아프고... 이럴 때 해결할 수 있는 방법이 바로 미디어쿼리이다.

기본 구조

@media (media-type) and (media-feature-rule) and (orientation: landscape) {
	//...CSS rule...
}

1. media-type

• all : 모든 장치
• print : 프린터 인쇄물 미리보기 화면
• screen : 사용자가 보는 화면
• speech : 페이지를 읽어주는 화면 낭독기

대부분 only screen(웹 페이지 기준)을 많이 사용한다.

2. media-feature-rule

• min-width : 최솟값. 주어진 크기보다 화면이 커질 경우
• max-width : 최댓값. 주어진 크기보다 화면이 좁아질 경우

width, height 등도 있지만 현재 가장 많이 쓰이는 속성은 위 두가지이다.

3. orientation

화면이 가로 모드인지 세로 모드인지 검사하여 주어진 조건에 맞을 경우 CSS 규칙을 적용한다.

• landscape : 가로 방향에서만 적용
• portrait : 세로 방향에서만 적용

반응형 디자인을 만들 때 두 가지 접근법

1. 데스크탑 우선으로 시작

가장 넓은 뷰를 기준으로 구현을 하고 뷰포트의 축소에 맞춰서 breakpoint를 확인하여 모바일 화면에 맞는 페이지를 구현한다.

max-width 속성으로 모바일 브라우저 크기에 따라 CSS 규칙을 추가한다.

2. 모바일 우선으로 시작

가장 작은 뷰를 우선으로 구현을 하고 화면을 넓히면서 코드를 추가해나간다.

min-width 속성을 사용하여 데스크탑 브라우저 크기에 따라 코드를 작성한다.

breakpoint(중단점)

출시되는 기기의 화면 크기가 다 다르기 때문에 표준화된 것을 무조건적으로 따르기보다는 직접 브라우저의 크기를 조절해보면서 레이아웃이 무너지는 부분을 찾아 중단점으로 잡는다.

표준화 된 breakpoint

• mobile ≤ 480px
• Tablet ≤ 768px
• Laptop ≤ 1600px
• Desktop > 1600px