6일차_브라우저 스타일 초기화 reset.css cdn_20210630

브라우저 스타일 초기화 reset.css cdn

 

다음과 같이 css 파일을 적용한 후

html에 css 로 div 태그에 내용을 입력

html과 css의 결과 화면

그런데 내가 설정하지 않은 margin이 들어가있다?

브라우저마다 다른 설정값을 가지고 있을수 있고, 이는 사용자가 보기에도, 브라우저마다 개발 의도와는 다른 화면을 보여주게 될 수도 있다. 크로스브라우징 이슈 방지를 위해 브라우저 스타일 초기화 하는 방법을 살펴보자.

 

reset.css cdn 검색 : 브라우저의 스타일을 초기화하는 css

브라우저 초기화를 위한 reset.css 주소를 가져올 수 있는 사이트

위처럼 검색해서 reset.css min의 html양식 주소를 복사하여 index.html의 head태그 내부에 추가해준다.

reset.min.css가 추가된 모습

적용되면 다음과 같이 기본적으로 적용된 margin이 사라진 것을 확인할 수 있다.

크롬에 설정되어있던 기본 margin값이 사라졌다

그렇다면 codepen.io에서는 이를 어떻게 적용할까?

css 설정부분에서 CSS Base를 Neither에서 Reset으로 변경후 저장해주면 된다.