CSS에서 기본 스타일을 지우는 방법

CSS는 웹페이지를 더욱 아름답고 운영하기 쉽게 만들 수 있는 프론트엔드 개발 기술입니다. 그러나 웹 페이지를 더욱 아름답게 만들기 위해 많은 CSS 스타일을 사용할 수 있으며, 이로 인해 웹 페이지가 원래 스타일을 잃거나 원하는 효과와 일치하지 않게 될 수도 있습니다. 이 기사에서는 CSS의 기본 원칙을 더 잘 이해하기 위해 기본 CSS 스타일을 지우는 몇 가지 기술을 소개합니다.

1. CSS Reset

CSS Reset은 기본 스타일을 지우는 기술입니다. 브라우저의 모든 기본 스타일을 삭제하여 웹 페이지의 모든 기본 모양과 효과를 지울 수 있습니다. CSS Reset은 수동으로 구현하거나 일부 기성 도구를 사용하여 구현할 수 있습니다. 다음은 손으로 쓴 CSS 재설정 예입니다.

*{

margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font-weight: normal;
font-style: normal;
line-height: 1;
vertical-align: baseline;
list-style: none;

}

이 코드는 모든 요소의 여백, 패딩, 테두리, 글꼴 크기, 글꼴 두께, 글꼴 스타일, 줄 높이, 세로 정렬 및 목록 스타일을 모두 재설정합니다. 기본값으로. 이렇게 하면 각 요소가 기본 CSS 위에서만 작동하고 원본 CSS와 브라우저의 기본 스타일에 영향을 받지 않도록 할 수 있습니다.

2. Normalize.css

CSS 재설정은 기본 스타일을 완전히 지울 수 있지만 때로는 일부 기본 스타일을 유지하고 이를 더 잘 제어하고 싶을 때도 있습니다. 이때 Normalize.css를 사용해야 합니다. Normalize.css는 스타일을 표준화하는 데 사용되는 CSS 파일로, 브라우저 간의 스타일 차이를 통일하면서도 브라우저 자체의 기본 스타일을 유지할 수 있습니다. 다음은 샘플 코드입니다:

/!normalize.css v8.0.1 | MIT 라이선스 | github.com/necolas/normalize.css /

/* 문서
== =============================================== == =========== */

/**

• 1. 모든 브라우저에서 줄 높이를 수정하세요.
• 2. iOS에서 방향 변경 후 글꼴 크기 조정을 방지하세요.
     */

html {
줄 높이: 1.15; / 1 /
-webkit-text- 크기 조정: 100%; / 2 /
-ms-text-size-adjust: 100%; / 2 /
-moz-osx-font-smoothing: greyscale;
-webkit-font-smoothing:
상자 크기 조정: 테두리 상자;
}

/* 섹션
============================= == ========================================= */

/**

• 모든 브라우저에서 여백을 제거하세요.
  */

body {
margin: 0;
padding: 0;
}
...

위 코드는 Normalize.css의 일부에 불과하며 브라우저의 일반적인 HTML 부분을 재설정합니다. 필요에 따라. Normalize.css를 사용하면 다양한 브라우저가 기본 스타일의 간섭 없이 웹 페이지를 정상적으로 표시할 수 있는지 확인할 수 있습니다.

3. 선택기 사용

CSS Reset 및 Normalize.css를 사용하는 것 외에도 선택기를 사용하여 기본 스타일을 지울 수도 있습니다. 선택기 스타일을 추가하면 브라우저에서 기본 스타일을 쉽게 제거할 수 있습니다. 다음은 샘플 코드입니다.

html,body,h1,h2,h3,h4,p,ol,ul,li,blockquote {

margin:0;
padding:0;

}

여기에서는 쉼표로 구분된 요소 목록을 사용하여 일부 요소를 결합했습니다. 가장 일반적으로 사용되는 HTML 요소 스타일은 0으로 재설정됩니다. 이러한 방식으로 언제든지 재설정해야 하는 요소를 추가하고 브라우저의 기본 스타일을 지울 수 있습니다.

4. CSS 라이브러리 사용

CSS Reset 또는 Normalize.css를 수동으로 작성하지 않으려면 미리 작성된 CSS 라이브러리를 사용할 수 있습니다. 다음은 몇 가지 일반적인 CSS 라이브러리 목록입니다.

Bulma;
1. Foundation;
2. Semantic UI.
4. 이러한 라이브러리는 모두 매우 편리하고 실용적인 고급 CSS 스타일 세트를 제공합니다. 웹사이트 디자인. 이러한 라이브러리의 도움으로 우리는 다양한 사전 설정 스타일을 사용하고, 기본 스타일을 지우고, 안정적인 기본 스타일과 레이아웃을 사용하여 웹 사이트 개발 속도를 높일 수 있습니다.

이러한 라이브러리를 사용할 때 카탈로그와 문서를 미리 살펴보고 코딩 방법과 각 스타일의 의미를 이해하여 효과적으로 사용해야 합니다.

요약

CSS 클리어 디폴트 스타일 기술은 프론트엔드 개발의 기본 동작입니다. CSS Reset, Normalize.css 및 선택기 스타일의 도움으로 브라우저 기본 스타일을 지울 수 있어 더 아름답고 우아한 웹 페이지를 쉽게 디자인할 수 있습니다. 물론 실제 개발 과정에서 효율적이고 안정적이며 호환 가능한 기본 스타일을 제공할 수 있는 CSS 라이브러리를 사용하는 것도 좋은 선택입니다.

위 내용은 CSS에서 기본 스타일을 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!