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

슈퍼만쓰·2022년 1월 17일
0
post-thumbnail

들어가며

요즘에는 굉장히 많은 종류의 브라우저가 존재한다. 그리고 브라우저마다 각각의 기본 스타일이 존재하는데 그러다보니 아래와 같이 따로 패딩 마진을 주지 않아도 사진과 같이 기본 여백이 존재하는 것을 볼 수 있다.

.box {
  width: 100px;
  height: 100px;
  background-color: #262626;
}

이번 포스팅에서는 이러한 기본 스타일을 말끔히 제거하는 법을 알아보자.

해결법

먼저 아래의 링크로 접속한다.

https://www.jsdelivr.com/package/npm/reset-css

그럼 다음 페이지를 볼 수 있는데, /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 원본 소스가 있지만, 수정해서 사용할 것이 아니니 굳이 요걸 건들일 필요는 없다.

profile
https://mahns.oopy.io/ 블로그 이전

0개의 댓글