웹 브라우저 스펙 차이에 따른 스타일링 이슈는 어떻게 해결하나요?

웹 브라우저와 웹 표준

 

웹 브라우저란 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어를 뜻한다.

 

웹 브라우저의 종류는 모질라 파이어폭스, 구글 크롬, 인터넷 익스플로러, 오페라, 사파리, 브레이브 등 아주 다양한데,

 

이러한 웹 브라우저들은 웹 브라우저의 종류에 따라, 버전에 따라 어떤 기능을 어떻게 지원하는지 전부 상이하기 때문에

 

웹 브라우저의 종류와 버전에 따라 동일한 사이트가 다르게 보이고 다르게 작동한다는 문제가 발생하게 된다.

 

이 문제를 해결하기 위해 제안된 것이 바로 웹 표준이다.

 

웹 표준이란 웹 브라우저의 종류 및 버전에 따른 기능 차이에도 호환이 가능하도록 제시된 표준으로, HTML, CSS, Javascript 등에 대한 규정을 담고 있다.

 

스타일링 이슈 수정 방법

 

그러나 위의 웹 표준을 준수하지 않고 CSS를 작성할 경우 웹 브라우저의 종류와 버전에 따라 동일한 사이트가 다르게 보이는 스타일링 이슈가 발생할 수 있고, 이 경우 다음의 방법을 사용할 수 있다.

 

환경 생성 후 이슈 확인

 

직접 환경을 생성하고 프로젝트를 실행시켜보며 이슈를 확인하고 수정할 수 있다.

 

W3C CSS Validation Service 이용해 웹 표준 준수 여부 확인

 

The W3C CSS Validation Service

 

W3C CSS Validation Service는 CSS 문서에 대한 웹 표준 준수 여부를 확인하고 표시해준다.

 

URI 입력, 파일 업로드, 코드 삽입 중 편한 방식으로 CSS 문서를 전달하면

 

CSS 문서 내에서 웹 표준과 다르게 작성된 부분을 확인할 수 있다.

HTML 문서에 대한 웹 표준 준수 여부는 W3C Markup Validation Service에서 확인할 수 있다.

The W3C Markup Validation Service

 

reset css, normalize css

 

웹 브라우저에는 웹 브라우저 자체의 기본 스타일시트가 있다.

 

이를 user agent stylesheet라고 하는데, 기본적으로 user agent stylesheet는 가장 낮은 우선순위를 갖지만*

 

사용자 및 제작자가 관련하여 아무런 스타일도 지정해주지 않을 경우 user agent stylesheet가 적용된다.

 

제작자의 스타일이 정상적으로 적용되도록 하고, 브라우저마다 공통된 스타일이 적용되도록 하기 위해

 

이 user agent stylesheet를 초기화할 수 있다.

 

user agent stylesheet를 초기화하는 방법으로는 다음의 두 가지가 있다.

• reset css: user agent stylesheet를 전부 초기화한다.
• normalize css: user agent stylesheet를 대부분 초기화하되 기본적인 디자인은 유지한다.

일반적으로는 normalize css가 사용된다고 한다.

 

* 참고) CSS 서론 中 스타일 우선순위

 

 

 

 

 

---

다음 자료를 공부하여 정리한 글로, 아직 많이 부족해 틀린 내용이 있을 수도 있습니다.

 

혹시 있다면 댓글로 알려주세요. 수정하고 더 공부해나가겠습니다-

 

css reset 초기 세팅

W3C Markup Validation Service