CSS Reset

GLOBAL RESETS
In Korean

모든 브라우저는
기본 스타일을 가지고 있습니다.

문제는 그러한 기본 스타일이
각 브라우저마다 다르다는 것이지요.

CSS 리셋은 특정 브라우저에서만
적용되는 스타일을 제거하고,
모든 브라우저에서 동일하게 보이도록
하는데 그 목적이 있습니다.

가장 간단한 리셋은
유니버설 셀렉터(*)를 이용하여
모든 요소의 margin과 padding을
없애주는 것입니다.

*
{
margin: 0;
padding: 0;
}

하지만 이 리셋방식은
일부 폼 요소관련 부작용이 있고,
브라우저에게 너무
많은 작업을 강요합니다.

좀 더 진화된 방식의 CSS 리셋은
모든 태그의 거의 모든 측면에 대해
리셋을 적용하는 방법입니다.
• margin과 padding을 0으로
• border를 0으로
•list의 시각적 효과 제거
• 폰트의 기본 값 설정
• 폰트가 두껍거나 기울지 않도록 normal로 설정

가장 널리 사용되는 CSS 리셋
두가지를 소개합니다.
에릭 마이어(Eric Meyer)의 리셋
http://meyerweb.com/eric/thoughts/2007/05/
01/reset-reloaded/

YUI 2 리셋
http://developer.yahoo.com/yui/reset/

CSS 리셋은
좋은 방법인가요?

CSS 리셋을 좋아하는 사람도 있고
싫어하는 사람도 있습니다.
맞고 틀리다고 할 수 없겠지요.
단지 견해 차이일 뿐입니다!

저는 CSS 리셋에 대해서
3가지 우려를 가지고 있습니다.

모든 요소의 값을 0으로 만들어버리면,
각 값을 다시 재지정 해야 합니다.
이것은 파일 사이즈 증가의 원인이
될 수 있습니다.

브라우저의 기본 값을 지정한 뒤에
다시 적절한 값으로 재지정 하는 것을
잊어버릴 수 있습니다.

어떤 리셋은 키보드에 의존하여 메뉴를
조작하는 사용자에게
불편을 줄 수 있습니다.

:focus {outline: 0;}

가볍게 작성한
CSS 리셋의 예

저는 아주 기본적인 부분과
일부 문제점만을 해결하는
가벼운 리셋을 선호합니다.

1. 몇 가지 주요 태그들에만
margin과 padding을 제거합니다.

html, body, ul, ol, li, form,
fieldset, legend
{
margin: 0;
padding: 0;
}

2. 헤딩과 문단(p)의
margin-top값을 제거합니다.

h1, h2, h3, h4, h5, h6, p
{
margin-top: 0;
}

3. fieldset과 img의
border값을 제거합니다.

fieldset, img
{
border: 0;
}

4. table의 테두리와 간격을
설정합니다.

table
{
border-collapse: collapse;
border-spacing: 0;
}

5. caption, th, td의 정렬 값을
설정합니다.

caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}

6. IE 문제 해결을 위해
fieldset에 색상을 부여합니다.

legend
{
color: #000;
}

7. input, textarea, select의
font-size와 line-height를 설정합니다.

input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}

8. Li의 불릿 모양을 제거합니다.

li
{
list-style: none;
}

9. abbr과 acronym의
border-bottom과 cursor값을
설정해줍니다.

abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

11. 행간 문제를 방지하기 위해
sup과 sub의 세로 정렬을 설정합니다.

sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}

작성자 : Russ Weakley
Max Design

Site: maxdesign.com.au
Twitter: twitter.com/russmaxdesign
Slideshare: slideshare.net/maxdesign
Linkedin: linkedin.com/in/russweakley

번역 : Toby Yun
SK communications

Twitter: twitter.com/tobyyun
Slideshare: slideshare.net/headvoy

CSS Reset

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

Similar to CSS Reset

Similar to CSS Reset (20)

More from Toby Yun

More from Toby Yun (7)

CSS Reset