차이

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

--- wiki:css:css_note:css_media_queries_examples [2021/05/04 16:53]
emblim98
+++ wiki:css:css_note:css_media_queries_examples [2023/01/13 18:44] (현재)
@@ 줄 284: / 줄 284: @@
 ====Example====
 <code css>
+    * {
+      box-sizing: border-box;
+    }
-</code>
+    /* Style the body */
+    body {
+      font-family: Arial;
+      margin: 0;
+    }
+    /* Header/logo Title */
+    .header {
+      padding: 60px;
+      text-align: center;
+      background: #1abc9c;
+      color: white;
+    }
+    /* Style the top navigation bar */
+    .navbar {
+      /* link */
+      display: flex;
+      background-color: #333;
+    }
+    /* Style the navigation bar links */
+    .navbar a {
+      color: white;
+      /* white font */
+      padding: 14px 20px;
+      /* 상하14px 좌우20px */
+      text-decoration: none;
+      /* link 밑줄 삭제 */
+      text-align: center;
+      /* 적용이 왜 않되는 거지? */
+    }
+    /* Change color on hover */
+    .navbar a:hover {
+      background-color: #ddd;
+      color: black;
+    }
+    /* Column container */
+    .row {
+      display: flex;
+      flex-wrap: wrap;
+    }
+    /* Create two unequal columns that sits next to each other */
+    /* Sidebar/left column */
+    .side {
+      flex: 30%;
+      background-color: #f1f1f1;
+      padding: 20px;
+    }
+    /* Main column */
+    .main {
+      flex: 70%;
+      background-color: white;
+      padding: 20px;
+    }
+    /* Fake image, just for this example */
+    .fakeimg {
+      background-color: #aaa;
+      width: 100%;
+      padding: 20px;
+    }
+    /* Footer */
+    .footer {
+      padding: 20px;
+      text-align: center;
+      background: #ddd;
+    }
+    /* Responsive layout - when the screen is less than 700px wide, make the two
+    columns stack on top of each other instead of next to each other */
+    @media screen and (max-width: 700px) {
+      .row,.navbar {
+        flex-direction: column;
+      }
+    }
+</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}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구