웹 사이트 유용성의 주요 지표는 속도, 더 정확하게는 방문자의 브라우저 창에 페이지가 얼마나 빨리 나타나는지입니다. 웹 서버 속도, 방문자의 인터넷 연결, 브라우저가 다운로드해야 하는 파일 크기 등 속도에 영향을 미치는 많은 요소가 있습니다. 서버와 연결 속도를 제어할 수는 없지만 웹 사이트의 웹 페이지를 구성하는 파일의 크기는 제어할 수 있습니다.
웹 사이트를 더 빠르게 만들기 위해 웹 빌더는 정기적으로 웹 사이트의 모든 이미지 파일을 압축하고 최적화하며 파일 크기를 몇 퍼센트 포인트 줄이기 위해 이미지 품질을 희생하는 경우가 많습니다. CSS 스타일 시트는 일반 텍스트 파일이고 이미지에 비해 상대적으로 작기 때문에 웹 빌더는 CSS 스타일 시트 파일의 크기를 줄이기 위한 조치를 취하는 것을 거의 고려하지 않습니다. 그러나 CSS 약어 및 기타 간단한 트릭을 사용하면 스타일 시트의 크기를 크게 줄일 수 있습니다. 내 스타일시트에 대한 비공식 임시 테스트에서 파일 크기를 약 25-50% 줄였습니다.
CSS의 약어 속성을 사용합니다.
CSS 속기 속성은 여러 관련 속성 집합을 대체하는 데 사용되는 특수 속성 이름입니다. 예를 들어, 패딩 속성은 padding-top, padding-right, padding-bottom 및 padding-left의 약자입니다.
단축 속성을 사용하면 여러 속성/속성 쌍을 CSS 스타일시트의 한 줄의 코드로 압축할 수 있습니다. 예를 들어 다음 코드를 고려해보세요.
.샘플1 {
여백 상단: 15px;
오른쪽 여백: 20px;
여백 하단: 12px;
왼쪽 여백: 24px;
패딩 상단: 5px;
오른쪽 패딩: 10px;
패딩 하단: 4px;
왼쪽 패딩: 8px;
테두리 상단 너비: 얇음;
테두리 상단 스타일: 단색;
테두리 상단 색상: #000000;
}
이를 일부 약어 속성으로 바꾸면 코드가 다음과 같이 줄어들 수 있으며 두 가지의 실제 효과는 정확히 동일합니다.
.샘플1 {
여백: 15px 20px 12px 24px;
패딩: 5px 10px 4px 8px;
테두리 상단: 얇은 솔리드 #000000;
}
축약된 속성에는 여러 속성이 있으며 각 속성은 축약된 속성에 결합된 일반 속성에 해당합니다. 속성은 공백으로 구분됩니다.
여백 속성의 선형 측정과 같이 속성에 유사한 값이 있는 경우 약식 속성을 따르는 속성의 순서가 중요합니다. 속성의 순서는 상단(상단 테두리는 비어 있음)에서 시작하여 상자를 중심으로 시계 방향으로 계속됩니다.
약어 속성의 모든 속성이 동일한 경우 단일 속성을 나열하고 앞에 4번 복사하면 됩니다. 따라서 다음 두 속성은 동일합니다.
여백: 5px 5px 5px 5px;
여백: 5px;
마찬가지로 테두리 여백 또는 간격 속성 다음에 오는 두 가지 속성을 사용하여 위쪽/아래쪽 및 오른쪽/왼쪽 속성 쌍을 나타낼 수 있습니다.
여백: 5px 10px 5px 10px;
여백: 5px 10px;
서로 다른 값인 경우 속성의 순서는 중요하지 않습니다. 따라서 테두리 색상, 테두리 스타일, 테두리 너비 등의 속성은 순서에 관계없이 개요 속성을 따를 수 있습니다. 속성을 무시하는 것은 스타일 규칙에서 해당 일반 속성을 생략하는 것과 같습니다.
CSS 약어 속성 목록
다음은 CSS 약식 속성과 해당 속성이 나타내는 일반 속성 목록입니다.
배경 : 배경첨부, 배경색상, 배경이미지, 배경위치, 배경반복
테두리: 테두리 색상, 테두리 스타일, 테두리 너비
border-bottom(하단 테두리): 하단 테두리 색상, 하단 테두리 스타일, 하단 테두리 너비
border-left(왼쪽 테두리): 왼쪽 테두리 색상, 왼쪽 테두리 스타일, 왼쪽 테두리 너비
border-right (오른쪽 테두리): 오른쪽 테두리 색상, 오른쪽 테두리 스타일, 오른쪽 테두리 너비
border-top (상단 테두리): 상단 테두리 색상, 상단 테두리 스타일, 상단 테두리 너비
큐(사운드 큐): 프리 큐, 포스트 큐
세례반: 세례반, 글꼴 크기, 글꼴 스타일, 글꼴 두께, 글꼴 변형, 줄 높이, 글꼴 크기 조정, 글꼴 스트레칭
list-style: 목록 스타일 이미지, 목록 스타일 위치, 목록 스타일 유형
여백(공백): 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백
외곽선: 외곽선 색상, 외곽선 스타일, 외곽선 너비
패딩: 위쪽 간격, 오른쪽 간격, 아래쪽 간격, 왼쪽 간격
Pause(일시 중지): 이후에 일시 중지, 이전에 일시 중지, 공백 줄이기
CSS 스타일시트의 크기를 줄이는 또 다른 방법은 문서에서 불필요한 공백을 대부분 제거하는 것입니다. 즉, 각 규칙 위반을 한 줄의 코드에 넣으십시오. 즉, 원래 코드에 삽입된 줄 바꿈과 들여쓰기를 제거하여 각 속성/속성을 별도의 줄로 분리하십시오.
예를 들어, 다음 코드 예제는 내용은 동일하지만 두 번째 코드 예제는 훨씬 더 세련되었습니다.
h1 {
글꼴 크기: x-대형;
글꼴 두께: 굵게;
색상: #FF0000;
}
h1 {글꼴 크기: x-대형; 글꼴 두께: 굵게: #FF0000}
댓글 삭제
CSS 코드에서 주석을 제거하는 것은 파일 크기를 줄이는 또 다른 방법입니다. 주석은 코드를 읽는 데 유용하지만 브라우저가 웹 페이지를 생성하는 데는 도움이 되지 않습니다. 많은 웹 빌더는 모든 코드 줄이나 최소한 모든 규칙 문에 주석을 다는 데 익숙합니다. 대부분의 CSS 속성과 속성은 읽고 이해하기 쉽기 때문에 CSS 스타일시트에서는 이러한 관대한 주석이 거의 필요하지 않습니다. 클래스, ID 및 기타 선택기에 의미 있는 이름을 사용하면 코드를 읽기 쉽고 유지 관리하기 쉽게 유지하면서 대부분의 주석을 제거할 수 있습니다.
h1 { /* 제목 1 스타일*/
글꼴 크기: x-대형; /* x-대형 크기 */
글꼴 두께: 굵게 /* 굵게 */
색상: #FF0000; /* 빨간색 */
}
속기 속성을 사용하고, 불필요한 공백을 제거하고, 주석을 생략하면 CSS 스타일 시트 파일의 크기를 크게 줄일 수 있습니다. 이는 결과적으로 웹 사이트 속도 향상이라는 전반적인 목표에 작지만 잠재적으로 눈에 띄는 기여를 할 것입니다.