(x)html 관련된 팁을 공유하는 공간입니다.
글 수 66
1
조회 수 : 5816 신고 : 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;
}
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개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기
본문으로 바로가기
- 추천수 50개이상
- 추천수 30개이상
- 추천수 20개이상
- 추천수 10개이상
- 추천수 3개이상