초보자가 CSS 코드를 어떻게 간소화하고 최적화하는지 이 글을 읽고 나면 알게 되실 겁니다.

이 기사의 내용은 초보자가 CSS 코드를 간소화하고 최적화할 수 있는 방법에 대한 것입니다. 필요한 친구가 참고할 수 있기를 바랍니다.

1. 주석을 단순화하세요

많은 경우, 특히 C/Java와 같은 언어 개발 분야에서 일한 프로그래머는 다음과 같이 여러 줄로 된 주석을 작성하고 싶을 것입니다.

컴파일된 언어에서 물론 이러한 주석에는 문제가 없지만 CSS에서는 CSS 파일의 크기가 크게 늘어납니다. 다음과 같이 단순화해야 합니다.

이렇게 하면 가독성을 유지하면서 파일 크기가 줄어듭니다. 실제로 CSS 파일의 실제 게시 버전에서는 이러한 주석을 완전히 제거할 수 있습니다.

2. 색상 코드 단순화

CSS에서는 16진수 색상 코드를 다루는 경우가 많습니다. 다음과 같은 "표준 형식"을 작성하는 데 익숙할 수 있습니다.

color: #ffffff;
color: #ff88ff;

실제로 이 작성은 CSS에서 단순화될 수 있습니다. 다음과 같이 작성할 수 있습니다.

color: #fff;
color: #f8f;

3. 여러 줄 속성 대신 한 줄 속성을 사용하세요

여백/패딩/글꼴/테두리와 같은 CSS 속성은 여러 줄이 아닌 한 줄에 설정할 수 있습니다. 예:

padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
padding-right: 0;

다음과 같이 쓸 수 있습니다.

padding: 10px 0 10px 0;

순서는 위쪽, 오른쪽, 아래쪽, 왼쪽입니다. 물론, margin과 padding 속성은 left, right/top, lower 값이 동일할 때 더 간단하게 작성할 수 있습니다. 예를 들어 위의 예에서는 padding: 10px 0;

왼쪽과 오른쪽 값이 동일할 경우 다음과 같이 쓸 수도 있습니다.

padding: 10px ;

다른 약어 방법은 인터넷에서 일부 정보를 참조할 수 있습니다. 물론 CSS를 작성하는 과정에서 배우기 위해 TopStyle 소프트웨어를 사용하는 것이 좋습니다. 이 소프트웨어는 구체적인 팁을 제공합니다.

4. 값이 0이면 단위를 생략할 수 있습니다

예: padding: 0;

5. 여러 요소의 속성을 동시에 설정합니다

예. 예를 들면:

h1 {
margin: 0;
padding: 0;
}
h2 {
margin: 0;
padding: 0;
}
h3 {
margin: 0;
padding: 0;
}

더 나은 작성 방법은 다음과 같습니다:

h1,h2,h3 {
margin: 0;
padding: 0;
}

6. 공백 및 줄 바꿈 삭제
이것은 매우 눈에 띄지 않는 작업이지만 나중에 인터넷에 적용해야 하는 CSS의 경우입니다. 개발 단계를 벗어나면 언어는 이런 방식으로 처리되어야 합니다. 적어도 모든 Google 애플리케이션은 이렇게 합니다. 예:

h1 {
margin: 0;
padding: 0;
}
blockquote {
background-color: #ffcccc;
}

는 다음과 같이 처리되어야 합니다.

h1{margin:0;padding:0;}
blockquote{background:#fcc;}

사실 CSS 파일에는 줄바꿈이 필요하지 않습니다. 하지만 코드의 가독성을 유지하려면 각 요소를 한 줄에 작성하는 것이 좋습니다. 현재 개발 프로세스에 영향을 주지 않도록 유사한 작업을 수행할 수 있는 도구가 있습니다.

7. 만료 시간을 설정하고 GZip을 사용하세요

가능하다면 CSS 파일의 만료 시간을 설정하고 CSS 파일을 전송하려면 GZip을 활성화해야 합니다. 전자를 설정하면 널리 사용되는 브라우저에서 CSS 파일을 캐시할 수 있으므로 로드가 수행될 때마다 파일을 읽을 필요가 없으므로 프로세스 속도가 크게 빨라지고 트래픽 소비도 줄어듭니다. GZip을 켜면 CSS 파일이 상상할 수 없을 정도로 줄어들 수 있으며 오늘날 가장 널리 사용되는 브라우저는 GZip을 지원합니다.

위 내용은 초보자가 CSS 코드를 간소화하고 최적화하는 방법에 대한 완전한 소개입니다. CSS 비디오 튜토리얼에 대해 자세히 알고 싶다면 PHP 중국어 웹사이트에 주목하세요.

위 내용은 초보자가 CSS 코드를 어떻게 간소화하고 최적화하는지 이 글을 읽고 나면 알게 되실 겁니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!