반응형
반응형 기술이 나오기 전 홈페이지는 PC 버전 따로, 모바일 버전 따로, 여기에 태블릿 버전 따로...
여러 기기에 대응하기 위해서는 여러 버전의 페이지를 만들어야했다.
하지만 반응형 기술이 나오면서 이제는 하나의 화면으로 여러 화면에 맞게 알아서 조절되어 나오도록 만들게 되어
유지보수에 상당히 유리하게 구현해준다.
아래는 딱 핵심만 넣어놨다.
1 번은 일반적인 화면(PC 화면) 에서 볼때의 style 이다.
2 번은 화면 너비가 최고 480px 인 화면에서만 적용되는 style 이다.
<style>
.table { } /* 1번 */
@media screen and (max-width:480px) {
.table { } /* 2번 */
}
</style>마치 프로그래밍 언어에서 쓰이는 if 문과 비슷한 역할을 한다.
같은 table 이라는 class 이지만 화면크기에 따라 다르게 적요할 수 있는 것이다.
반응형