반응형 웹 디자인 ( @media 사용법 , 모바일 우선, 데스크톱 우선)
펌 : https://www.codingfactory.net/10534 반응형 웹디자인 웹사이트의 레이아웃을 만들 때 방문자가 사용하는 모니터의 화면 해상도를 고려해야 합니다. 너무 크게 가로폭을 만들면 작은 해상도의 모니터로 접속했을 때 가로 스크롤이 생겨 컨텐츠를 보는 게 불편하기 때문입니다. 특히 스마트폰이나 태블릿 등 모바일 기기는 화면이 작기 때문에 가독성에 더욱 신경써야 합니다. 이러한 문제를 해결하는 방법 중의 하나가 반응형 웹디자인입니다. 해상도에 따라 가로폭이나 배치를 변경하여 가독성을 높이는 것입니다. @media 이러한 작업을 할 수 있게 해주는 것이 @media입니다. 예를 들어 @media ( max-width: 768px ) { body { color: red; } } 와 같이 하면, 웹브라우저의 가로 해상도가 768px 이하일 때 글자색을 빨간색으로 바꿉니다. 즉, 모바일 기기의 해상도를 고려하여 적절히 CSS를 수정하거나 추가하는 것이 가능합니다. 주의할 점은 가로폭 조정을 위해서 HTML 문서의 <head>와 </head> 사이에 다음의 코드를 넣어야 한다는 것입니다. <meta name="viewport" content="width=device-width, initial-scale=1"> 모바일 우선(Mobile First) VS 데스크톱 우선(Desktop First) 작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 합니다. 모바일 우선(Mobile First) 작은 가로폭부터 큰 가로폭 순서로 만들고, min-width를 이용합니다. A @media ( min-width: 768px ) { B } @media ( min-width: 1024px ) { C } 기본 모양은 A, 768px 이상일 때는 B, 1024px...