CodeGym /Java Course /Frontend SELF KO /미디어 쿼리에서 변수 사용하기

미디어 쿼리에서 변수 사용하기

Frontend SELF KO

레벨 31 , 레슨 3

사용 가능

4.1 기본 개념

CSS-변수와 미디어 쿼리는 반응형 웹 디자인을 만들기 위한 강력한 도구들을 제공하고, 이는 자동으로 다양한 화면 크기와 디바이스에 맞춰 조정된다. 변수는 스타일을 중앙에서 관리할 수 있게 해주고, 미디어 쿼리는 화면 너비와 같은 조건에 따라 이러한 스타일을 변경할 수 있게 해준다.

기본 개념

CSS-변수: CSS 코드 전체에 반복적으로 사용할 수 있는 값을 설정할 수 있게 해준다. 이는 미디어 쿼리와 같은 다양한 컨텍스트에서 변경될 수 있어, 반응형 디자인에 특히 유용하다.
미디어 쿼리: CSS 스타일을 디바이스의 특성(예: 화면 너비나 높이)에 따라 적용할 수 있게 해준다. 이는 웹 페이지의 외형과 동작을 다양한 디바이스에 맞춰 조정할 수 있게 한다.

미디어 쿼리에서 변수 사용하기

CSS-변수는 미디어 쿼리 안에서 조건에 따라 스타일 값을 변경하기 위해 사용할 수 있다. 이는 더 유연하고 쉽게 유지관리할 수 있는 반응형 디자인을 만드는 데 도움을 준다.

미디어 쿼리에서 변수 사용 예제:

CSS

    
      :root {
        --main-bg-color: #f0f0f0;
        --main-text-color: #333;
        --primary-color: #3498db;
        --font-size: 16px;
      }

      body {
        background-color: var(--main-bg-color);
        color: var(--main-text-color);
        font-size: var(--font-size);
      }

      a {
        color: var(--primary-color);
      }

      @media (max-width: 600px) {
        :root {
          --main-bg-color: #e0e0e0;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --main-bg-color: #d0d0d0;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --main-bg-color: #f0f0f0;
          --font-size: 16px;
        }
      }

HTML

    
      <body>
        <p>This is a paragraph with a link to <a href="#">Example.com</a>.</p>
      </body>

설명:

이 예제에서는 화면 너비에 따라 변수 값이 변경됩니다:

화면 너비가 600px 이하인 경우, 배경이 더 어두운 색조로 변경되고 글꼴 크기가 작아집니다.
화면 너비가 601px 이상 1200px 이하인 경우, 배경이 중간 색조로 변경되고 글꼴 크기가 약간 커집니다.
화면 너비가 1200px 이상인 경우, 기본 변수 값이 적용됩니다.

4.2 미디어 쿼리에서 변수 사용 예제

예제 1: 반응형 패딩 및 글꼴 크기

CSS

    
      :root {
        --padding: 20px;
        --font-size: 16px;
      }

      .container {
        padding: var(--padding);
        font-size: var(--font-size);
      }

      @media (max-width: 600px) {
        :root {
          --padding: 10px;
          --font-size: 14px;
        }
      }

      @media (min-width: 601px) and (max-width: 1200px) {
        :root {
          --padding: 15px;
          --font-size: 15px;
        }
      }

      @media (min-width: 1201px) {
        :root {
          --padding: 20px;
          --font-size: 16px;
        }
      }

HTML

    
      <div class="container">
        <p>This is a responsive container with adaptive padding and font size.</p>
      </div>

설명:

이 예제에서는 .container가 화면 너비에 따라 패딩과 글꼴 크기를 변경합니다.

예제 2: 변수와 미디어 쿼리를 사용한 사이트 테마화

CSS

    
      :root {
        --bg-color: #ffffff;
        --text-color: #000000;
        --link-color: #3498db;
      }

      body {
        background-color: var(--bg-color);
        color: var(--text-color);
      }

      a {
        color: var(--link-color);
      }

      @media (prefers-color-scheme: dark) {
        :root {
          --bg-color: #000000;
          --text-color: #ffffff;
          --link-color: #9b59b6;
        }
      }

HTML

    
      <body>
        <p>This text and link will adapt to the user's preferred color scheme. Visit <a href="#">Example.com</a>.</p>
      </body>

설명:

이 예제에서는 사용자의 선호 컬러 테마(prefers-color-scheme: dark)에 따라 사이트의 색상 테마가 변경됩니다. 배경색, 텍스트 색상 및 링크 색상이 밝은 테마와 어두운 테마 간 전환 시 자동으로 변경됩니다.

4.3 반응형 그리드

미디어 쿼리와 변수를 사용한 반응형 그리드 예제:

CSS

    
      :root {
        --columns: 1fr;
        --gap: 10px;
      }

      .grid-container {
        display: grid;
        grid-template-columns: var(--columns);
        gap: var(--gap);
      }

      @media (min-width: 600px) {
        :root {
          --columns: 1fr 1fr;
        }
      }

      @media (min-width: 900px) {
        :root {
          --columns: 1fr 1fr 1fr;
        }
      }

HTML

    
      <div class="grid-container">
        <div>Item 1</div>
        <div>Item 2</div>
        <div>Item 3</div>
        <div>Item 4</div>
      </div>

설명:

이 예제는 화면 너비에 따라 열 수를 변경하는 반응형 그리드를 사용하고 있습니다. 좁은 화면(600px 이하)에서는 하나의 열, 중간 화면(600px 이상 900px 이하)에서는 두 열, 넓은 화면(900px 이상)에서는 세 열이 사용됩니다.

이전 이전 레슨

다음 다음 레슨

코멘트

TO VIEW ALL COMMENTS OR TO MAKE A COMMENT,
GO TO FULL VERSION