CSS 재설정은 브라우저의 스타일을 재설정하는 것을 의미합니다. 52CSS.com의 이전 기사에서도 유사한 지식이 소개되었지만 깊이가 충분하지 않았습니다. 오늘은 CSS Reset 방법의 10가지 예를 살펴보고 이 방법의 적용을 알아보겠습니다.
다양한 브라우저에서는 CSS 선택기에 일부 기본값이 사용됩니다. 예를 들어 h1이 값으로 설정되지 않은 경우 특정 크기가 표시됩니다. 그러나 모든 브라우저가 동일한 값을 사용하는 것은 아니므로 CSS Reset을 사용하여 웹 페이지 스타일이 각 브라우저에서 일관되게 작동하도록 합니다.
1. 일반 재설정 CSS
* {
패딩: 0;
여백: 0;
테두리: 0;
}
이는 모든 선택기의 패딩, 여백 및 테두리를 0으로 설정하는 CSS Reset 메서드이기도 합니다. 이는 가장 간단하고 안전한 강력한 방법이지만 가장 리소스 집약적이기도 합니다. 소규모 웹사이트의 경우 이를 사용하면 큰 리소스 낭비가 발생하지 않지만, 야후처럼 구조가 매우 큰 웹사이트의 경우 CSS를 선택적으로 재설정하면 리소스 낭비를 줄일 수 있습니다.
2. Ateneu 인기 CSS 재설정
html, body, div,span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, 약어,
주소, 큰, 인용, 코드, del, dfn, em, 글꼴, img, ins,
kbd, q, s, samp, 소형, 스트라이크, 강력, 서브, sup, tt,
var, dl, dt, dd, ol, ul, li, 필드셋, 양식, 라벨, 범례,
테이블, 캡션, tbody, tfoot, thead, tr, th, td {
여백: 0;
패딩: 0;
테두리: 0;
개요: 0;
글꼴 가중치: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
글꼴 계열: 상속;
수직 정렬: 기준선;
}
:초점 {개요: 0;}
a, a:link, a:visited, a:hover, a:active{text-장식:none}
테이블 { 테두리 축소: 테두리 간격: 0;}
일, td {텍스트 정렬: 글꼴 두께: 일반;}
img, iframe {테두리: 없음 텍스트 장식: 없음;}
ol, ul {목록 스타일: 없음;}
입력, 텍스트 영역, 선택, 버튼 {font-size: 100%;font-family: 상속;}
{마진: 상속;}을 선택하세요.
hr {여백: 0; 패딩: 0; 테두리: 0; 색상: #000; 배경 색상: #000; 높이: 1px}
3. Chris Poteet의 CSS 재설정
* {
수직 정렬: 기준선;
글꼴 계열: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
테두리: 없음;
패딩: 0;
여백: 0;
}
몸 {
패딩: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, 형식, ul, ol, dl {
여백: 20px 0;
}
li, dd, 인용문 {
왼쪽 여백: 40px;
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0;
}
4. Yahoo의 CSS 재설정
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
양식,필드세트,입력,텍스트 영역,p,blockquote,th,td {
패딩: 0;
여백: 0;
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0;
}
필드셋,img {
테두리: 0;
}
주소,캡션,인용,코드,dfn,em,strong,th,var {
글꼴 두께: 보통;
글꼴 스타일: 일반;
}
올, 울 {
목록 스타일: 없음;
}
캡션,번째 {
텍스트 정렬: 왼쪽;
}
h1,h2,h3,h4,h5,h6 {
글꼴 두께: 보통;
글꼴 크기: 100%;
}
q:이전,q:이후 {
콘텐츠:";
}
약어, 약어 { 테두리: 0;
}
5. Eric Meyer CSS
html, body, div,span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, 글꼴, img, ins,
kbd, q, s, samp, 작은, 스트라이크, 강한, 하위, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, 인용구, pre, a, abbr,
약어, 주소, 큰, 인용, 코드, dl, dt, dd, ol, ul, li,
필드셋, 양식, 레이블, 범례 {
수직 정렬: 기준선;
글꼴 계열: 상속;
글꼴 가중치: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
개요: 0;
패딩: 0;
여백: 0;
테두리: 0;
}
:집중하다 {
개요: 0;
}
몸 {
배경: 흰색;
줄 높이: 1;
색상: 검정색;
}
올, 울 {
목록 스타일: 없음;
}
테이블 {
국경 붕괴: 분리;
테두리 간격: 0;
}
캡션, 일, td {
글꼴 두께: 보통;
텍스트 정렬: 왼쪽;
}
blockquote:이전, blockquote:이후, q:이전, q:이후 {
콘텐츠: "";
}
인용구, q {
따옴표 : "" "";
}
6. Tantek Celik CSS 재설정
:link,:visited { text-장식:none }
ul,ol { 목록 스타일:없음 }
h1,h2,h3,h4,h5,h6,pre,code { 글꼴 크기:1em }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ 여백:0;
img,:link img,:visited img { border:none }
주소 { 글꼴 스타일:일반 }
7. 크리스티안 몬토야 CSS
html, body, form, fieldset {
재설정
여백: 0;
패딩: 0;
글꼴: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, 사전,
blockquote, ul, ol, dl, 주소 {
여백: 1em 0;
패딩: 0;
}
li, dd, 인용문 {
왼쪽 여백: 1em;
}
양식 라벨 {
커서: 포인터;
}
필드셋 {
테두리: 없음;
}
입력, 선택, 텍스트 영역 {
글꼴 크기: 100%;
글꼴 계열: 상속;
}
8. Rudeworks CSS 재설정
* {
여백: 0;
패딩: 0;
테두리: 없음;
}
HTML {
글꼴: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
텍스트 그림자: #000 0px 0px 0px;
}
울 {
목록 스타일: 없음;
목록 스타일 유형: 없음;
}
h1, h2, h3, h4, h5, h6, p, 사전,
blockquote, ul, ol, dl, 주소 {
글꼴 두께: 보통;
여백: 0 0 1em 0;
}
인용, em, dfn {
글꼴 스타일: 기울임체;
}
저녁 먹어 {
위치: 상대;
하단: 0.3em;
수직 정렬: 기준선;
}
하위 {
위치: 상대;
하단: -0.2em;
수직 정렬: 기준선;
}
li, dd, 인용문 {
왼쪽 여백: 1em;
}
코드, kbd, samp, pre, tt, var, input[type='text'], 텍스트 영역 {
글꼴 크기: 100%;
글꼴 모음: monaco, “Lucida Console”, courier, mono-space;
}
델 {
텍스트 장식: 라인 스루;
}
인, dfn {
테두리 하단: 1px 단색 #ccc;
}
작은, 저녁, 하위 {
글꼴 크기: 85%;
}
약어, 약어 {
텍스트 변환: 대문자;
글꼴 크기: 85%;
문자 간격: .1em;
테두리 하단 스타일: 점선;
테두리 하단 너비: 1px;
}
약어, 약어 {
테두리: 없음;
}
저녁 먹어 {
수직 정렬: 슈퍼;
}
하위 {
수직 정렬: 하위;
}
h1 {
글꼴 크기: 2em;
}
h2 {
글꼴 크기: 1.8em;
}
h3 {
글꼴 크기: 1.6em;
}
h4 {
글꼴 크기: 1.4em;
}
h5 {
글꼴 크기: 1.2em;
}
h6 {
글꼴 크기: 1em;
}
a, a:링크, a:visited, a:hover, a:active {
개요: 0;
텍스트 장식: 없음;
}
이미지 {
테두리: 없음;
텍스트 장식: 없음;
}
img {
테두리: 없음;
텍스트 장식: 없음;
}
라벨, 버튼 {
커서: 포인터;
}
입력:초점, 선택:초점, 텍스트 영역:초점 {
배경색: #FFF;
}
필드셋 {
테두리: 없음;
}
.분명한 {
명확함: 둘 다;
}
.float-왼쪽 {
플로트: 왼쪽;
}
.float-오른쪽 {
플로트: 오른쪽;
}
몸 {
텍스트 정렬: 중앙;
}
#래퍼 {
여백: 0 자동;
텍스트 정렬: 왼쪽;
}
9. Anieto2K CSS
html, body, div,span, applet, object, iframe을 재설정합니다.
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, 약어, 주소, big,
인용, 코드, del, dfn, em, 글꼴, img,
ins, kbd, q, s, samp, 소형, 스트라이크,
강한, 하위, 저녁, tt, var, dl, dt, dd, ol, ul, li,
필드셋, 양식, 레이블, 범례,
테이블, 캡션, tbody, tfoot, thead, tr, th, td,
센터, u, b, i {
여백: 0;
패딩: 0;
테두리: 0;
개요: 0;
글꼴 두께: 보통;
글꼴 스타일: 일반;
글꼴 크기: 100%;
글꼴 계열: 상속;
수직 정렬: 기준선
}
몸 {
줄 높이: 1
}
:집중하다 {
개요: 0
}
올, 울 {
목록 스타일: 없음
}
테이블 {
국경 붕괴: 붕괴;
테두리 간격: 0
}
blockquote:이전, blockquote:이후, q:이전, q:이후 {
콘텐츠: ""
}
인용구, q {
따옴표 : "" ""
}
입력, 텍스트 영역 {
여백: 0;
패딩: 0
}
시간 {
여백: 0;
패딩: 0;
테두리: 0;
색상: #000;
배경색: #000;
높이: 1px
}
10. CSSLab CSS 재설정
html, body, div,span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, 인용문, 사전, a, 약어, 약어, 주소,
큰, 인용, 코드, del, dfn, em, 글꼴, img, ins, kbd, q, s, samp,
작은, 스트라이크, 강한, 서브, sup, tt, var, dl, dt, dd, ol, ul, li,
필드셋, 양식, 라벨, 범례, 테이블, 캡션, tbody, tfoot,
thead, tr, th, td {
여백: 0;
패딩: 0;
테두리: 0;
개요: 0;
글꼴 가중치: 상속;
글꼴 스타일: 상속;
글꼴 크기: 100%;
글꼴 계열: 상속;
수직 정렬: 기준선;
}
:집중하다 {
개요: 0;
}
테이블 {
국경 붕괴: 분리;
테두리 간격: 0;
}
캡션, 일, td {
텍스트 정렬: 왼쪽;
글꼴 두께: 보통;
}
img, iframe {
테두리: 없음;
}
올, 울 {
목록 스타일: 없음;
}
입력, 텍스트 영역, 선택, 버튼 {
글꼴 크기: 100%;
글꼴 계열: 상속;
}
선택하다 {
여백: 상속;
}
/* IE6/7에서 ol의 잘못된 숫자 배치 수정 */
ol { 여백-왼쪽:2em }
/* == 클리어픽스 == */
.clearfix:이후 {
콘텐츠: ".";
디스플레이: 블록;
높이: 0;
명확함: 둘 다;
가시성: 숨김;
}
.clearfix {디스플레이: 인라인 블록;}
* html .clearfix {높이: 1%;}
.clearfix {display: block;}
이것들은 모두 유사하며 요구 사항과 방법도 다릅니다.