CSS 재설정이 무엇인지 아시나요? 일반적으로 브라우저의 스타일을 재설정하는 Reset CSS라고도 작성됩니다. 다양한 브라우저에서는 CSS 선택기에 일부 기본값이 사용됩니다. 예를 들어 h1이 값으로 설정되지 않은 경우 특정 크기가 표시됩니다. 그러나 모든 브라우저가 동일한 값을 사용하는 것은 아니므로 CSS Reset을 사용하여 웹 페이지 스타일이 각 브라우저에서 일관되게 작동하도록 합니다.
CSS를 사용하고 있다면 CSS Reset을 사용해 본 적이 있나요? 물론, 사용하고 있지만 사용하고 있다는 사실을 모를 수도 있습니다. 예를 들어 다음과 같이 사용할 수 있습니다.
| * { 패딩: 0; 테두리: 0; |
이는 모든 선택기의 패딩, 여백 및 테두리를 0으로 설정하는 CSS 재설정 방법이기도 합니다. 이는 가장 간단하고 안전한 강력한 방법이지만 가장 리소스 집약적이기도 합니다. 소규모 웹사이트의 경우 이를 사용하면 큰 리소스 낭비가 발생하지 않지만, 야후처럼 구조가 매우 큰 웹사이트의 경우 CSS를 선택적으로 재설정하면 리소스 낭비를 줄일 수 있습니다. 다음은 Yahoo의 CSS 재설정 코드이며, YUI가 선택한 방법은 다음과 같습니다.
| 본문, 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; } |
좋습니다. 여러분은 이미 CSS 재설정의 목적을 이해하고 있을 것입니다. 어쩌면 자신의 선호도에 따라 자신만의 CSS 재설정 시스템을 작성할 수도 있습니다. 그리고 다음을 참고할 수 있습니다.
Ateneu 인기 CSS 재설정
| HTML, 본문, div, 범위, 애플릿, 개체, 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} |
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; } |
Eric Meyer CSS 재설정
| HTML, 본문, div, 범위, 애플릿, 개체, iframe, 테이블, 캡션, 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 { 따옴표 : "" ""; } |