테스트 사이트 - 개발 중인 베타 버전입니다

@media 질문 채택완료

그누보드이해하기 4년 전 조회 1,816

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

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

 

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

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

댓글을 작성하려면 로그인이 필요합니다.

답변 4개

채택된 답변
+20 포인트

보통 기본값은 all 인데

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

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

 

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

4년 전

https://offbyone.tistory.com/121">https://offbyone.tistory.com/121

 

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

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

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

 

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Big1
4년 전

CSS 미디어 타입입니다

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

screen / print / speech / all 

 

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

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

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

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

 

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

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

그누보드이해하기
4년 전
아 의미가 잘못 전달 된 것 같아요.
제가 궁금한건 max-width 의 내용이 아니라
@media 와 @media screen and 의 차이점이 궁금한 겁니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인