요즘에는 굉장히 많은 종류의 브라우저가 존재한다. 그리고 브라우저마다 각각의 기본 스타일이 존재하는데 그러다보니 아래와 같이 따로 패딩 마진을 주지 않아도 사진과 같이 기본 여백이 존재하는 것을 볼 수 있다.
.box {
width: 100px;
height: 100px;
background-color: #262626;
}
이번 포스팅에서는 이러한 기본 스타일을 말끔히 제거하는 법을 알아보자.
먼저 아래의 링크로 접속한다.
그럼 다음 페이지를 볼 수 있는데, /npm/reset-css@5.0.1/reset.min.css
를 클릭하여 COPY Html을 누른다. 이후 아래 소스코드처럼 html에 주입을 해주면 끝이다.
이때, CSS link 중에는 가장 상단에 위치하게 하여 최초로 실행되게 하자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
</head>
<body>
</body>
/npm/reset-css@5.0.1/reset.css
원본 소스가 있지만, 수정해서 사용할 것이 아니니 굳이 요걸 건들일 필요는 없다.