• 스타일 호환성 이해하기

같은 CSS 속성과 값이라도 웹 브라우저의 종류(엣지, 크롬, 사파리, 파이어폭스 등)에 따라 조금씩 다르게 보일 수 있습니다. 지금은 인터넷 익스플로러의 공식 지원이 종료됐지만, 몇 년 전만 해도 인터넷 익스플로러는 CSS 사양을 제대로 구축하지 않은 경우가 많아서 CSS를 사용하는 모든 개발자의 골칫거리였습니다. 다행히 지금은 인터넷 익스플로러가 엣지로 대체돼 호환성 문제가 많이 개선됐습니다. 하지만 최신 CSS3 스펙은 여전히 브라우저마다 조금씩 다르게 구현된 부분이 많으므로 스타일 호환성을 이해하고 있는 것이 좋습니다.

• 반응형 디자인과 미디어 쿼리 학습하기

CSS의 세 번째 버전인 CSS3는 반응형 디자인을 처리할 수 있는 속성이 많이 추가됐습니다. 그중에서 가장 대표적인 것이 바로 미디어 쿼리(media query)입니다. 미디어 쿼리를 사용하면 웹 페이지를 렌더링하는 장치에 따라 다른 스타일을 적용할 수 있습니다. 예를 들어 데스크톱과 스마트폰의 화면 크기에 따라 각기 다른 스타일 처리가 가능합니다. 요즘에는 반응형 디자인을 적용하지 않는 웹 페이지가 상대적으로 적기 때문에 반드시 미디어 쿼리를 통한 반응형 디자인 적용법을 학습해야 합니다.