(x)html 관련된 팁을 공유하는 공간입니다.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 66

1

조회 수 : 5816 신고 : 0

작성자 : 이병준
포인트 : 0 | 레벨 : 0
미리보기 :  
브라우저마다 마진, 패딩이 다르게 적용되어 있기 때문에 흔히 * {margin:0; padding:0;}으로 초기화를 하고 작업을 시작하는데, 이 방법보다 아래 브라우저 리셋 CSS를 쓰는 방법이 더 편합니다. 원저작자가 public domain으로 공개한 파일인데 간단하게 주석을 달아보았습니다.

http://meyerweb.com/eric/tools/css/reset/

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
} /* *{margin:0; padding:0;}은 모든 요소에 상속이 되어 컨텐츠가 많은 경우 속도가 느려진다고 합니다 */
body {
    line-height: 1;
} /* 필요한 경우 적절하게 line-height를 조정하면 될 것 같습니다 */
ol, ul {
    list-style: none;
} /* 대부분의 리스트를 리스트 스타일을 제거하고 bullet은 백그라운드 이미지로 처리하는 경우 필요합니다 */
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
} /* 인용구 태그의 앞뒤를 정리하는데 쓰입니다. */

/* remember to define focus styles! */
:focus {
    outline: 0;
} /* 이 속성을 쓰면 개체에 포커스가 간 경우 outline이 안 보이기 때문에 저는 지우고 사용합니다. */

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
} /* ins 태그는 중간에 삽입된 개체에 대해 씁니다. 기본값은 underline이기 때문에 필요한 정도로 수정하여 쓰면 됩니다 */
del {
    text-decoration: line-through;
} /* del 태그는 중간에 삭제된 개체에 대해 씁니다. */

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

댓글 '2'

profile
title: [ani]깜빡이는 표정빽짱구 (197148)

2010.05.28 11:29:31

좋은 정보 감사합니다.^^

gkgkgk(543929)

2014.02.27 01:29:15

가장좋은건 자신에 맞는 nomalize css를 제작해서 쓰는것이죠

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 모바일 코딩하시는 분들 참고하세요. title: [ani]깜빡이는 표정빽짱구 2014-05-07   2639
66 hit html 특수문자 코드표 [1] title: [ani]깜빡이는 표정빽짱구 2009-02-10   40555
65 hit best of best Span 태그와 Div 태그 (HTML) [2] title: [ani]깜빡이는 표정빽짱구 2007-01-21 70 16641
64 hit iframe대신 div를 응용해보자 [4] title: [ani]깜빡이는 표정빽짱구 2007-12-17   16339
63 hit 글자위에 마우스 오버시 툴팁띄우기 file title: [ani]깜빡이는 표정빽짱구 2007-11-08   15177
62 hit DIV를 이용한 Display 핸들링 title: [ani]깜빡이는 표정빽짱구 2007-12-17   12661
61 hit 마우스 드래그 금지태그 [2] title: [ani]깜빡이는 표정빽짱구 2006-04-26 16 11931
60 hit 클릭시 현재 페이지에서 원하는곳으로 위치이동 title: [ani]깜빡이는 표정빽짱구 2008-04-30   11848
59 hit th 태그와 td 태그의 차이점 [2] title: [ani]깜빡이는 표정빽짱구 2005-12-07 7 11507
58 hit png 으로 저장시 IE6에서 투명안될때 [2] title: [ani]깜빡이는 표정빽짱구 2007-12-12   11098
57 hit 메일링 코딩시 이미지맵 [4] title: [ani]깜빡이는 표정빽짱구 2009-04-21   10493
56 hit HTML과 XHTML의 차이 [4] title: [ani]깜빡이는 표정빽짱구 2007-12-07   10444
55 hit best of best input 태그를 이미지버튼으로하기 title: [ani]깜빡이는 표정빽짱구 2006-04-22 20 10331
54 hit 익스7에 잘보이던 사이트가 익스8에서 제대로 안보일때 title: [ani]깜빡이는 표정빽짱구 2009-05-13   10007
53 best of best CHECKBOX클릭시 지정된 내용 보여주기 title: [ani]깜빡이는 표정빽짱구 2006-10-17 42 9972
52 best of best onfocus="this.blur()" 익스,파이어폭스에도 적용 title: [ani]깜빡이는 표정빽짱구 2007-02-21 33 9715
51 best of best input 에 마우스 오버/아웃시 배경바꾸기 title: [ani]깜빡이는 표정빽짱구 2006-07-25 20 9172
50 textarea 나 input 안에 글자 안써지게 하기 title: [ani]깜빡이는 표정빽짱구 2006-05-12 19 9052
49 html5의 모든 것 [3] title: [ani]깜빡이는 표정빽짱구 2010-02-04   8833
48 한글기본폰트 영문명 [3] 뉴클리어 2010-03-07   8820
47 best of best 아이디 입력란에 탭키 눌렀을때 순서정하기 [2] title: [ani]깜빡이는 표정빽짱구 2006-09-28 25 8491