CSS - [ 브라우저 스타일 초기화 ]

html에서 div 태그 생성 후 css에서 가로, 세로 크기와 배경색을 설정해 주고 브라우저에서 확인 해 보면 해당 내용 주변에 흰색으로 여백이 생겨있는 걸 확인할 수 있다.

왼쪽과 윗부분에 여백이 있음

 

우리는 따로 여백을 설정해 준 적이 없다. 개발자 모드에서 확인 해보면 바디 태그에 margin이 8px 들어가 있는 것을 확인할 수 있다. 이는 크롬 브라우저에서 기본적으로 제공하는 여백이고, 다른 브라우저로 넘어가면 조금씩 다를 수 있다. 브라우저를 제작할 때 조금씩 다른 결과물이 나올 수 있기에 브라우저에서 기본적으로 제공하는 css 스타일을 많은 경우에 초기화 하고 시작하는 게 좋다.

 

 

그러면 브라우저의 스타일을 초기화하는 방법을 알아보자. 구글에서 reset.css cdn 검색 후 jsdelivr 사이트로 들어간다.(다른사이트거 이용해도 괜춘) 여기서 reset.min.css (min은 파일이 난독화나 경량화 되었다는 것을 의미) 을 COPY HTML 해서 vs code의 index파일에 링크 태그를 이용해서 넣어준다. 이 때 브라우저의 스타일을 초기화하는 css를 가져오는 것이므로 추가적으로 작성하려는 main.css 보다 먼저 동작할 수 있게 앞서 작성해준다.

 

그런다음 브라우저를 확인 해 보면 앞서 있던 여백이 사라진 것을 확인할 수 있다!!

---