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
Author And Source
이 문제에 관하여(TIL12 - CSS 미디어쿼리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@silviaoh/TIL-CSS-미디어쿼리저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)