반응형 웹을 위한 CSS @media

디바이스에 따라 반응형 웹을 보여주기 위한 CSS의 미디어 쿼리(Media Query) 간단한 예제를 보면서 알아보자. #greeting { text-align: center; font-size: 32px; } @media (max-width: 800px) { /* width 값이 800px 이하일때 적용될 스타일을 여기에 작성 */ #greeting { font-size: 24px; } } 먼저 데스크탑 퍼스트로 작성한 코드이다. (데스크탑 우선으로 작성했다는 뜻) 미디어 쿼리 속성을 max-width 로 800px 을 주면 width 값이 800px 이하일 때 #greeting 의 font-size 가 32px 에서 24px 로 변경됩니다. 그리고 기존 text-align 속성은 유지된다. #gree..

2022.02.20