차이

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

--- wiki:css:css_note:css_media_queries_examples [2021/05/04 15:21]
emblim98
+++ wiki:css:css_note:css_media_queries_examples [2023/01/13 18:44] (현재)
@@ 줄 175: / 줄 175: @@
 =====Hide Elements With Media Queries=====
+미디어 쿼리의 또 다른 일반적인 용도는 다양한 화면 크기에서 요소를 숨기는 것입니다.\\
+====Example====
+<code css>
+    div.example {
+      background-color: yellow;
+      padding: 20px;
+    }
+    @media screen and (max-width: 600px) {
+      div.example {
+        display: none;
+      }
+    }
+</code>
+=====Change Font Size With Media Queries=====
+미디어 쿼리를 사용하여 다양한 화면 크기에서 요소의 글꼴 크기를 변경할 수도 있습니다.\\
+====Example====
+<code css>
+  div.example {
+      background-color: lightgray;
+      padding: 20px;
+    }
+    @media screen and (min-width: 600px) {
+      /* 화면 너비가 601px부터 폰트 80px  */
+      div.example {
+        font-size: 80px;
+      }
+    }
+    @media screen and (max-width: 600px) {
+      /* 화면 너비가 600px이하까지 폰트 30px */
+      div.example {
+        font-size: 30px;
+      }
+    }
+</code>
+=====Flexible Image Gallery=====
+다음 예제에서는 미디어 쿼리를 %%flexbox%%와 함께 사용하여 반응형 이미지 갤러리를 만듭니다.\\
+<code css>
+    * {
+      box-sizing: border-box;
+    }
+    body {
+      margin: 0;
+      font-family: Arial;
+    }
+    .header {
+      text-align: center;
+      padding: 32px;
+    }
+    .row {
+      display: flex;
+      /* 사진이 블록에서 변경된다. */
+      flex-wrap: wrap;
+      /* 사진이 다시 블록으로 변경 */
+      padding: 0 4px;
+    }
+    /* Create four equal columns that sits next to each other */
+    .column {
+      flex: 25%;
+      /* 화면 너비의 25%를 갖는 컬럼이 4개로 사진 배치  */
+      max-width: 25%;
+      padding: 0 4px;
+      /* 각 컬럼의 좌우 패딩 생김 */
+    }
+    .column img {
+      margin-top: 8px;
+      /* 각 컬럼의 사진의 상단 마진 생김 */
+      vertical-align: middle;
+    }
+    /* Responsive layout - makes a two column-layout instead of four columns */
+    @media screen and (max-width: 800px) {
+      .column {
+        /* 너비 601 ~ 800px까지는 컬럼2개*/
+        flex: 50%;
+        max-width: 50%;
+      }
+    }
+    /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
+    @media screen and (max-width: 600px) {
+      /* 너비 600px 이하까지는 컬럼1개 */
+      .column {
+        flex: 100%;
+        max-width: 100%;
+      }
+    }
+</code>
+=====Flexible Website=====
+다음 예제에서는 플렉서블 네비게이션 바와 유연한 콘텐츠가 포함된 반응형 웹 사이트를 만들기 위해,\\
+%%flexbox%%와 함께 미디어 쿼리를 사용합니다.\\
+====Example====
+<code css>
+    * {
+      box-sizing: border-box;
+    }
+    /* 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

사용자 도구

사이트 도구

차이

문서 도구