728x90

CSS(Cascading Style Sheets)

현대적인 웹 애플리케이션을 만드는 데 있어서 굉장히 중요한 요소라고 할 수 있는

반응형 디자인이라고 하는 흐름을 알아보자.

 

 웹은 거의 모든 정보 시스템 운영 체제와 상관없이 PC건 스마트폰이건, 또 가상현실이건 간에 모든 시스템에서 동작하는 정보 시스템이다. 이 말인즉은 수많은 형태의 화면에서 동작해야 된다는 것이다. 

 이렇다보니까 웹을 만드는 사람들은 그 여러 가지 화면에 대응되는 웹페이지를 만들기 위해서 몸부림을 쳤다. 이러한 사람들의 헌신 끝에 나온 것이 반응형 디자인이다. 

 

 화면의 크기에 따라 웹페이지의 각 요소들이 반응해서 최적화된 모양으로 바뀌게 하는 것,

이것을 반응형 웹 또는 반응형 디자인, 영어로는 Responsive Web이라고 부른다. 

 

이 반응형 디자인을 순수한 웹을 통해서 CSS를 통해서 구현하는 핵심적인 개념인

미디어 쿼리(Media Query)에 대해 살펴보자.

미디어 쿼리 소개
  • mediaquery.html을 만든다. (기본세팅)
    그리고 어떤 HTML의 요소를 화면에 따라 보였다 안 보였다 하게 하는 것을 해볼 것이다. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div{
        border:10px solid green;
        font-size:60px;
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>

 여기서 <div>태그를 화면의 크기에 따라서 보이게도 하고, 안 보이게도 하면 화면의 크기에 따라 디자인을 다르게 했다고 할 수 있다. 이 때 필요한 것이 바로 미디어 쿼리다.

이해하기 쉽게 단계적으로 접근해보자.

 화면의 크기가 800픽셀보다 크냐, 작으냐에 따라 <div>태그를 보이게, 안 보이게 하고 싶다면 우선 화면의 크기가 현재 얼마나 되는지를 알아야 한다. 

 

 개발자 도구, 검사에 들어가면 알다시피 툴이 나오고 웹페이지를 마우스로 조절할 때 웹페이지의 화면 오른쪽 상단 모서리에 화면의 크기가 표시된다. 

  • 가설을 세워보자.
    screen width > 800px 일 때 <div>태그의 display를 none으로 하고 싶다고 하자. 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div{
        border:10px solid green;
        font-size:60px;
      }
      screen width > 800px
        div{
          display:none;
        }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>
  • 여기서 screen width > 800px은 가짜 코드이다. 이 가짜 코드를 미디어 쿼리로 바꿔보자.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      div{
        border:10px solid green;
        font-size:60px;
      }
      @media(min-width:800px) {
        div{
          display:none;
        }
      }
    </style>
  </head>
  <body>
    <div>
      Responsive
    </div>
  </body>
</html>

 화면의 크기가 800픽셀보다 크다는 것은 화면의 크기가 최소 800픽셀이라는 것이다.

즉 화면의 크기가 최소 800픽셀이라는 미디어 쿼리를 만들어 보면 위와 같다. 

@media(min-width:800px) {

 

                                                          }

min은 최솟값.

즉 800픽셀보다 화면이 크다면 이 중괄호 안의 <div>태그가 동작하게 되는 코드를 짰다.

반대로 최댓값은 max.

max를 넣어본다면.

@media(max-width:800px) {

 

                                                          }

screen width < 800px, 화면의 크기가 800픽셀보다 작다라는 것을 갖게 되는 것.

마무리

 미디어 쿼리라는 것을 활용하면 화면의 크기, 스마트폰을 쓰면 가로모드 세로 모드 같은 것들, 또 여러 가지 화면의 특성들에 따라서 어떠한 조건을 만족할 때만 CSS의 내용이 동작하도록 하는 것이 가능하다. 

 이것이 바로 미디어 쿼리, 오늘날 여러가지 화면이 존재하는 세상에서 굉장히 중요한 존재이다. 

저작자표시

'youtube.com|user|egoing2 > WEB2 - CSS' 카테고리의 다른 글

WEB2 - CSS 14  (2) 2021.09.11
WEB2 - CSS 13  (9) 2021.09.07
WEB2 - CSS 11  (2) 2021.09.02
WEB2 - CSS 10  (10) 2021.09.01
WEB2 - CSS 9  (5) 2021.08.30

티스토리툴바