리셋 스타일보다 유용한 기본 스타일 선언

January 02, 2011 07:24 PM

리셋 스타일(reset style) 또는 CSS 리셋(CSS reset)은 브라우저 마다 서로 다른 기본 스타일 차이를 없애기 위해서 브라우저의 기본 스타일을 날리는 것을 말한다. 상당히 많은 사람들이 이 리셋 스타일을 사용하고 있는 것으로 알고 있다. 그리고 리셋된 스타일을 다시 살릴 수 있는 방법이 있느냐는 질문도 커뮤니티에 간간히 올라온다.

CSS는 너무나 막강하기 때문에 사이트 전체에 적용되는 CSS 룰을 만들 때에는 충분히 고민해야만 한다. 예를 들어서 상위 요소 없이 .title과 같은 전역 클래스를 만들 때에는 매우 주의를 해야 한다. title과 같은 클래스명은 워낙 광범위하게 사용될 수 있기 때문에 언제 어떤 상황에서 충돌이 발생할지 예측이 힘들기 때문에다. 마찬가지로 리셋 스타일에 있는 모든 CSS 룰도 전역 선언이기 때문에 매우 주의해야 한다.

에릭 메이어 조차도 자신의 리셋 스타일을 많은 사람들이 그냥 가져다 쓰기를 바라지 않았다. 리셋 스타일을 시작점으로 삼아서 각자가 자신들의 기술과 스킬을 개발하기를 바랬었다. 하지만 결과는 정반대로 많은 사람들이 별 생각없이 의례 스타일을 리셋해야 하는 것으로 생각하게 되고 문제와 논쟁만 끊임없이 생산되었다.

리셋 스타일을 사용하면 여러가지 문제점들이 발생될 수 있다. 아마 이와 같은 문제들을 실제로 이미 겪어본 사람들도 많을 것이다.

  • 리셋 스타일 기반으로 제작된 스타일은 나중에 문제가 발생했을 때, 리셋 스타일 부분만 수정하거나 지울 수 없다. 이미 모든 코드가 리셋 스타일에 의존적으로 작성이 되었기 때문에 모든 스타일을 다시 확인하고 재 작성해야 한다.
  • 콘텐츠 중에 브라우저 기본 스타일이 필요한 HTML 콘텐츠가 있거나 위지윅 에디터로 생성된 콘텐츠를 사용할 경우 리셋 스타일이 브라우저 기본 스타일을 없애버리기 때문에 브라우저 기본 스타일을 재정의해야 하는 경우가 생기게 된다.
  • 리셋된 스타일들은 어떤 방식으로든지 디자인 적용할 때 다시 정의되어야만 한다. 똑같은 선언을 값만 바꿔서 두번 하는 일은 분명 불필요한 작업이다.
  • 브라우저 호환성을 리셋 스타일로만 해결할 수 있는 것은 아니다. 브라우저간 다른 스타일을 새로 정의하기만 하면 호환성 문제는 사라진다.

나는 지금까지 스타일을 리셋해야 겠다고 생각하거나 리셋 스타일이 없어서 문제를 겪었던 적이 없다. 오히려 스타일 리셋을 너무 광범위하게 해서 문제가 생겼던 적은 많다. 대신 항상 base.css 파일을 만들어서 기본 광역 설정을 만들어서 써왔다. 프로젝트를 거듭할 수록 base.css는 조금씩 수정이 됐고 계속해서 나만의 base.css를 발전시켜왔다. 하지만 어느 사이트 하나 다른 사이트의 base.css를 그냥 가져다 쓴 적은 없다. base.css는 모든 세팅을 초기화(reset)하는 목적이 아니라 기본(base) 스타일을 정의하는 목적을 가지고 있기 때문이다.

@charset "utf-8";
/*
 * default style definition
 */
body {
	margin: 0;
	padding: 0;
	font-size: 75%;
	line-height: 1.5em;
	font-family: "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
}
form {
	margin: 0;
	padding: 0;
}
hr {
	display: none;
}
p, div, th, td, select, input {
	color: #333;
}
a:link, a:visited {
	color: #666;
	text-decoration: none;
}
a:active, a:hover {
	color: #000;
	text-decoration: none;
}
a img, 
input.type-image {
	border: 0 none;
}
input.type-text, 
textarea {
	border: 1px solid #ddd;
	background: #fff;
	padding: 1px;
}
input.type-text:hover, 
input.type-text:focus, 
textarea:hover, 
textarea:focus, 
select:hover, 
select:active {
	background-color: #ffd;
}
input, select, textarea {
	vertical-align: middle;
	font-size: 1em;
	color: #333;
}
select {
	font-size: 11px;
	font-family: Dotum, "돋움", sans-serif;
}
span.button, 
img.button, 
a.button {
	cursor: pointer;
	vertical-align: middle;
}

워낙 오래전에 사용하던 기본 스타일이기 때문에 문제도 좀 있고 불필요한 부분도 있다. 하지만 ul { margin: 0; padding: 0; list-style: none; }이나 table { border-collapse: collapse; }와 같이 경우에 따라 유용할 수 있는 브라우저의 기본 스타일을 날려버리는 코드가 없다는 것을 유념할 필요가 있다. 문제가 된다면 a imgborder: 0 none;을 전역으로 선언한 정도가 될 것이다. 나 말고도 기본 스타일 선언을 권장하는 사람들이 많이 있다.

리셋 스타일을 그냥 가져다 쓰지 말고 자신만의 기본 스타일 설정을 개발하는 것이 바람직하다. 이 기본 스타일은 사이트 제작을 시작할 때 기본 웹 스타일 가이드를 정의하는데 유용하게 사용될 수 있고 전체 CSS 구조나 제어를 이해하는데 큰 도움이 될 수 있을 것이다.

