wiki:css:css_note:css_media_queries_examples

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_media_queries_examples [2021/05/04 18:07]
emblim98
+++ wiki:css:css_note:css_media_queries_examples [2023/01/13 18:44] (현재)
@@ 줄 407: / 줄 407: @@
       }
 </code>
+\\
+**추가 값 사용하기:** 아래 예제에서는 쉼표를 사용하여 이미 존재하는 쿼리에 추가 미디어 쿼리를 추가합니다\\
+(이는 OR 연산자처럼 작동합니다).\\
+====Example====
+<code css>
+@media screen and (max-width: 900px) and (min-width: 600px),(min-width: 1100px)
+      {
+        div.example {
+          /* 600px~900px에 적용, 1100px~부터 적용*/
+          font-size: 50px;
+          padding: 50px;
+          border: 8px solid black;
+          background: yellow;
+        }
+      }
+</code>
+\\
+=====CSS @media Reference=====
+모든 미디어 유형 및 기능/표현에 대한 전체 개요는 [[https://www.w3schools.com/cssref/css3_pr_mediaquery.asp|CSS @media Rule]]을 참조하세요.\\
+\\
+**Tip:** 미디어 쿼리 중단점(media query breakpoints)을 사용하여 반응형 웹 디자인(다른 장치 및 화면을 대상으로 지정하는 방법)에 대해 자세히 알아 보려면 [[https://www.w3schools.com/css/css_rwd_intro.asp|Responsive Web Design Tutorial]]를 읽어보십시오.\\
 {{tag>오션, CSS Media Queries Examples}}

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_media_queries_examples.1620119279.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)