Frontend/CSS

04. CSS Reset

개발개발빈이 2022. 3. 29. 21:20

○ Reset의 필요성 (스타일 초기화)

   - 브라우저들은 각각 다른 기본 스타일을 가지고 있기 때문에

     같은 CSS 스타일을 적용해도 화면에 출력되는 모습이 다를 수 있다.

     이런 문제를 해결하기 위해서 스타일을 모두 초기화해서 동일하게 만든 뒤

     CSS 스타일을 추가하면 브라우저와 상관없이 같은 화면이 출력되게 만들 수 있는데

     이를 reset이라고 한다. 

 

○ Reset 하는 법

    - 보통 reset.css 파일을 하나 저장해두고 import하여 사용

<!DOCTYPE html>
<html>
    <head>
        <title>06_reset.html</title>

        <!-- reset.css import / 가장 상단에 import하면 먼저 적용됨 -->
        <link rel="stylesheet" href="reset.css">

        <!-- 사용자 정의 CSS import / reset.css 적용 후 내 스타일 적용됨 -->
        <link rel="stylesheet" href="mystyle05.css">
    </head>
    <body>
        <h2>Welcome to the Jungle</h2>
        <strong>Welcome to the Hotel California</strong>
        <p>Welcome to the Black Parade</p>
    </body>
</html>

 

    - 많이 참조하는 reset 파일

        ① Eric Meyer's "Reset CSS" : https://meyerweb.com/eric/tools/css/reset/

 

CSS Tools: Reset CSS

CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter

meyerweb.com

        ② Normalize.css : https://necolas.github.io/normalize.css/

 

Normalize.css: Make browsers render all elements more consistently.

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.

necolas.github.io