[CSS] CSS 미디어 쿼리 문법 [5/7 study]

 

 

CSS 미디어 쿼리 문법

 

 

 

 

only | not의 위치에는 말 그대로 only 키워드 또는 not 키워드가 들어가게 되는데  only 키워드는 뒤의 조건 만 , not 키워드는 뒤의 조건을 제외한 조건을 뜻 합니다. 미디어 쿼리를 지원하지 않는 브라우저는 only 키워드가 쿼리 안의 내용이 무시되어 실행 되지 않습니다. only 키워드는 큰 의미는 없지만 미디어 쿼리를 지원하는 브라우저를 대상으로 할 경우 적어주는 것이 좋습니다.

 

❗️미디어 타입의 종류 ( 많지만 자주 쓰이는 것만 적어 봤습니다.)

- all : 모든 미디어 타입

- print : 인쇄 용도

- screen : 컴퓨터 스크린

 

❗️미디어 쿼리문의 속성과 속성 값

 

- width: 웹페이지의 가로 길이를 판단합니다.

- height: 웹페이지의 세로 길이를 판단합니다.

- device-width: 단말기의 물리적인 가로길이를 판단합니다. 즉, 기기의 실제 가로 길이를 판단합니다.

- device-height: 단말기의 물리적인 세로길이를 판단합니다. 즉, 기기의 실제 세로 길이를 판단합니다.

- device-aspect-radio: width/height 비율을 판단합니다.

 

미디어 쿼리 속성은 프로그래밍 언어와 같이 =, >, <등의 연산자를 사용하지 않으며 속성 명 앞에 min- 를 붙여서 최솟 값, 최댓 값을 판단합니다. 속성은 and (속성: 속성 값) and (속성: 속성 값)으로 나열 할 수 있으며 min- max- 를 이용 할 경우 범위로도 설정이 가능합니다. 

 

🔥참고자료

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries

Beginner's guide to media queries - Learn web development | MDN

 

 

🔥 마무리

 

작은 프로젝트를 만들면서 반응형에 대해 공부하게 되면서 미디어 쿼리도 처음 써 보게 되었다. 미디어 쿼리를 사용해서 사용자가 보기에 부드럽게 변하도록 더 신경써서 코딩을 해야겠다는 생각이 든다! 다음 게시물에는 css 반응형 속성들에 대해 소개하려고 합니다!! 오늘도 화이팅 ㅎㅎ