미디어쿼리
학습내용
미디어 쿼리 기초
-
미디어쿼리
반응형 웹을 만들기 위해서 미디어쿼리 필수. (반응형 디자인)
화면의 크기나 환경에 따라 웹사이트를 변경하는 기술.
기기의 종류뿐만 아니라 해상도, 비트수, 가로, 세로 여부 등 세밀한 부분까지 감지할 수 있는 기술 탑재
width 값의 크기를 기준으로 분기점을 설정.
모바일화면 비중이 높다면 min / pc화면 비중이 높다면 max -
width 분기점
320px ~ 768px미만 : 스마트폰
768px ~ 1024px미만 : 태블릿
1024px 이상 ~ : PC -
문법
@media : 미디어 쿼리 선언
and : 앞뒤 조건이 모두 true일때 뒤에 따라오는 것을 해석하라는 의미
,(콤마) : 앞뒤 조건 중 하나만 사실이더라도 true이면 true
유용한 사이트
학습소감
크기에 따라 내용의 디자인이 바뀌는 것이 미디어쿼리(반응형 디자인)때문이라는 것을 알게되었다.
