1. GLOBAL RESETS
In Korean

2. CSS 리셋이란?

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

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

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

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

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

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

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

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

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

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

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

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

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

16. 가볍게 작성한
CSS 리셋의 예

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

18. 1. 몇 가지 주요 태그들에만
margin과 padding을 제거합니다.
html, body, ul, ol, li, form,
fieldset, legend
{
margin: 0;
padding: 0;
}

19. 2. 헤딩과 문단(p)의
margin-top값을 제거합니다.
h1, h2, h3, h4, h5, h6, p
{
margin-top: 0;
}

20. 3. fieldset과 img의
border값을 제거합니다.
fieldset, img
{
border: 0;
}

21. 4. table의 테두리와 간격을
설정합니다.
table
{
border-collapse: collapse;
border-spacing: 0;
}

22. 5. caption, th, td의 정렬 값을
설정합니다.
caption, th, td
{
text-align: left;
vertical-align: top;
font-weight: normal;
}

23. 6. IE 문제 해결을 위해
fieldset에 색상을 부여합니다.
legend
{
color: #000;
}

24. 7. input, textarea, select의
font-size와 line-height를 설정합니다.
input, textarea, select
{
font-size: 110%;
line-height: 1.1;
}

25. 8. Li의 불릿 모양을 제거합니다.
li
{
list-style: none;
}

26. 9. abbr과 acronym의
border-bottom과 cursor값을
설정해줍니다.
abbr, acronym
{
border-bottom: .1em dotted;
cursor: help;
}

27. 11. 행간 문제를 방지하기 위해
sup과 sub의 세로 정렬을 설정합니다.
sup
{
vertical-align: text-top;
}
sub
{
vertical-align: text-bottom;
}

28. 작성자 : 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