브라우저 스타일 초기화

크로스 브라우징이 필요한 이유에 대해 알아봅시다.

 

크로스 브라우징 : 조금은 다르게 구동되는 여러 브라우저에서 동일한 사용자경험(같은 화면, 같은 동작 등)을 줄 수 있도록 제작하는 기술, 방법

 

위와 같이 <div>라는 태그에만 style을 지정해준 예시를 살펴보겠습니다.

해당 html 문서를 실행하여 웹사이트에서 '개발자도구'를 통해 확인해보면 아래와 같이 body 태그에는 아무런 스타일지정을 하지 않았음에도 Styles에 margin:8px; 가 설정되어있는 것을 볼 수 있습니다.

여기서 body 태그에 지정된 styles은 크롬 브라우저에서 제공하는 설정이며, 동일한 웹페이지를 다른 브라우저에서 열게되면 조금씩 상이하게 style이 확인될 수 있습니다.

그래서 개발을할때에 브라우저의 기본적인 styles을 초기화하면서 개발해야합니다.

 

https://www.jsdelivr.com/package/npm/reset-css

jsDelivr - A free, fast, and reliable CDN for Open Source

reset-css 파일 중 reset.css로 작성된 부분이 원본이고, reset.min.css은 원본의 css파일을 용량이 제일 작은상태로 압축해놓은 버전이므로 가급적 압축된 버전인 reset.min.css 이용을 권장한다.

reset.min.css를 [copy HTML] 복사하여 작성중인 html 문서에 추가하되, 위치는 반드시 css파일이 선언된 link태그 이전에 작성해야 반영된다.

reset을 적용한 뒤 웹사이트를 새로고침하여 개발자도구를 확인해보면 기존에 보았던 body 태그의 margin 설정이 없어진것을 볼 수 있다.

이처럼 개발을 진행할때에는 먼저 브라우저의 기본 스타일 설정을 초기화 한 뒤 개발하는 것을 권장한다.

 

---

https://codepen.io/

CodePen

코드펜 사이트에서 브라우저 스타일 설정을 초기화하여 이용을 원하는 경우에는 CSS 부분의 설정(톱니바퀴)-CSS Base를 Reset 으로 선택해주면 된다.