개념정리 :: 크로스 브라우징, Reset.css vs Normalize.css

이 블로그에 정리되어있는 모든 개념들은 학습 개념으로 혼자 정리한 내용입니다.
잘못 기술한 부분이 있을 수 있으니 발견하시면 언제든지 지적해주세요😄

위코드 스터디 1팀 팀원분이 올려주신 수정코드!!

 

위코드 사전스터디 최고!! 오늘도 사전스터디 미팅이 있는 날인데, 감사하게도 팀원분이 코드를 살펴봐주셨다 ㅜㅜ 내가 그렇게 받고 싶었던 코드피드백 흑흑 감격의 눈물 😭 한번도 들어본적이 없었지만, 1팀 팀원분덕에 알게된 새로운 개념, 크로스 브라우징에 대해 정리하고 넘어가도록 하겠다.

 

크로스 브라우징이란?

: 웹 페이지가 웹 브라우저의 종류에 구애받지 않고 제작자의 의도에 맞게 보여지거나 동작할 수 있게 하는 작업이다.

 

내가 작성한 스타일대로 화면에 나타나지 않는 이유?

웹 브라우저마자 기본값으로 제공하는 스타일이 있어서 개발자가 작성한 대로 화면에 나타나지 않는다. 즉 브라우저마다 기본으로 제공하는 스타일을 초기화시켜서 크로스 브라우징을 구현해야한다.

 

Reset.css

: 모든 스타일이 0으로 reset 되어있는 상태로 내가 원하는 대로 1부터 끝까지 스타일링하면 된다. 

reset.css에 들어가서 css코드를 복사 후 붙여넣으면 끝!

 

Normalize.css

: reset.css와는 조금 다르게 모든 것을 0로 만드는 대신 유용한 기본값은 유지하기 때문에 스타일이 조금씩은 적용되어 있다. 아래의 코드를 html의 head부분에 넣어주면 끝!

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">

 

* normalize.css는 브라우저마자 다르게 나타나는 HTML요소의 기본값을 모든 브라우저에서 똑같게 나타나도록 하기 위해 스타일을 재설정하는 것이고, rest.css는 모든 HTML의 스타일 기본값을 0으로 초기화한다는 차이가 있다.