body {
margin : 0;
padding : 0;
}
.box{
width : 300px;
height : 150px;
background : tomato;
}
스타일링을 했을때 여백 설정하지 않아도, 알아서 여백 공간이 생긴다.
만약 이 여백을 없애고 싶으면 다음과 같이하면 된다.
이러한 초기화 과정을 reset-css로 이용해 보겠다.
reset-css 사이트에 들어가서 html코드 복사후 붙혀넣기를 하는데, 우리가 기존에 사용하던 CSS연결 코드보다 위에 있어야 한다. 이건 반드시 그래야 한다.
<head>
<meta charset="UTF-8">
<title>콘텐츠 구분 예제</title>
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
이렇게 하면 아까전에 번거롭게 CSS에서 초기화 하지 않고도 모든 태그 기능들이 초기화가 되어 버린다.
이것은 모든 브라우저가 제공하는 스타일을 없애고 내가 만드는 스타일로 새롭게 채워넣겠다 라는 뜻이다.