CSS 약식 속성 사용 방법 알아보기 스타일시트가 공간을 덜 차지하도록 하십시오.
CSS 약식 속성을 사용하면 더 적게 쓰고 더 많이 할 수 있습니다.
h1의 스타일을 지정하고 싶다고 가정해 보겠습니다. 조지아 요소 font-family, 글꼴 크기는 42픽셀, 행 높이는 1.25입니다.
먼저 아래의 일반 CSS 방법을 살펴보겠습니다.
h1 {
font-family: "Georgia", "serif";
font-size: 42px;
line-height: 1.25;
}이제 CSS 글꼴을 사용하는 것과 비교해 보세요. 아래의 약식 방법:
h1 {
font: 42px/1.25 "Georgia", "serif";
}세 줄을 하나로 압축!
속기 속성은 여러 스타일 선언을 한 줄로 결합하여 작동하고 코드가 더 적은 공간을 차지하도록 합니다.
속기 코드는 표현이 더 풍부한 일반 방법만큼 가독성이 떨어질 수 있습니다. 그러나 그것은 새롭기 때문입니다. 사용하기 시작하면 금세 제2의 천성이 됩니다.
포인트를 홈으로 구동하기 위한 한 가지 더 짧은 CSS 속성 예제를 살펴보겠습니다.
다음은 위쪽 및 아래쪽 패딩이 12px이고 왼쪽 및 오른쪽 패딩이 20px인 버튼입니다.
다음 패딩 속성을 사용합니다.
button {
padding-top: 12px;
padding-right: 20px;
padding-bottom: 12px;
padding-left: 20px;
}
이제 약식 padding을 사용해 보겠습니다. 속성을 지정하고 CSS를 덜 부풀리게 합니다.
button {
padding: 12px 20px; /* top-bottom, left-right */
}네 줄을 하나로 압축!
padding 위의 속기는 두 값을 사용하기 때문에 2값 속기라고 합니다.
- 첫 번째 값
12pxpadding-top에 해당 및padding-bottom재산. 20px값은padding-left에 해당합니다. 및padding-right.
다음은 CSS의 약식 속성의 전체 목록입니다.
all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border- 반경, 오른쪽 테두리, 테두리 스타일, 테두리 위쪽, 테두리 너비, 열 규칙, 열, 플렉스, 플렉스 흐름, 글꼴, 간격, 그리드, 그리드 영역, 그리드 열, 그리드 행, 그리드- 템플릿, 목록 스타일, 여백, 마스크, 오프셋, 개요, 오버플로, 패딩, 장소 콘텐츠, 장소 항목, 장소 자체, 스크롤 여백, 스크롤 패딩, 텍스트 장식, 텍스트 강조, 전환.
Mozilla의 전체 CSS 약식 문서를 참조하세요.
모든 속기 속성이 암기할 가치가 있는 것은 아닙니다. 거의 사용하지 않을 가능성이 높기 때문입니다. 그러나 이 튜토리얼 font 및 padding , 가장 일반적으로 사용되는 속기 중 일부입니다.
다음의 약식 속성도 살펴볼 가치가 있습니다(많이 사용하게 될 것이기 때문에) margin , background , border , animation , transition , border-radius .