이 기사에서는 웹 사이트 재구성의 기초를 마련하는 몇 가지 일반적인 CSS 기술을 요약합니다. 유용한 내용을 배울 수 있기를 바랍니다.
1. CSS 약어를 사용하세요
약어를 사용하면 CSS 파일의 크기를 줄이고 읽기 쉽게 만들 수 있습니다. CSS 약어의 주요 규칙은 "CSS 기본 구문"을 참조하세요.
2. 값이 0이 아닌 이상 단위를 명확하게 정의하세요.
차원의 단위를 정의하는 것을 잊어버리는 것은 CSS 초보자들이 흔히 저지르는 실수입니다. HTML에서는 ;100만 쓸 수 있지만 CSS에서는 "너비:100em"과 같이 정확한 단위를 제공해야 합니다. 단위를 정의하지 않은 상태로 둘 수 있는 예외는 두 가지뿐입니다: 줄 높이와 값 0입니다. 그렇지 않으면 다른 모든 항목 값 뒤에는 단위가 와야 합니다. 값과 단위 사이에 공백을 추가하지 않도록 주의하세요.
3. 대소문자를 구분합니다.
XHTML에서 CSS를 사용할 때 CSS에 정의된 요소 이름은 대소문자를 구분합니다. 이 오류를 방지하려면 모든 정의 이름에 소문자를 사용하는 것이 좋습니다.
class 및 id 값은 HTML과 XHTML에서도 대소문자를 구분합니다. 대소문자를 혼합하여 작성해야 하는 경우 CSS의 정의가 XHTML의 태그와 일치하는지 주의 깊게 확인하세요.
4. 클래스 및 ID 이전의 요소 제한을 취소합니다.
요소에 대한 클래스 또는 ID를 정의하기 위해 작성할 때 ID는 페이지에서 고유하고 페이지에서 여러 번 사용될 수 있으므로 이전 요소 한정자를 생략할 수 있습니다. 요소를 한정하는 것은 의미가 없습니다. 예를 들어:
div#content { /* 선언 */ }
fieldset.details { /* 선언 */ }
다음과 같이 쓸 수 있다
#content { /* 선언 */ }
.details { /* 선언 */ }
이렇게 하면 일부 바이트가 절약됩니다.
5.기본값
일반적으로 padding의 기본값은 0이고, background-color의 기본값은 transparent입니다. 그러나 기본값은 브라우저마다 다를 수 있습니다. 충돌이 두려운 경우 다음과 같이 스타일 시트 시작 부분에서 모든 요소의 여백 및 패딩 값을 0으로 정의할 수 있습니다.
* {
여백:0;
패딩:0;
}