개발자

네이버 앱 css 적용 범위

2024년 08월 14일조회 72

안녕하세요 리액트로 웹 페이지를 만들면서, 브라우저별로 css가 잘 적용이 되었는지 확인을 하면서 궁금한게 생겨서 질문을 남깁니다. 크롬이나 웨일에서는 잘 적용이 되는 부분들이 네이버 앱을 통해 웹 페이지에 들어가는 경우에는 css가 적용되지 않는 부분이 있더라구요.. 적용하는 css마다 일일이 확인을 해야하는건지.. 아니면 caniuse에서 어떤 브라우저의 어떤 버전에 해당되면 되는건지 궁금합니다. 혹시 같은 고민을 하고 계시거나 정보를 아시는 분이 있으면 좋겠네요

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 0

답변이 없을 때 보이는 아이콘

첫 답변을 기다리고 있어요.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 08월 14일

각 브라우저는 웹 표준을 해석하고 구현하는 방식에 따라 약간 다르게 작동합니다. 이 방식의 차이 때문에 CSS가 일부 브라우저에서 예상대로 작동하지 않을 수 있습니다. 네이버 앱 인앱 브라우저의 경우, 각 모바일 디바이스의 기본 웹뷰(Webview)를 사용합니다. Android의 경우 일반적으로 Chrome 기반인 반면, iOS는 Safari 기반이므로 서로 다른 CSS 규칙을 적용하기도 합니다. 예를 들어, Flexbox 같은 최근 CSS 기능은 Safari와 Chrome에서 조금씩 다르게 동작할 수 있습니다. 따라서 네이버 앱 인앱 브라우저에서 문제가 생기는 경우 Android와 iOS 각각에서 문제를 확인해 보아야 할 것입니다. caniuse 사이트를 통해서 각 브라우저 버전에 대한 CSS 속성 지원 여부를 확인하실 수 있습니다. 하지만 이 역시 완벽한 해결책은 아닙니다. 그 이유는 caniuse 사이트가 모든 기능과 속성을 커버하지 못하며, 하위 호환성 뿐 아니라 컴포넌트나 레이아웃 등 복잡한 CSS 문제를 완전히 해결하지 못하기 때문입니다. 실제로 css가 적용되지 않는 구체적인 사례나 코드 없이 이론적으로 말씀드리자면, 크로스 브라우징 이슈를 확인하려면 각 브라우저와 버전별로 테스트를 진행하시는 것이 가장 정확합니다. 웹 디버깅을 위한 도구들을 사용하여 문제의 원인을 찾고, 해결 방법을 찾는 것이 중요합니다. 혹시 반응형 디자인에 있어서 네이버 앱에서 깨지는 부분이 있다면 media query를 활용하는 것도 좋은 해결법일 수 있습니다. 그럼에도 문제가 해결되지 않는다면, 문제가 발생하는 특정 부분의 코드와 어떤 현상이 나타나는지 구체적으로 말씀해주시면 보다 구체적인 답변을 드릴 수 있겠습니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!