CSS 재설정이 무엇인지 알고 있지만 최근에 Normalize.css라는 새로운 내용에 대해 들었습니다.
Normalize.css 와 Reset CSS 의 차이점은 무엇입니까 ?
CSS 정규화와 CSS 재설정의 차이점은 무엇입니까?
CSS 재설정에 대한 새로운 유행어입니까?
CSS 재설정이 무엇인지 알고 있지만 최근에 Normalize.css라는 새로운 내용에 대해 들었습니다.
Normalize.css 와 Reset CSS 의 차이점은 무엇입니까 ?
CSS 정규화와 CSS 재설정의 차이점은 무엇입니까?
CSS 재설정에 대한 새로운 유행어입니까?
답변:
normalize.css에서 작업합니다.
주요 차이점은 다음과 같습니다.
Normalize.css는 모든 것을 "스타일링 해제"하는 대신 유용한 기본값을 유지합니다. 예를 들면, 원하는 요소 sup또는 subnormalize.css 포함 후 "바로 작업"(실제로는보다 강력한 이루어진다)가 포함 reset.css 후에 정상적인 텍스트와 시각적으로 구별 할 수있는 반면. 따라서 normalize.css는 시각적 시작점 (균질성)을 강요하지 않습니다. 이것은 모든 사람의 취향에 맞지 않을 수 있습니다. 가장 좋은 방법은 둘 다 실험하고 원하는 젤을 확인하는 것입니다.
Normalize.css는 reset.css의 범위를 벗어난 몇 가지 일반적인 버그를 수정합니다. reset.css보다 넓은 범위를 가지며 HTML5 요소의 표시 설정, font양식 요소에 의한 상속 부족 , font-size렌더링 수정 pre, IE9의 SVG 오버플로 및 buttoniOS 의 스타일링 버그 와 같은 일반적인 문제에 대한 버그 수정을 제공합니다 .
Normalize.css는 개발 도구를 어지럽히 지 않습니다. reset.css를 사용할 때 일반적인 자극은 브라우저 CSS 디버깅 도구에 표시되는 큰 상속 체인입니다. 대상 지정 스타일로 인해 normalize.css에서는 이러한 문제가 아닙니다.
Normalize.css는 더 모듈화되어 있습니다. 이 프로젝트는 상대적으로 독립적 인 섹션으로 분류되므로 웹 사이트에서 필요하지 않은 섹션을 알고 있으면 양식 정규화와 같은 섹션을 쉽게 제거 할 수 있습니다.
Normalize.css에 더 나은 설명서가 있습니다. normalize.css 코드는 GitHub Wiki 에서 인라인으로보다 포괄적으로 문서화되어 있습니다 . 즉, 각 코드 행이 수행하는 작업, 포함 된 이유, 브라우저 간의 차이점을 파악하고보다 쉽게 자체 테스트를 실행할 수 있습니다. 이 프로젝트는 기본적으로 브라우저가 기본적으로 요소를 렌더링하는 방법을 교육하고 개선 사항 제출에 더 쉽게 참여할 수 있도록하는 데 도움이됩니다.
normalize.css 에 대한 기사에서 이에 대해 더 자세히 작성했습니다.
가장 큰 차이점은 다음과 같습니다.
CSS 재설정은 모든 내장 브라우저 스타일 을 제거 하는 것을 목표로 합니다 . H1-6, p, strong, em 등과 같은 표준 요소는 장식이 전혀없이 정확하게 똑같이 보입니다. 그런 다음 모든 장식을 직접 추가해야합니다 .
CSS 정규화 는 브라우저 간에 내장 브라우저 스타일을 일관되게 유지 하는 것을 목표로 합니다. H1-6과 같은 요소는 브라우저에서 일관된 방식으로 대담하고 더 크게 나타납니다. 그런 다음 디자인에 필요한 장식 의 차이 만 추가 해야합니다.
설계 경우 a)는 타이포그래피 등등, 및 공통 규칙은 다음과 B)를 Normalize.css는 쓰기에 자신의 CSS는 더 작고 더 빠른 것 Normalize.CSS 대신 CSS 리셋을 사용하여 귀하의 타겟 고객을 위해 작동합니다.
Normalize.css는 주로 제작자가보기에 좋을 것으로 생각한 브라우저를 기준으로 일관성있게 보이도록하는 스타일 모음입니다. Reset은 기본적으로 요소에서 스타일을 제거하므로 모든 스타일을보다 효과적으로 제어 할 수 있습니다.
둘 다 사용합니다.
재설정의 일부 스타일, Normalize.css의 일부 스타일 예를 들어, Normalize.css에는 모든 입력 요소가 동일한 글꼴을 갖도록하는 스타일이 있습니다 (텍스트 입력과 텍스트 영역 사이). Reset에는 이러한 스타일이 없으므로 입력에 다른 글꼴이 있으므로 일반적으로 원하지 않습니다.
따라서 기본적으로 두 개의 CSS 파일을 사용하면 모든 것을 '등화'하는 것이 더 좋습니다.)
문안 인사!
첫 번째 reset.css는 사용할 수있는 최악의 라이브러리입니다. HTML의 표준 구조를 제거하고 여백 패딩 및 기타 속성 값을에 할당 한 후 작성한 모든 내용을 텍스트로 표시하기 때문 0입니다. 예를 들어 <H1>,와 동일 하다는 것을 알 수 있습니다 <H6>.
반면에 Normalize.css표준 구조를 사용하고 그 안에 존재하는 거의 모든 오류를 수정합니다. 예를 들어 한 브라우저에서 다른 브라우저로 양식을 표시 할 때 발생하는 문제를 해결합니다. 정규화는이 기능을 수정하여이 문제를 해결하므로 모든 브라우저에서 요소가 동일하게 표시됩니다.
설명에 따르면 재설정과 마찬가지로 모든 기본 스타일을 제거하지 않고 모든 브라우저에서 사용자 에이전트의 기본 스타일을 일관성있게 유지하려고합니다.
많은 CSS 재설정과 달리 유용한 기본값을 유지 합니다.
재설정은 특히 복잡한 비 보일러 플레이트 유형 설계 프로젝트에서 사용자 정의 설계 사양을 충족해야 할 것으로 보입니다. 정규화는 순전히 웹 프로그래밍을 염두에 두는 좋은 방법 인 것처럼 들리지만 종종 웹 사이트는 웹 프로그래밍과 UI / UX 디자인 규칙 사이의 결혼입니다.
Knowing the default CSS values for each element is part of being a good front end developer-이것은 당신이 프로그래밍 언어가 아닌 전자와 함께 일할 것이라고 말하는 것과 비슷하다. 그것이 좋은 개발자가되기 때문이다. 도구를 사용하여 효율적으로 사람에게 좋은 개발자를 만드는 다른 방법은 주위에 일반적으로 시간 낭비 광신자의 범주에 빠진다
때로는 가장 좋은 해결책은 두 가지를 모두 사용하는 것입니다. 때로는 둘 다 사용하지 않는 경우도 있습니다. 때로는 하나 또는 다른 것을 사용해야합니다. 모든 브라우저에서 여백 및 패딩 재설정을 포함한 모든 스타일을 원하면 reset.css를 사용하십시오. 그런 다음 모든 장식과 스타일을 직접 적용하십시오. 내장 스타일링을 좋아하지만 브라우저 간 동기화, 즉 표준화와 같은 더 많은 것을 원한다면 normalize.css를 사용하십시오. 그러나 reset.css와 normalize.css를 모두 사용하기로 선택한 경우, reset.css 스타일 시트를 먼저 연결 한 다음 normalize.css 스타일 시트 (즉시)를 연결하십시오. 때로는 어느 것이 더 나은지 항상 문제는 아니지만 둘 중 어느 것을 사용해야 할 때와 둘 다를 사용해야 할 때와 둘 다 사용하지 않을 때. 이모.
이 질문은 이미 여러 차례 답변되었습니다 .2019 년 9 월 기준으로 각각에 대한 간단한 요약과 예를 들어 보겠습니다.
예 : 기본적으로 Google 크롬의 <h1>내부 태그 <section>는 "예상" <h1>태그 크기보다 작습니다 . 반면에 Microsoft Edge는 "예상 된"크기의 <h1>태그를 만들고 있습니다. Normalize.css는 일관성을 유지합니다.
현재 상태 : npm 저장소는 normalize.css 패키지 가 현재 주당 5 만 회 이상 다운로드 되었음을 보여줍니다 . 저장소 프로젝트의 GitHub 스타는 36k 이상입니다.
예 : 아래와 같은 작업을 수행합니다.
html, body, div, span, ..., audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}현재 상태 : Normalize.css보다 훨씬 덜 인기있는 reset-css 패키지는 일주일에 약 26k 다운로드 한 것으로 표시합니다. GitHub 스타는 프로젝트의 저장소 에서 알 수 있듯이 200 개에 불과 합니다 .