wiki:css:css_note:css_media_queries_examples

차이

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

차이 보기로 링크

--- wiki:css:css_note:css_media_queries_examples [2021/05/04 17:46]
emblim98 [Example]
+++ wiki:css:css_note:css_media_queries_examples [2023/01/13 18:44] (현재)
@@ 줄 371: / 줄 371: @@
 </code>
+=====Orientation:Portrait/Lancscape=====
+미디어 쿼리를 사용하여 브라우저 방향에 따라 페이지 레이아웃을 변경할 수도 있습니다.\\
+\\
+브라우저 창이 높이보다 너비가 넓은 경우에만 적용되는 CSS 속성 집합을 가질 수 있습니다.이를 "가로(landscape)"방향이라고 합니다.\\
+====Example====
+방향이 가로 모드인 경우 lightblue 배경색을 사용합니다.\\
+<code javascript>
+      body {
+        background-color: lightgreen;
+      }
+      @media only screen and (orientation: landscape) {
+        body {
+          background-color: lightblue;
+        }
+      }
+</code>
+\\
+=====Min Width to Max Width=====
+''%%(max-width: ..)%%'' 및 ''%%(min-width: ..)%%'' 값을 사용하여 최소 너비와 최대 너비를 설정할 수도 있습니다.\\
+\\
+예를 들어, 브라우저의 너비가 600 ~ 900 픽셀인 경우, <div> 요소의 모양을 변경합니다.
+====Example====
+<code css>
+      @media screen and (max-width: 900px) and (min-width: 600px) {
+        div.example {
+          font-size: 50px;
+          padding: 50px;
+          border: 8px solid black;
+          background: yellow;
+        }
+      }
+</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}}

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