CSS - 반응형 웹페이지 ( 미디어쿼리 )

김두나·2023년 10월 22일
0

HTML/CSS

목록 보기
11/13

@media

-> @media [media-type] and (조건)

  • all : 모든 미디어
  • secreen: 스크린에서 사용하겠다

1) @media all or screen and (max-widht : 800px)

2) @media all or screen and (min-widht : 200px)

=> media-type자리에 all, screen 둘중 어느것이라도 사용해도 OK!
생략하고 @media (min-width : 300px); 로 작성해도 정상 작동함

3) @media (min-width: 500px) and (max-width : 900px) 또는 @media (min-width: 500px) , (max-width : 900px)

-> and(그리고)와 ',=or(또는)'로 조건의 범위를 적용할 수 있음

4) @media screen and (orientation : landscape)

  • 가로 폭이 세로 폭보다 길어질 때 실행되는 가로모드
    ex) 메뉴바, 아래 쪽에 있던 광고 위치를 바꿀때 주로 사용

0개의 댓글