끈기의 힘 : 뉴비에서 풀스텍으로

[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인 본문

프로그래밍 언어/CSS 공부

[인프런/생활코딩] 섹션5. 미디어쿼리(Media query) - 반응형 디자인

쓰리별 2021. 3. 4. 10:42

섹션5. 미디어쿼리(Media query) - 1 : 기본

: 미디어는 먼저, 가전제품 중 TV나 핸드폰, 프린터, 데스크탑과 같이 어떤 정보를 매개해주는 매체들이라 할 수 있다. 쿼리는 미디어의 상태를 미디어에게 물어봐서 그 상태에 따라 우리가 다른 디자인을 할 수 있도록 한다. 라는 느낌. ‘반응형 디자인’의 핵심 기능이 바로 미디어 쿼리!

 

이제 코드를 만들어보자.

<style>태그 안에서 @media라고 작성하면 이제 미디어쿼리를 시작하겠다!라는 의미. ★

 

다음과 같이 작성해보자.

 

<!DOCTYPE html>

<html>

<head>

  <style>

   @media (width:500px){

      body{

        background-color: red;

      }

    }

  </style>

</head>

<body>

 

</body>

</html>

 

위는 무슨 의미냐면? 화면의 크기가 500px이 되었을 때, <body>의 background-color를 red로 하겠다는 의미.

 @media (width:500px){       body{         background-color: red;       }     }

위 그림에서 콘솔을 움직여 width 500px로 맞추면 500px에서만 빨간 바탕이 뜬다!

당연히, 딱 500px에서만 어떤 일을 하는 건 없기에 효용성은 없다. 보통은 어떤 단위 이상 혹은 이하일 때, 작업하니까 그렇게 설정하는 건 의미가 있지!

 

그럼 width 부분에 max-width:500px; 이라 해보자. 그럼 최대값이 500px이하일 때까지 빨간 바탕화면이 적용되는 것을 확인할 수가 있다!! 반대로 min-width:500px 이라고 설정하면, 이는 최소 500px이상부터 빨간 바탕화면을 적용하겠다! 라는 의미겠지?

 

이제 우리가 할 것은 500px 이하일 땐 붉은색, 501px~600px까지는 초록색,

601px 이상부터는 파란색으로 바탕화면을 하려고 한다면?

 

먼저 red와 green을 표현하려면 다음과 같이 코드를 친다.

<style>

  @media (max-width:600px){

    body{

      background-color: green;

    }

  }

  @media (max-width:500px){

    body{

     background-color: red;

    }

  }

</style>

 

500px이하까지는 백그라운드 컬러를 red로 하고, 501~600px까지는 green으로 하겠다!

★ 근데 만약에!! 위에서 green값을 매긴 미디어쿼리를 red값을 매긴 미디어쿼리 아래로 위치가 반대로 위치되면,

500px이하로 떨어져도 바탕화면은 green 값으로 나오게 된다. 이건 예전에 배운 ‘캐스케이딩’과 관련이 있다!! ( * 캐스케이딩 : 하나의 태그를 여러 주체가 같은 효과를 주고자 했을 때, 어떤 주체에게 우선순위를 주느냐라는 문제)

 

위의 코드를 보면 <body>태그가 500px과 600px에서 영향을 받고 있음을 볼 수가 있다.

위의 첫 번째와 2번째의 나머지 모든 캐스케이딩의 조건이 같다면, 코드가 나중에 오는 것의 우선순위가 더 높아진다!!! ★★★ 즉, red가 먼저 표현되야 하니까 우선순위를 가져야하지!

 

그래서 위와 같이, 500px이하까지는 백그라운드 컬러를 red로 하고, 501~600px까지는 green으로 하겠다!를 만들고 싶다면 나머지 모든 캐스케이딩 조건이 같다고 한다면 red가 먼저 표현되어야 하니까 red에 대한 미디어쿼리를 green 미디어쿼리 밑에 적어줘야 한다는 것이여! ★

 

추가로 최소 601px 이상부터는 파란색을 표현하고 싶다면, 다음과 같이 만들면 된다잉!

 

@media (max-width:600px){

  body{

   background-color: green;

  }

}

@media (max-width:500px){

  body{

   background-color: red;

  }

}

@media (min-width: 601px){

  body{

   background-color: blue;

  }

}

위에 만든 green과 red는 max-width로 값이 같지만, blue값을 주려는 미디어쿼리는 min-width로 값이 다르기 때문에 캐스케이딩 문제가 아니라서 위로 두든 밑으로 두든 똑같이 되긴 되더라. 근데 웬만하면 밑에다 설정.

 

이제, 우리가 크롬에서 F12를 누르면 콘솔창이 뜰텐데 거기에 오른쪽 상단에 보면 밑에 그림처럼 생긴 애를 누르면

 

단축키 : 컨트롤 + 쉬프트 + M

생기는 창 위에 보면 반응형, 핸드폰 종류마다의 W x D가 뜰텐데, 여기선 이상하게도 500px이상이건 나발이건 우리가 적은 코드가 적용되지 않는 것을 볼 수가 있다. 무슨 문제가 있는걸까??

 

<head> 하위 태그에 ★ <meta name="viewport" content="width=device-width, initial-scale=1.0">를 추가해주어야 모바일에서도 적용되는 것을 확인할 수가 있다! ★ 그냥 마법이라 생각하자!

 

섹션5. 미디어쿼리(Media query) - 2 : 응용

flex 시간에 배운 holy grail layout 때의 예제를 new file에 복붙하면 준비 완료!

https://opentutorials.org/course/2418/13526

 

flex - 생활코딩

CSS의 flex는 엘리먼트들의 크기나 위치를 쉽게 잡아주는 도구입니다. 지금까지 레이아웃과 관련된 다양한 속성들이 있었지만 그리 효과적이지 않았습니다. flex를 이용하면 레이아웃을 매우 효과

opentutorials.org

이 예제의 결과값을 최대한 줄여보면 다음과 같이 main만 푹 줄어들고 nav와 aside부분은 널찍한 것을 볼 수가 있다. 근데, 이걸 모바일 환경에서 보면 더욱 보기 좋은 레이아웃은 아니다.

flex - holy grail layout 기본 형태

응용에선 이 레이아웃에 미디어 쿼리를 적용해서 제일 먼저 main 태그가 가장 위쪽에 나오고 nav가 그 아래쪽으로 내려가도록 하고 aside는 제일 밑에 나오도록 하는 형태로 만들어보고자 한다. 여기있는 화면이 예를 들어, 500px이하로 작아지면 그림과 같은 3단이 분리되면서 main이 맨위로 그다음 nav, aside 이런식으로 만들어보고자 한다!

 

일단, 이 화면이 모바일 화면에선 어떻게 보여야 하는지 코드로 작성을 먼저 해보고 나서 미디어 쿼리로 처리해볼 것이다!

 

먼저 flex때 배웠던 것처럼 nav, main, aside를 포괄하는 태그는 <section>이다. 정확히 하면 .content란 class 속성값을 가진 태그겠지만, 이 content란 속성값을 가진 곳에 flex-direction의 값으로 column을 주게 되면 다음과 같아진다.

.content{flex-direction:column;} 추가

수평으로 3단이었던 형태가 수직으로 3단이 되게 된다! (그럼 여기에 웹브라우저상 main이 위로 오게 하고 싶으니까 각 아이템에게 order값을 주면 되겠네? : 이건 내 생각이고, 맞긴 맞는데 지금 그게 중요한 게 아니고,)

 

그럼 이 content의 CSS영역 밑에다 미디어 쿼리를 추가한다. 다음과 같이

@media (max-width: 500px){

  .content{

   flex-direction: column;

  } (의미 : 500px일때까지는 content에 속하는 애들을 수직으로 정렬시킨다.)

 

 }

 

이렇게 되면, 화면의 크기가 500px이상일 땐 수평이다가 이하로 작아지면 수직으로 변하는 것을 볼 수가 있다!!! ★

 

화면을 줄이면서 생기는 오른쪽의 선과 아래쪽의 왼쪽 선이 누구에 의해 생기는지 콘솔창을 통해 확인해보니 오른쪽의 선은 .content nav임을 알 수가 있었다.

 

.content nav {

  border-right: 1px solid gray;

} 얘다.

그럼 얘를 카피해서 @media 부분에 붙여넣는다. 아래와 같이,

 

@media (max-width: 500px){

  .content{

   flex-direction: column;

  }

  .content nav {

   border-right: none;

  } (오른쪽 선은 필요 없응게 border-right의 값을 none;으로 처리.)

 

} 

 

★ 그런데 적용되지 않는 것을 알 수가 있었다. 왜 그런고 하니~?

위의 미디어 쿼리의 코드가 .content nav보다 위에 있었기에 우선순위에 밀려서 적용이 되지 않았던거임! 그러니 순서를 아래로 바꿔주면 적용이 된다. 다음과 같이 말이다. ★

.content nav {

  border-right: 1px solid gray;

  }

@media (max-width: 500px){

  .content{

   flex-direction: column;

  }

  .content nav {

   border-right: none;

  }

} (미디어 쿼리의 끝)

 

이젠 문서 맨 아래에서 왼쪽에 생기는 선이 누구에 의해 생기는지 알아보자.

알아보니, aside에 지정된 border-left가 원인이었다!

아까와 같은 방식으로 ‘캐스캐이딩’에 근거해서 미디어 쿼리에 우선순위를 두기 위해,

 

@media (max-width: 500px){

  .content{

   flex-direction: column;

  }

  .content nav, .content aside {

   border: none; 

  }

} (미디어 쿼리의 끝)

 

.content aside 밑에 위의 미디어 쿼리 코드를 적어주면 적용되는 것을 알 수가 있다잉!! ★

근데 값이 똑같으니 중복할 필요는 없으니까 .content nav에 콤마찍고 .content aside라고 적어주기만 하면 된다.

(border-right, left 굳이 여러줄로 표현할 필요는 없으니 아예 border값을 none으로)

 

콘솔창을 열어서 nav와 aside 부분을 보면 내용은 거의 없지만, 차지하는 크기는 넓은 것을 볼 수가 있다. 그건 왜 그러냐? 콘솔창에 보면 nav와 aside에 flex-basis 값이 설정되어 있는 것을 볼 수가 있다! 여기다 만약, nav나 aside의 크기만큼으로 변경해주고 싶으면 얘네들의 flex-basis값을 auto;로 지정해주면 된다. 어디다가? 다음과 같이 말이다.

@media (max-width: 500px){

  .content{

   flex-direction: column;

  }

  .content nav, .content aside {

   border: none;

   flex-basis: auto;

  }

} (미디어 쿼리의 끝)

 

이제 맨 처음에 생각했던 것처럼 nav, main, aside 순에서 main을 먼저 보이게끔 하고 싶으면 저번에 배운 order 속성을 활용하면 된다! (★ order값을 미디어 쿼리 내에서 줘야 한다! 아니면, 500px이하일때가 아니라 원래의 순서값 자체가 바뀌어버리니까 조심!!)

 

@media (max-width: 500px){

  .content{

   flex-direction: column;

  }

  .content nav, .content aside {

   border: none;

   flex-basis: auto;

  }

  main{

   order: 0;

  }

  nav{

   order: 1;

  }

  aside{

   order: 2;

  }

} (미디어 쿼리의 끝) 이렇게 말이다. 배웠듯, order값이 0이라는 건 첫 번째 순서라는 것이다.

 

 

★★★ 즉, 여태동안 미디어 쿼리에 적용한 내용들을 풀어서 설명하면, 화면의 크기가 최대 500px까지는 즉, 500px이하까지는 content에 속하는 nav, main, aside를 ‘열’을 기준으로 정렬시킬 것이며, nav, aside에 지정된 border값을 꼴보기 싫으니 안 보이게할 것이고 얘네들의 지정된 flex-basis값을 자동으로 원래 크기에 맞게 만들 것이며, 화면의 크기가 500px이하부터는 main을 첫 번째로 그 다음 nav, aside순으로 수직으로 화면에 나오게 하고 싶다!를 만들어 보았다. ★★★

 

만약, 모바일에선 광고가 있다는 가정하에 보이기 싫다면, aside에 display:none;을 하면 모바일 화면에선 아예 광고가 나오지 않는다.

 

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 이거 추가해야 모바일에 적용되어 보인다!

 

 

저작자표시

'프로그래밍 언어 > CSS 공부' 카테고리의 다른 글

[인프런/생활코딩] 섹션5. float (1) - 기본  (0) 2021.03.04
[인프런/생활코딩] 섹션5. Multi column(다단) 기능  (0) 2021.03.04
[인프런/생활코딩] 섹션5-4~5. flex : holy grail layout? flex 기타 속성들?  (0) 2021.03.02
[인프런/생활코딩] 섹션5-1~3. flex_diplay 속성? flex-direction? flex-grow & shrink??  (0) 2021.03.02
[인프런/생활코딩] 섹션4. 레이아웃 기본 (3) position-fixed?  (0) 2021.02.26
'프로그래밍 언어/CSS 공부' Related Articles more
Comments