@media 질문

@media 질문

QA

@media 질문

본문

저는 반응형 웹을 만들 때 항상 @media 만 사용했었는데

@media screen and (max-width: 1050px) 이런 코드를 보게 되서

 

두개의 차이점이 뭔지 궁금합니다

인터넷에서 본것들이 이해가 잘 안되서 자세한 설명을 듣고 싶어요

이 질문에 댓글 쓰기 :

답변 4

보통 기본값은 all 인데

선택자에 따라서 해당 화면의 구성을 적용하냐 마냐를 나누는거에요.

screen 이면 화면 표시장치가 있는 디바이스 기준입니다. (모니터,모바일기기 등..)

 

그 외 음성이라던가 여러가지 디바이스를 구분하고 있습니다.

CSS 미디어 타입입니다

https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

screen / print / speech / all 

 

css 파일 불러올때 이렇게도 쓰죠

<link rel="stylesheet" media="print" ...>

https://offbyone.tistory.com/121

 

@media screen and (max-width: 768px) {

=> 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것
 

@media (max-width: 768px) {...}
=> 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용

 

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)

@media를 쓰셨다면 왜 쓰시는지는 알고 계시는거죠?

그 뒤에 있는 것들은 크기를 제어하는거입니다

 

max-width면 0~1050까지만 적용되는거입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 364
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT