공부하자
미디어 쿼리 문법 및 사용방법 본문
미디어쿼리(Media Query)
: 디바이스에 상관없이 최적화 된 페이지를 제공할 수 있도록 도와주는 기술
미디어 쿼리를 선언 후 css 작성
기본문법
: @media only screen and (속성값 A) and (속성값 B)
@media all : 모든 장치
@media print : 인쇄 결과물 및 출력 미리보기 화면
@media screen : 화면
@media speech : 음성 합성 장치
min 과 max
: 화면의 최소값과 최대값을 정해주는 속성
min-width:375px : 화면의 최소 넓이가 375일 때, 즉 375px 이상의 화면에 적용하라
max-width:1024px : 화면의 최대 넓이가 1024px일 때, 즉 1024px 이하의 화면에 적용하라
@media screen and (min-width:375px) and (max-width:750px)
@media all (max-width:1024px)
developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries#Syntax
미디어 쿼리 사용하기 - 웹 개발자 안내서 | MDN
미디어 쿼리 사용하기 Jump to sectionJump to section 미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때
developer.mozilla.org
www.w3schools.com/cssref/css3_pr_mediaquery.asp
CSS @media Rule
CSS @media Rule Example Change the background color of the element to "lightblue" when the browser window is 600px wide or less: @media only screen and (max-width: 600px) { body { background-color: lightblue; } } Try it Yourself » Mor
www.w3schools.com
www.w3schools.com/css/css3_mediaqueries_ex.asp
CSS3 Media Queries - Examples
CSS Media Queries - Examples CSS Media Queries - More Examples Let us look at some more examples of using media queries. Media queries are a popular technique for delivering a tailored style sheet to different devices. To demonstrate a simple example, we c
www.w3schools.com
'CSS정리' 카테고리의 다른 글
| CSS로 삼각형 및 여러 도형 표현하기 (0) | 2021.01.17 |
|---|---|
| 흐르는 글자 css로 표현하기 marquee (0) | 2021.01.10 |
| 여러가지 효과 transition, animation, transform (0) | 2021.01.04 |
| 좌우배치를 하는 다양한 방법 (float, display:table, flex) (0) | 2021.01.04 |
| 여러가지 단위 : %, vw, vh, em, calc (0) | 2020.12.04 |