프론트엔드/HTML, CSS, JS기본

브라우저 스타일 초기화

코딩사랑꾼 2023. 7. 29. 22:51

브라우저마다 기본적으로 제공한 스타일이 있습니다.

예를 들어, Chrome에서 <body>태그는 margin이 8px로 자동 부여되고 있습니다.

 

사용자가 어떤 브라우저를 사용할 지 모름으로,

작업 전 브라우저 스타일을 초기화하는 게 좋습니다.

 

브라우저 스타일 초기화

1. 구글 검색창에 reset.css cdn 검색하며,

cdnjs.com 혹은 jsdelivr.com 사이트로 뜬 링크를 열어 줍니다.

 

 

2. reset.css 파일을 확인 후, Copy HTML을 하시고

HTML파일에 붙일 준비를 합니다.

 

가끔 reset.css 파일과 reset.min.css 파일 두 개로 존재할 때 있습니다.

min(Minify 단어의 약어) 키워드는 파일이 난독화나 경량화되었다는 것을 의미합니다.

min이 없는 거는 원본파일일 것을 지향하죠.

 

외부에서 가져와 사용하는 플러그인, 라이브러리를 직접 수정할 상황에는

원본 파일이 필요하고,

수정 안 할 거면 그냥 min파일을 사용해도 됩니다.

 

3. HTML 파일 <head>영역에 방금 복사한 내용을 붙여줍니다.

주의해야할 점은, 브라우저 초기화가 가장 먼저 적용되어야 하니,

main.css링크 위에 붙여 줘야 합니다.