Trackbacks

TrackBack URL: http://hyeonseok.com/soojung/trackback.php?blogid=623
  • 에릭마이어의 CSS 초기화 from Jibro : Ji Brothers

    브라우저들 사이의 세세한 차이에 대응하기 위해 사용하는 리셋 스타일 이런 스타일의 목적은 공통 속성을 명시적으로 설정해서 가능한한 일관성 있는 스타일을 만들기 위해서 입니다. - 에

Comments

  • On January 03, 2011 02:59 AM, 의문점 said:

    많은 분들이 자신만의 리셋스타일을 쓴다면 사람들은 어떻게 운영을 했을까가 궁금하네요. 파견이 잦은 분들은 다른 사람이 작성한 코드를 이해하는데 당연히 시간이 걸립니다. 많은 분들이 자신만의 리셋스타일을 만들어 놓고 프로젝트 구축을 했다면 다른 분이 코드를 파악하는데는 분명 시간이 더 걸렸을 것 같아요. 안그런가요? 어떻게 보면 많은분들이 비슷하게 사용하시는 리셋스타일이 꼭 존재해야 된다고 저는 생각합니다. 물론 개인블로그나 기업이 보유하고 있는 웹표준 인력이 만든 웹표준 가이드에는 예외가 될수도 있지만 웹에이전시에서 구축하는 프로젝트에는 리셋스타일이 꼭 정의되어야한다는 생각도 드네요.

  • On January 03, 2011 03:18 AM, 신현석 said:

    의문점님, 제 글의 요지는 리셋 스타일을 각자 만들어 쓰라는게 아니라 리셋 스타일보다는 기본 스타일을 선언하는 방법으로 브라우저 호환성 문제를 해결하라는 것이고요. 리셋 스타일이 됐든 기본 스타일 선언이 됐든 CSS 룰 20개 안팎이기 때문에 시간이 더 걸릴 걱정은 안하셔도 될 것 같습니다.

  • On January 03, 2011 09:11 AM, N said:

    '리셋'과 '기본 스타일을 선언하라'고 구분하시는건 무슨 차이인지 잘 모르겠네요. 제겐 그냥 종합선물세트 같은 리셋을 쓰지말고 필요에 따라서만 재정의해서 쓰라는것 같은데 말이죠

    흔히 굴러다니는 RESET 이놈과
    body{font:0.75em Gulim, "굴림", Dotum, "돋움", sans-serif }
    body, div, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, p, form, fieldset, input, table, tr, th, td{margin:0;padding:0}

    이놈의 차이는 무엇인가요?
    body {
    margin: 0;
    padding: 0;
    font-size: 75%;
    line-height: 1.5em;
    font-family: "Malgun Gothic", "Lucida Grande", Tahoma, Verdana, AppleGothic, UnDotum, sans-serif;
    }
    form {
    margin: 0;
    padding: 0;
    }
    hr

  • On January 03, 2011 12:25 PM, 신현석 said:

    N님이 이해하신 것과 크게 다르지 않습니다. h1~td 까지의 요소의 여백을 모두 없애는 것과 form의 여백만 선택적으로 없애는 것은 그 의도의 차이가 있습니다. 제 생각은 모든것을 0으로 세팅하고 다시 세팅하는 것보다는 선택적으로 필요한 것만 정의해서 사용하는 것이 더 효과적이라는 것입니다.

  • On January 03, 2011 01:31 PM, N said:

    최초에 이해한것이 맞네요. 통의로 날려버리는 리셋. 필요한것만 재정의라는 표현 차이에 약간의 혼란이 있었습니다. 답변 감사드려요 :)

  • On January 03, 2011 05:50 PM, 이상화 said:

    .set {padding:0; margin:0; list-style:none;}
    .set li, .set li, .set dt, .set dd {padding:0; margin:0;}
    fieldset.set {border:none; padding:0; margin:0;}
    엘리먼트 선택자를 쓰지 말고 효율적인 측면에서 초기화 시키는 클래스를 생성하는게 여~~~~~러 가지 문제점을 해결 할 수 있습니다,

  • On January 04, 2011 01:14 PM, 아라크넹 said:

    관련이 있는진 모르겠지만 에릭 메이어가 신년을 맞아 새로운 리셋 스타일을 내 놓았습니다. :focus { outline: 0; }이 통째로 주석처리되었네요.
    http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/

  • On January 04, 2011 01:57 PM, 신현석 said:

    에릭 메이어도 그 부분때문에 고생(backfire)했다고 합니다. 본문에서도 말했다시피 리셋 파일을 그냥 가져다 쓰지 않고 수정해 쓰기를 원했는데 사람들이 그냥 가져다가 쓰는 바람에 키보드 포커스 위치가 나타나지 않게 제작되는 경우가 많았다고 합니다. 그래서 주석으로 처리해 버린거죠.

    따끈따끈한 소식 감사합니다. :)

  • On July 27, 2012 10:23 PM, 리버 said:

    초기화 클래스는 뻘짓입니다

  • On April 27, 2017 06:41 PM, 지나가던 퍼블리셔 said:

    리셋파일 왠만하면 안쓰는게 좋더라구요 가장기본적인 것들만 쓰는것이 바람직할 것같습니다..
    예를들어 에디터로 뿌려지는 것들이 reset에 영향을 받아서
    사용자가 원하는 화면이 제대로 나오지 않는 경우가 생기더라구요....
    또 만져주고 결국엔 reset을 다시 만져줘야하는....

Post a comment

:

: 공개 되지 않습니다. Gravata를 표시 합니다.

:

: HTML 태그를 사용할 수 없습니다.