지금음 모바일에서 웹페이지를 여는 경우가 많으므로 PC 와 모바일 환경에 맞게 디자인하기위해서 반응형 CSS 태그를 활용해야 하므로 태그는 @media 를 시작해서 max-width 속성을 넣으면 px 이하일떄 변하고, min-width 속성은 px 이상인 경우에 반응하게 됩니다.
아래의 예제와같이 @media (max-width:500px){} 은 홈페이지가 500px 이하일떄에 background 배경은 red, font-size 는 11px로 변하게 됩니다. 그리고 @madia(max-width:600px){} 음 화면이 600px 이하일때 background 는 green, font-size는 20px 로 변하게 됩니다. @madia (min-width:601px){} 은 화면이 601 이상일때 background 는 yellow, font-size 는 30 으로 변하게 됩니다.
직접 화면을 열어보게되면 601 화면 이상일떄에 배경은 노랑, 폰트크기는 30px 로 변하며, 화면이 600 이하인 경우 배경이 그린, 폰트크기는 20, 화면이 500 이하인 경우 배경은 빨강, 폰트크기는 11 로 변하게 됩니다.
