각 브라우저마다 설정된 스타일이 적용되지 않는 이유를 이해하려면 브라우저 버전과 지원 여부에 대한 개념을 알아야 합니다. 이와 관련해, 브라우저 버전, Can I Use와 **MDN (Mozilla Developer Network)**에 대해 간략히 설명드리겠습니다.
브라우저는 지속적으로 업데이트되며, 각 업데이트는 새로운 기능을 추가하거나 기존 기능의 동작을 변경합니다. 특정 기능이나 CSS 속성이 모든 브라우저에서 동일하게 작동하지 않는 경우가 많습니다. 예를 들어, Chrome, Firefox, Safari, Edge 등의 브라우저는 각기 다른 버전을 갖고 있으며, 같은 기능이 다른 방식으로 구현되거나, 지원 여부가 다를 수 있습니다.
Can I Use는 웹 개발자가 특정 웹 기술이나 CSS 속성이 다양한 브라우저에서 지원되는지 확인할 수 있는 사이트입니다. 예를 들어, overflow-anchor가 모든 브라우저에서 동일하게 지원되지 않을 수 있습니다. Can I Use에서 해당 속성을 검색하면 어떤 브라우저와 버전에서 지원되는지, 어떤 브라우저에서는 지원되지 않는지를 쉽게 확인할 수 있습니다. 저는 보통 구글에 caniuse overflow-anchor 로 검색한답니다 😊
MDN Web Docs는 웹 개발자들이 HTML, CSS, JavaScript 등의 웹 기술에 대한 문서와 예제를 참고할 수 있는 사이트입니다. MDN에서는 각 기능이나 속성에 대해 상세한 설명과 함께, 지원되는 브라우저 목록을 제공하며, 해당 기능의 사용법, 예제 코드, 호환성 정보 등을 쉽게 찾을 수 있습니다.
앞으로 개발하게 되면서 Can I Use, MDN에 대해서 매우 유용하게 쓰일거에요. 브라우저마다 기능 지원이 다를 수 있고, 최신 기술이 모든 브라우저에서 작동하지 않을 수 있습니다. 이를 확인하기 위해서는 Can I Use와 MDN 같은 도구를 사용해 브라우저별 지원 여부를 확인하고, 호환성을 고려한 개발을 하는 것이 중요합니다!
지금까지 배운 개념을 참고하여 실습 코드로 다시 공부해볼까요? 😎