반응형 홈페이지 미디어 쿼리 기본 설명 (@media)

홈페이지를 하나의 레이아웃이 아닌 미디어에 따라 반응하는 형태로 변하게 만드는 별도의 작업을 미디어쿼리 또는 반응형 이라고 부르며, 이를 위한 작업으로 파생된 언어가 바로 웹퍼블리싱과 퍼블리셔입니다. 기존의 레이아웃으로 또 하나의 홈페이지가 미디어에서 다르게 보이는 현상을 말하고, 모두 이용자들을 위한 편의성에서 출발한 것인 만큼, UI,UX와도 밀접한 관계를 지니고 있습니다.

 

---

 

뷰포트 선언 

미디어쿼리를 시작하기 전에 메타 태그를 통해 뷰포트적용(반응형 홈페이지) 선언문을 작성 해 줍니다. 이 과정을 건너뛰면 홈페이지가 반응형으로 적용되지 않습니다. 선언문과 관련한 내용은 이 곳을 클릭해 예전 포스팅을 확인 해 주세요.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

▲ 각 요소들을 다 적고 제일 하단에 미디어 쿼리를 기술한 모습

 

body {
  background-color: lightblue;
}

nav {
   width:100%;
}

/*--------------------------------------------------*/
/*body*/
@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}
@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}
/*nav*/
@media screen and (min-width: 800px) {
   nav {
     width: 50%;
   }
}

▲ 각 요소들을 다 적고 제일 하단에 미디어 쿼리를 기술한 모습

반응형

 

 

2. 두번째 방법: 미디어 쿼리 부분을 클래스명으로 기재해 관리 하는것

/*body*/
body {
  background-color: lightblue;
}

@media screen and (min-width: 400px) {
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) {
  body {
    background-color: lavender;
  }
}

/*nav*/

nav {
   width:100%;
}

@media screen and (min-width: 800px) {
   nav {
     width: 50%;
   }
}

▲ 각 클래스 요소들 밑에 미디어 쿼리를 기술한 모습

 

---

 

@media 

미디어 쿼리의 규칙은 각각의 화면으로 보여지는 것을 다르게 제어 할 수 있는것이 요지입니다. ​

 

[기본 구문]

@media only 1)mediatype and 2)(mediafeature and|or|not mediafeature) {
  3)CSS-Code;
}

• 1) 반응형 홈페이지를 위해 작업된 것만큼 데스크톱,태블릿,스마트폰에 다르게 보여지기 위해 screen고정 
• 2) 크기에 따라 형태가 변하는것임으로  (min-width) and (max-width)를 가장 많이 사용합니다. ("최소에서 미만까지는 이렇게 형태를 표현할거야!" 라는 뜻입니다.) >> 여러가지 기능 코드들은 이 곳을 참고 
• 3) 해당 기능에서 보여줄 css코드를 적어줍니다.

 

/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column {
    width: 50%;
  }
}

/* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}

반응형

 

[예시] - 최대값이 900으로 제한되어있을때, or연산자로 최소값을 600과 1100으로 설정하면, 마치 문제와 같은 느낌입니다만, 최소값과 최대값을 설정하는 경우에 최소값만을 설정하면 그 이상에서만 출력됩니다. ​

 - 1100px크기 이상은 표현 한다. 

- 1100px 크기에서 900px크기 사이에서는 표현X 

- 900px크기에서  600px 크기에서는 표현한다. 

- 600px크기 이하는 표현X ​ 

 

>> 600px ~900px에서는 min~max가 있어서 정상 표현하지만, 

900px~1100px 사이 구간은 max-width값이 900px으로 하나 밖에 없기 때문에 그 이상은 표현하지 않겠죠. 하지만 최소값(min) 1100px이 있어서 그 이상은 표현되는 것입니다.

/* When the width is between 600px and 900px OR above 1100px - change the appearance of <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
  div.example {
    font-size: 50px;
    padding: 50px;
    border: 8px solid black;
    background: yellow;
  }
}

▲ and가 아닌 콤마를 이용해서도 기술 할 수 있습니다. (콤마는 or연산자의 기능을 하며, 기존 적용된 미디어 쿼리에 추가로 적용합니다.)

 

 

Point

미디어쿼리는 각각 해상도가 나타내는 대표적 브레이크 포인트를 우선적으로 선택해 기술해 줌으로서 어떤 해상도를 대표로 잡을지 생각하는것이 좋습니다. 홈페이지에 대한 레이아웃을 잡기전 내가 지금 만들 홈페이지가 PC가 중요한지, 모바일이 중요한지를 먼저 생각하는것이 좋습니다. ​ 

 

- PC를 우선적으로 보여주는 사이트는 max-width를 사용해 이하 단위인 큰 픽셀로 사용되는 부분 부터 포인트를 잡아나가고, 

- 모바일을 우선적으로 보여주는 사이트는 min-width를 사용해 이상 단위인 작은 픽셀부터 사용되는 부분을 잡아나갑니다.

 

 

본문 출처: https://www.w3schools.com