1. 웹 브라우저 스타일을 초기화 해야하는 이유
크롬, 사파리, 엣지 등의 다양한 브라우저들은 제각기 다른 웹 스타일이 기본적으로 제공되기 때문에 내가 코딩한 것이 브라우저마다 다르게 보일 수도 있다.
따라서 브라우저 기본 스타일 설정을 초기화하는 작업이 필요하다.
2. 초기화 하는법
구글에 reset.css cdn을 검색한다.
또는 https://www.jsdelivr.com/package/npm/reset-css
reset.min.css를 Copy HTML버튼을 눌러 복사해 <head>태그 안에 링크를 붙여넣는다.
min은 경량화된 파일이라는 뜻이다.
파일 자체에 수정을 가할 것이 아니기 때문에 원본 파일을 쓸 필요 없이 min파일을 사용해 파일의 용량, 전송량을 줄이는 것이 좋다.
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">
<link rel="stylesheet" href="./main.css">
<title>Document</title>
</head>주의점!
브라우저가 기본적으로 제공하는 css를 제거하려는 것이기 때문에 새로 작성하려고 하는 main.css보다 앞에 작성해야 한다.
코드펜에서 초기화 하는법
- css탭에서 오른쪽 위에 있는 톱니바퀴를 누른다.
- CSS Base를 Reset으로 설정한다.
꿈꾸는 사람