Normalize.css CSS 리셋의 대안입니다. 기본 HTML 요소 스타일에 대해 브라우저 간 높은 수준의 일관성을 제공합니다. Normalize.css는 HTML5의 현대적이고 프리미엄 대안입니다 (http://necolas.github.io/normalize.css/）
normalize.css와 reset.css 모두 브라우저 탭을 재설정하는 스타일시트입니다
normalize.css 생성의 목적은 다음과 같습니다:
유용한 브라우저 기본 스타일을 완전히 제거하지 말고 보호하세요
일반화된 스타일: 대부분의 HTML 요소에 제공됩니다
브라우저 자체의 버그를 수정하고 브라우저 간 일관성을 보장하세요
CSS 사용성 최적화: 몇 가지 팁을 활용하세요
코드를 설명하세요: 주석과 상세한 문서를 사용하세요
Normalize.css 모바일 브라우저를 포함한 다양한 브라우저를 지원하며, HTML5 요소, 타이포그래피, 리스트, 임베디드 콘텐츠, 폼, 표를 일반화합니다. 이 프로젝트는 일반화에 기반하고 있지만, 적절한 경우 보다 실용적인 기본값을 사용했습니다.
노멀라이즈 vs 리셋
1. Normalize.css 가치 있는 채무불이행 보호함
리셋은 거의 모든 요소에 기본 스타일을 부여하여 동일한 시각적 효과를 강요합니다. 반면 Normalize.css은 기본 브라우저 스타일을 많이 유지합니다. 즉, 더 이상 일반적인 타이포그래피 요소를 모두 스타일링할 필요가 없습니다. 각 요소가 브라우저마다 기본값이 다를 때, Normalize.css 이러한 스타일을 현대 표준에 최대한 일관성 있게 유지하려고 노력합니다.
2. Normalize.css 브라우저 버그 수정
데스크톱과 모바일 브라우저에서 흔히 발생하는 버그를 수정합니다. 이것은 종종 리셋이 할 수 있는 범위를 넘어선 일입니다. 이와 관련해 수정Normalize.css 문제로는 HTML5 요소의 표시 설정, 사전 서식된 텍스트의 글꼴 크기 문제, IE9의 SVG 오버플로우, 그리고 다양한 브라우저와 운영체제에서 발생하는 다양한 폼 관련 버그가 포함됩니다.
3. Normalize.css 디버깅 도구가 복잡해지지 않습니다
Reset 사용에서 가장 짜증나는 점 중 하나는 아래 이미지에서 볼 수 있듯이 브라우저 디버깅 도구의 긴 상속 체인입니다. Normalize.css에서는 이러한 문제가 없을 것입니다. 왜냐하면 저희는 가이드라인에서 다중 선택자 사용을 매우 신중하게 하며, 목표 요소만 의도적으로 스타일링하기 때문입니다.
4. Normalize.css 모듈러
프로젝트는 관련되면서도 별개의 부분으로 나뉘어 있어, 어떤 요소가 특정 값으로 설정되는지 쉽고 명확하게 알 수 있습니다. 이렇게 하면 절대 사용하지 않을 부분(예: 형태의 일반화)을 선택적으로 제거할 수 있습니다.
5. Normalize.css 상세한 문서가 있습니다
Normalize.css 코드는 상세하고 포괄적인 크로스 브라우저 연구와 테스트를 기반으로 합니다. 이 파일에는 자세한 코드 설명과 깃허브 위키에 추가된 지침이 있습니다. 즉, 각 코드 줄이 정확히 무엇을 하는지, 왜 작성했는지, 브라우저 간 차이점을 파악할 수 있고, 자신의 코드를 더 쉽게 테스트할 수 있습니다.
normalize.css 사용 방법
첫째, Github에서 Normalize.css을 설치하거나 다운로드하고, 그 다음에는 두 가지 주요 사용 방법이 있습니다.
전략 1: normalize.css를 자신의 프로젝트의 기반이 되는 CSS로 사용하고, 디자이너의 필요에 맞게 스타일 값을 맞춤화하세요.
전략 2: normalize.css소스 코드를 불러와서 그 위에 빌드하고, 필요하면 자신의 CSS로 기본값을 덮어쓰는 것입니다.
CSS 파일 다운로드:https://necolas.github.io/normalize.css/8.0.0/normalize.css
|
게시됨 2018. 7. 27. 오후 2:49:36
|
|
|
|
