[html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

 

[html/css]브라우저 기본값의 초기화 리셋(reset.css)의 개념

 

브라우저는 HTML언어를 번역해서 보여주는 기능을 한다고 했는데요,

 

HTML 기초 (markup, 브라우저 종류/ XHTML, XML, HTML5, DHTML 차이)

 

 

대표적인 브라우저로

IE(인터넷 익스폴러러) Firefox(파이어 폭스) Chrome(구글 크롬) Safari(사파리) Opera(오페라)

 

가 있습니다.

 

 

이들 브라우저는 모두 같은 기본값을 사용하고 있지 않습니다.

 

예를 들어, margin과 paddding을 적용했을 때 브라우저마다 보이는 방식이 다릅니다.

 

또한 들여쓰기의 거리나, line height의 폭, heading 크기의 기본값이 저마다 다르고요

 

 

리셋(reset) 의 개념

 

 

리셋(reset) 이라는 개념은, 모든 브라우저에서 통일된 화면을 볼 수 있도록

 

기본값을 처음부터 초기화시킨다는 의미입니다.

 

 

reset은 원래 '재설정'이라는 뜻

 

 

 

예를 들어, 아래 화면은 인터넷 익스플로러와, 구글 크롬 화면입니다. table과 body 사이의 거리가 조금 차이가

 

있죠? body에 있는  margin 기본값이 달라서인데요..  처음부터 body의 margin, padding 값을 0으로 초기화시킨 후에

 

태그 작성을 한다면, 두 화면 모두 동일한 결과를 보여줄 수 있습니다.

 

 

 인터넷 익스플로러

 

구글 크롬

 

즉, css 작성 시 처음부터 이렇게 만들어 놓고 시작하는 것입니다~

 

body

{

margin: 0px;

padding: 0px;

}

 

그럼 아래 그림처럼 두 브라우저 모두 동일한 지점에서 출발하게 됩니다..

 

 

 

 

이러한 방식으로 마진, 패딩 뿐 아니라  폰트 크기 등 다른 부분도 모두 초기화 하는 reset.css 파일을 별도로 만들어

 

저장해 놓고 태그 작성을 시작합니다

 

 

아래는, 2014년 가장 인기있는 reset 파일로  다운 받아 이용하셔도 되고, 수정하신 후 사용하셔도 됩니다^^

 

1.  Eric Meyer's Reset

reset.css

 

2. html5doctor.com Reset

html5 reset.css

 

아래 파일은 이곳에서☞ http://www.cssreset.com/
3. Yahoo! (YUI 3) Reset CSS

4. Universal Selector ‘*’ Reset

5. Normalize.css 1.0

 
참조 : http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

 

 

 

크로스브라우징, 웹표준과 핵(hack)

 

[html/css] 화면 상단/하단에 애드센스 광고 1개 넣기

 

[html/css] 맨 위로 가기 버튼 만들기

 

[html/css] table 중앙 정렬하기

 

블로그 방문자수 늘리기 도전, 생각보다 쉬운 네이버 오픈캐스트 개설