스타일시트 리셋
Reset style sheet리셋 스타일시트(또는 CSS 리셋)는 브라우저의 HTML 요소의 기본 포맷을 클리어하기 위해 사용되는 CSS 규칙의 집합으로, 서로 다른 브라우저 간에 발생할 수 있는 불일치를 제거합니다.또한 개발자가 브라우저 기본 스타일링에 자신도 모르게 의존하지 않도록 하고 페이지에 적용할 스타일링을 명시하도록 합니다.
목적
각 브라우저에는 스타일링 요소에 대한 World Wide Web Consortium 권장사항과 다른 HTML 요소의 스타일링에 대한 기본 설정이 있습니다.예를 들어, 링크 텍스트의 색상과 특정 항목의 간격 정의는 기본적으로 많은 브라우저에서 다르게 정의됩니다.이러한 기본 세부 정보는 브라우저마다 크게 다를 수 있으며 브라우저 [1]버전에 따라 다를 수도 있습니다.작성자가 정의한 규칙과 함께 사용되는 이러한 기본 스타일은 웹 사이트의 모양에 예기치 않은 영향을 미칠 수 있습니다.
스타일시트 재설정의 도움을 받아 이러한 브라우저 스타일을 제거할 수 있습니다.개발자가 사용하는 스타일은 모든 브라우저에서 일관되게 해석됩니다.
역사
첫 번째 스타일 시트 리셋은 [2]2004년경에 출시되었으며, 대부분은 모든 요소의 여백 및 패딩 리셋으로 구성되었습니다.
* { 패딩: 0; 여백: 0; }
단, 2004년 Tantek Selik에 의해 작성된 첫 번째 리셋 스타일시트에는 모든 글꼴 크기를 다음과 같이 설정하는 추가 기능이 포함되어 있습니다.1em
링크 밑줄과 [3]테두리를 삭제합니다.
이 과정은 다양한 개발자에 의해 점차 개선되어 일부 요소만 기본 외관으로 재설정됩니다.
주목할 만한 리셋 스타일 시트
- 기존의 CSS 리셋은 Yahoo User Interface Library(YUI 라이브러리)[4]의 일부입니다.
- Normalize.css - CSS 리셋을 대체하는 최신 버전
- Reseter.css - 미래형 CSS 리셋/노멀라이저
- Eric A. Meyer의 CSS Reset도 매우 잘 알려져 있으며 거의 모든 요소를 포맷되지 않은 [5]상태로 설정합니다.
단점들
- 많은 CSS 리셋에서는 HTML 요소의 포맷이 삭제됩니다.예를 들면,
strong
강조 표시된 텍스트 또는 굵은 글씨로 구성된 요소는 대부분의 경우 텍스트의 나머지 부분과 모양 및 색상의 차이가 없습니다.따라서 개발자는 웹 페이지에서 사용하고자 하는 HTML 태그에 대해 일부 삭제된 포맷을 다시 도입해야 합니다. - 재설정 크기에 따라 기존 스타일시트 파일을 확장하거나 추가 파일을 로드해야 하므로 로드 시간이 길어집니다.
CSS 리셋과 CSS 프레임워크의 차이
CSS 리셋은 CSS 프레임워크와는 다른 개념입니다.리셋 스타일시트는 기본 포맷을 리셋할 때만 사용됩니다.이와는 대조적으로 CSS 프레임워크는 일반적으로 자주 필요한 UI 요소 또는 그리드 시스템에 대해 미리 만들어진 스타일 정의를 포함하고 있으며 웹사이트 개발 프로세스를 가속화하기 위해 사용됩니다.단, CSS 리셋은 대부분의 경우 CSS 프레임워크의 일부입니다.