Bootstrap] Media-quary / 폰 화면에 반응형으로 만들기

Media query란 무엇인가? 

특정 상황이 됐을 때 적용되는 css 코딩 

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

 

자주 쓰이는 Media query 타입 

 

Media print 

 

h1 {color: red;} 이라하면 화면에서 h1색을 빨간색으로 바꾸라는 것이지만

 

@media print {

      h1 {color: red;}

} @media print로 감싸면 print할 때만 빨간색으로 하라는 의미가 된다.

 

 

Media screen 

break point 사용

화면을 점점 줄였을 때 

어느 지점에서 설정된 화면으로 전환할 지 설정 

 

 

Media (max-width: 880px) {

  h1 {color: red;}

}

 

랩탑이 대략 1200 ✖️ 264 

태블릿이 대략 880 ✖️ 264 사이즈

 

~ 880px까지 

폰이나 태블릿 사이즈일 땐 빨간색 

더 넘어가서 랩탑 데스크탑되면 기본색

 

 

 

Media (min-width: 880px) {

  h1 {

         color: red;

         font-size: 60px

  }

}

데스크탑, 랩탑 사이즈 일 때 빨간색

태블릿 사이즈 880px로 작아지면 기본색인 검은 색

글씨 크기도 60px로 변한다. 

 

 

Media (min-width: 880px) and (max-width: 1000px) {

  h1 {

        font-size: 60px

 }

}

880px ~1000px 사이 일 때만 적용

 

---

 

모바일 화면에 친화적인지 확인하는 법 

구글에서 mobile friendly test를 검색하면 

구글에서 제공하는 서비스가 있다.

여기에 원하는 페이지를 복사해서 넣으면 

폰 화면에 적합한지 봐준다. 

 

네이버 사전을 데스크탑 주소를 넣었더니 모바일 친화적이지 않다고 나왔다.

 

 

---

 

모바일 친화적으로 만들기 

모바일 친화적으로 만드는 방법은 2가지가 있다.

 

첫 번 째 방법은

m.facebook.com 페이스북 모바일 사이트처럼 

모바일 사이트를 따로 만드는 방법이고,

 

두 번째 방법은 

해당 사이트를 반응형으로 만드는 것이다.

 

 

 

 

지금 만들고 있는 홈페이지도 (강의로 공부 중)

데스크 탑에서 화면을 볼 땐 괜찮았는데

더 작은 폰 화면으로 보면 

만들어 놓은 배치가 틀어진다. 

데스크탑 화면 

작은 화면에서 이미지 사라짐

 

이 때 경우 CSS media query breakpoint를 사용하여 반응형을 만든다. 

1028px보다 작을 때 

텍스트는 가운데 정렬하고,

이미지도 가운데로 반듯하게 오게 만든다.