CSS 사양에서는 단축 CSS라는 단축 구문을 사용하여 스타일을 생성할 수 있습니다. 단축 CSS를 사용하면 단일 속성 태그로 여러 속성의 값을 지정할 수 있습니다. 예를 들어, 글꼴 속성을 사용하면 한 줄 구문으로 글꼴 스타일, 글꼴 변형, 글꼴 두께, 글꼴 크기, 줄 높이 및 글꼴 모음 속성을 설정할 수 있습니다.
단축 CSS를 사용할 때 주의해야 할 주요 문제는 단축 CSS 속성에서 생략된 값에 해당 속성의 기본값이 할당된다는 것입니다. 두 개 이상의 CSS 규칙이 동일한 태그에 할당되면 페이지가 올바르게 표시되지 않을 수 있습니다.
예를 들어 아래 표시된 H1 태그는 일반 CSS 구문을 사용합니다. 글꼴 변형, 글꼴 스트레치, 글꼴 크기 조정 및 글꼴 스타일 속성의 값에는 기본값이 할당됩니다.
H1 {
글꼴 두께: 굵게;
글꼴 크기: 16pt;
줄 높이: 18pt;
글꼴 모음: Arial;
글꼴 변형: 일반;
글꼴 스타일: 일반;
글꼴 스트레치: 일반;
글꼴 크기 조정: 없음
}
단축 속성을 사용하여 이 태그를 다시 작성해 보겠습니다.
H1 { 글꼴: 굵은 16pt/18pt Arial }
단축 표기법을 사용하여 작성할 경우 생략된 값에는 자동으로 기본값이 할당됩니다. 따라서 위의 간략한 예에서는 글꼴 변형, 글꼴 스타일, 글꼴 스트레치 및 글꼴 크기 조정 태그가 생략되었습니다.
CSS 구문의 약식 및 일반 형식을 사용하여 여러 위치에서 스타일을 정의하는 경우(예: HTML 페이지에 스타일 포함 및 외부 스타일 시트에서 스타일 가져오기) 생략된 속성이 해당 속성을 재정의(또는 연속)할 수 있다는 점에 유의하세요. 다른 곳에서 명시적으로 설정된 속성의 스타일.
따라서 Dreamweaver에서는 기본적으로 구문 작성에 일반 형식의 CSS 기호를 사용합니다. 이렇게 하면 일반 규칙을 무시하는 단축 규칙으로 인해 발생할 수 있는 잠재적인 문제를 방지할 수 있습니다. 단축 CSS 표기법을 사용하여 코딩된 웹 페이지를 Dreamweaver에서 열 때 Dreamweaver에서는 일반 형식을 사용하여 새로운 CSS 규칙을 생성한다는 점에 유의하십시오. 환경 설정 대화 상자의 CSS 스타일 카테고리에서 CSS 편집 환경 설정을 변경할 수 있습니다(Windows에서는 편집>>환경 설정, Macintosh에서는 Dreamweaver>>환경 설정). Dreamweaver에서 CSS 규칙을 만들고 편집하는 방법을 지정합니다.
알아채다
CSS 스타일 패널에서는 일반 기호만 사용하여 규칙을 만듭니다. CSS 스타일 패널을 사용하여 페이지 또는 CSS 스타일 시트를 만드는 경우 속기 CSS 규칙을 직접 코딩하면 속기 속성이 일반 형식에서 생성된 속기 속성을 재정의할 수 있다는 점에 유의하세요. 따라서 일반 CSS 기호를 사용하여 스타일을 만드세요.