![[CSS] CSS 초기화(Reset) 코드 모음](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcsCyVg%2FbtqCBwpaj6d%2Ftin8hKRiuDzk6K3MVB9pqK%2Fimg.png)
[CSS] CSS 초기화(Reset) 코드 모음
(글쓴날 : 2020.03.12)
* 이 글은 글쓴이가 공부한 내용을 정리하며 올리는 글입니다.
* CSS3를 기준으로 작성되었습니다.
CSS 초기화(Reset) 코드
1) CSS 초기화(Reset)란?
먼저, CSS 초기화란 브라우저마다 다르게 적용되어 있는 CSS 기본 값들을 제거해 주는 것을 뜻합니다.
대표적인 브라우저에는 Microsoft의 인터넷 익스플로러(Internet Explorer), Google의 크롬(Chrome), Apple의 사파리(Safari), Mozila의 파이어폭스(Firefox) 등이 있으며, 브라우저들마다 내장되어 있는 CSS의 기본값들이 서로 다르게 설정되어 있습니다.
따라서, 웹 프로그래밍 시 분명히 동일한 코드인데도 불구하고 브라우저에 따라 생성된 결과가 다르게 나오는 황당한 경우가 종종 발생하게 됩니다.
이러한 문제를 해결하기 위하여, 브라우저의 CSS 기본 값을 제거하는 CSS 초기화 코드들이 나오게 되었고 웹 프로그래밍을 하기 전 먼저 CSS 초기화를 하고 코딩을 시작하시면 되겠습니다.
2) CSS 초기화(Reset) 코드 모음
CSS 초기화 코드에는 여러 버전이 있으며, 그중에서 인기 있는 코드를 모아 봤습니다.
이 중에서 취향에 따라 마음에 드시는 코드를 사용하시면 되겠습니다.
* Eric Meyer's CSS reset : Eric Meyer's 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
* HTML5 Reset Stylesheet : HTML5 Reset Stylesheet
HTML5 Reset Stylesheet | HTML5 Doctor
We’ve had a number of people ask about templates, boilerplates, and styling for HTML 5. Last week, Remy introduced some basic boilerplates for HTML 5, so to keep the momentum going, I’ve modified Eric Meyer’s CSS reset for you to use in your HTML 5 project
html5doctor.com
* Normalize.css : Normalize.css
necolas/normalize.css
A modern alternative to CSS resets. Contribute to necolas/normalize.css development by creating an account on GitHub.
github.com
* CSS Reset Tripoli : CSS Reset Tripoli
CSS Reset Tripoli | CSSTerm.com
CSS Reset Tripoli Tripoli reset addresses many deprecated HTML elements — often by disabling them — such as the and elements, which could be handy for projects that are used by several people with varying levels of HTML knowledge. Some de
www.cssterm.com
* CSS Reset - YUI Library : CSS Reset - YUI Library
CSS Reset - YUI Library
Note: The files "reset.css" and "reset-context.css" are deprecated, use "cssreset.css" and "cssreset-context.css" instead. The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat fou
yuilibrary.com
여기까지 CSS 초기화(Reset) 코드들을 알아보았습니다.
위에서 소개해드린 이미 만들어져있는 유명한 코드를 그대로 사용하는 것도 좋지만 상황에 따라 본인에게 맞는 초기화 코드를 템플릿화 하여 적용하는 것이 더 좋은 방법이지 않을까 싶습니다.
감사합니다!
'Deprecated' 카테고리의 다른 글
| [Baekjoon Online Judge] 백준 2523번 별 찍기 - 13(Python) (0) | 2020.03.14 |
|---|---|
| [Baekjoon Online Judge] 백준 10039번 평균 점수(Python) (0) | 2020.03.14 |
| [LeetCode] 리트코드 1266번 Minimum Time Visiting All Points(Python) (0) | 2020.03.11 |
| [LeetCode] 리트코드 1295번 Find Numbers with Even Number of Digits(Python) (0) | 2020.03.11 |
| [LeetCode] 리트코드 1108번 Defanging an IP Address(Python) (0) | 2020.03.11 |