CSS 재설정과 정규화의 차이점은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 재설정과 정규화의 차이점은 무엇입니까?

WBOY

풀어 주다： 2023-08-19 12:21:28

앞으로

835명이 탐색했습니다.

Difference between resetting and normalizing CSS?

개발자는 HTML 요소가 모든 브라우저에서 동일하게 보이길 원합니다. 단, 이는 각 브라우저의 기능에 따라 다릅니다. 브라우저는 HTML 페이지를 렌더링할 때 자체 기본 스타일을 적용합니다. 예를 들어 제목 태그의 크기와 글꼴은 브라우저 유형에 따라 다릅니다. 즉, 코드를 작성하지 않고도 제목에 여백이나 추가 여백을 둘 수 있습니다.

이 튜토리얼에서는 CSS를 재설정하고 정규화하는 방법과 그 차이점이 무엇인지 살펴보겠습니다.

정규화와 재설정의 차이점은 무엇인가요?

CSS를 사용할 때 개발자는 제목 글꼴 및 크기가 브라우저마다 다를 수 있는 등 몇 가지 문제에 직면할 수 있습니다. 상단 및 하단 여백은 물론 기본 패딩도 다를 수 있습니다. 여기에서 재설정과 정규화가 시작되어 브라우저 전반에 걸쳐 기본 CSS의 일관성이 향상되지만 어떤 방법을 사용할지에 대한 논쟁은 여전히 진행 중입니다. 재설정과 정규화의 차이점을 자세히 살펴보겠습니다.

CSS에서 스타일 재설정

브라우저 간 차이를 피하기 위해 CSS 작성자는 CSS 재설정을 사용하여 브라우저의 모든 스타일을 무효화합니다. 대부분의 브라우저에서 하이퍼링크는 파란색으로 표시되고, 방문한 하이퍼링크는 보라색으로 표시됩니다.

기본 스타일의 예는 다음과 같습니다. −

으아악

적용할 스타일은 브라우저가 결정하지만 이러한 기본 스타일은 모든 브라우저에 적용됩니다. 일부 브라우저에서는 추가 패딩을 적용할 수 있고 일부는 여백을 변경할 수 있으며 일부는 글꼴 스타일이 다를 수도 있습니다.

CSS 재설정은 브라우저가 모든 스타일을 null로 재설정하도록 하여 브라우저의 기본 스타일로 인한 차이를 방지합니다.

모든 요소의 가중치와 스타일을 동일하게 설정한 예를 살펴보겠습니다.

으아악

CSS 개발자는 웹사이트가 브라우저에 따라 다르게 보이기 때문에 불일치를 발견합니다. 재설정하면 기본 브라우저 스타일이 null로 설정되어 다양한 브라우저 스타일로 인해 발생할 수 있는 불일치가 제거됩니다.

NOTE - Internet Explorer는 상속 속성을 지원하지 않으므로 상속된 값이 적용되지 않으며 Internet Explorer의 사용자 인터페이스에 영향을 미칠 수 있습니다. 재설정하면 Internet Explorer를 사용할 때 이 문제를 해결하는 데 도움이 됩니다.

예

기본 브라우저 스타일을 재설정하는 방법을 보여주는 예를 살펴보겠습니다.

으아악

가져온 링크는 브라우저의 기본 스타일을 재설정하며 재설정된 스타일은 다른 스타일보다 먼저 로드되므로 브라우저의 기본 스타일이 제거됩니다.

위 출력은 코드에서 재설정을 사용한 것처럼 모든 브라우저에서 동일하게 보입니다. 재설정을 사용한 후에는 출력의 차이가 최소화됩니다.

CSS에서 정규화

브라우저 간 호환성을 향상시키기 위해 HTML 요소에 대한 정규화를 사용하고 HTML의 재설정을 대체합니다. 정규화는 유용한 기본값을 모두 지우는 대신 브라우저에서 유지하도록 수행됩니다. .

HTML의 많은 요소에 대한 스타일을 표준화합니다.
일반 브라우저에서 버그를 제거합니다.
문서를 통해 코드를 간략하게 설명하여 사용성을 향상시켰습니다.

예

정규화의 개념을 이해하기 위한 예는 다음과 같습니다. 이 예에서는 브라우저의 스타일을 재설정하지 않지만 모든 브라우저에서 차이 없이 동일한 출력을 표시하는 Normalize를 가져왔습니다.

으아악

위 내용은 모든 브라우저에서 동일한 출력을 보여줍니다.

어떤 것을 선택해야 하고 어떤 것이 원활한 흐름을 위해 더 좋은지에 대해 개발자들 사이에서 지속적인 논쟁이 있습니다.

Normalize는 유용한 기본 스타일을 유지하고 불필요한 스타일을 제거하며, 재설정은 브라우저에서 모든 스타일을 제거합니다. 재설정에서는 브라우저를 재설정한 후 모든 스타일을 다시 선언해야 하지만 정규화는 필요한 스타일을 유지하고 원하지 않는 스타일만 제거합니다. 표준화는 사용하기 쉽고 현대적인 기술입니다.