CSS를 작성하는 가장 효과적인 방법 중 하나는 약어를 사용하는 것입니다. 약어를 사용하면 CSS 파일을 더 작고 읽기 쉽게 만들 수 있습니다. CSS 속성의 약어를 이해하는 것도 프론트엔드 개발 엔지니어의 기본 기술 중 하나입니다. 오늘은 CSS 속성의 약어를 체계적으로 요약해보겠습니다.
색상 약어
색상의 약어는 가장 간단합니다. 색상 값이 16진수일 때 각 색상의 값이 동일하면 다음과 같이 쓸 수 있습니다.
| 색상: #113366 |
다음과 같이 축약될 수 있습니다.
| 색상: #136 |
배경색, 테두리색, 텍스트그림자, 상자그림자 등 16진수 색상값을 사용하는 곳에는 약어를 사용할 수 있습니다.
상자 크기
여기에는 주로 margin과 padding이라는 두 가지 속성이 사용됩니다. margin을 예로 들면 padding도 동일합니다. 상자에는 위, 아래, 왼쪽, 오른쪽의 네 방향이 있으며 각 방향에는 여백이 있습니다.
| 여백 상단:1px; 여백 오른쪽:1px; 여백-바닥:1px; 여백-왼쪽:1px; |
이 네 가지 값은 함께 축약될 수 있습니다.
| 여백:1px 1px 1px 1px; |
약어의 순서는 위쪽->오른쪽->아래쪽->왼쪽입니다. 시계방향. 반대쪽의 값이 같은 경우 생략할 수 있습니다.
| margin:1px;//네 방향의 여백은 동일하며 이는 margin:1px 1px 1px 1px; margin:1px 2px;//상하 여백은 모두 1px이고 왼쪽 및 오른쪽 여백은 모두 2px입니다. 이는 margin:1px 2px 1px 2px와 동일합니다. margin:1px 2px 3px;//오른쪽 여백과 왼쪽 여백은 동일하며 이는 margin:1px 2px 3px 2px; margin:1px 2px 1px 3px;//여기서 위쪽 및 아래쪽 여백은 모두 1px이지만 여기서는 약어를 사용할 수 없습니다. |
국경
테두리는 상대적으로 유연한 속성으로 테두리 너비, 테두리 스타일, 테두리 색상의 세 가지 하위 속성이 있습니다.
| 테두리 너비: 숫자 + 단위; 테두리 스타일: 없음 || 점선 || 삽입 || 테두리 색상: 색상; |
너비, 스타일, 색상 순으로 축약할 수 있습니다.
| 테두리:5px 솔리드 #369; |
때로는 테두리를 더 간단하게 작성할 수도 있고 일부 값을 생략할 수도 있지만 어떤 값이 필요한지 주의해서 테스트해 볼 수도 있습니다.
| border:groove red; //이 테두리의 너비가 얼마인지 추측해 보세요. border:solid; //이것은 어떤 모습일까요? border:5px; //괜찮나요? border:5px red; //괜찮나요? ? border:red; //괜찮나요? ? ? |
위 코드에서 볼 수 있듯이 테두리의 기본 너비는 3px이고, 기본 색상은 검정색입니다. border의 약어에는 border-style이 필수입니다.
각 가장자리에 약어를 사용할 수도 있습니다.
| 테두리 상단:4px 솔리드 #333; 테두리 오른쪽:3px 솔리드 #666; 테두리 하단:3px 솔리드 #666; 테두리 왼쪽:4px 단색 #333; |
각 속성에 약어를 사용할 수도 있습니다.
| border-width: 1px 2px 3px; //최대 4개의 값을 사용할 수 있으며 약어 규칙은 상자 크기의 약어와 유사하며 아래와 같습니다. 테두리 스타일: 실선 점선 홈; 테두리 색상:빨간색 파란색 흰색 검정색; |
개요
윤곽선은 테두리와 유사합니다. 차이점은 테두리는 상자 모델에 영향을 주지만 윤곽선은 그렇지 않다는 것입니다.
| 윤곽선 너비: 숫자 + 단위; 윤곽선 스타일: 없음 || 점선 || 홈 || 개요 색상: 색상; |
다음과 같이 축약될 수 있습니다.
| 개요: 1px 단색 빨간색; |
마찬가지로,outline의 약어에서도윤곽선 스타일도 필수이고 나머지 두 값은 선택사항입니다. 기본값은 border와 동일합니다.
배경
배경은 가장 일반적으로 사용되는 약어 중 하나이며 다음 속성을 포함합니다.
| 배경색: 색상 || #hex || RGB(% || 0-255) || 배경 이미지:url(); 배경 반복: 반복 || 반복-x || 반복 없음; 배경 위치: XY || (상단||하단||가운데) (왼쪽||오른쪽||가운데); 배경 첨부: 스크롤 || |
배경의 약어는 CSS의 효율성을 크게 향상시킬 수 있습니다.
| 배경:#fff url(img.png) 반복 없음 0 0; |
배경의 약어에도 몇 가지 기본값이 있습니다.
| 배경:투명 없음 반복 왼쪽 상단 스크롤; |
배경 속성의 값은 상속되지 않으며, 그 중 하나만 선언할 수 있으며, 나머지 값에는 기본값이 적용됩니다.
세례반
글꼴 약어는 가장 많이 사용되는 글꼴이기도 하며 효율적인 CSS를 작성하는 방법 중 하나이기도 합니다.
글꼴에는 다음 속성이 포함됩니다.
| 글꼴 스타일: 일반 || 기울임체 || 글꼴 변형:일반 || 글꼴 두께: 보통 || 굵게 || 더 굵게 || 글꼴 크기: (숫자+단위) || (xx-작은 - xx-큰); 줄 높이: 일반 || (숫자+단위); 글꼴 계열:이름,"더 많은 이름"; |
글꼴의 각 속성에는 기본값도 있습니다. 다음 기본값을 기억하는 것이 상대적으로 중요합니다.
| 글꼴 스타일: 일반; 글꼴 변형:일반; 글꼴 두께: 보통; 글꼴 크기: 상속; 줄 높이: 보통; 글꼴 계열:상속; |
사실 이러한 약어 중에서 가장 주의가 필요한 것은 글꼴의 약어인데, 조금만 부주의하면 예상치 못한 결과가 발생할 수 있기 때문에 많은 사람들이 글꼴 약어 사용에 동의하지 않습니다.
하지만 여기에 작은 매뉴얼이 있습니다. 글꼴의 약어를 더 잘 이해하는 데 도움이 될 것이라고 믿습니다.
.jpg)
목록 스타일
아마도 가장 일반적으로 사용되는 목록의 속성은 다음과 같습니다.
| 목록 스타일:없음 |
숫자나 점과 같은 기본 목록 스타일을 모두 지웁니다.
목록 스타일에는 세 가지 속성도 있습니다.
| 목록 스타일 유형:없음 || 원 || 소수점 || 상위 로마자 || 목록 스타일 위치: 내부 || 외부 상속 목록 스타일 이미지: (url) || 없음 || |
목록 스타일의 기본 속성은 다음과 같습니다.
| 목록 스타일:디스크 외부 없음 |
이미지가 목록 스타일로 정의된 경우 이미지의 우선순위는 목록 스타일 유형의 우선순위보다 높습니다. 예를 들면 다음과 같습니다.
| 목록 스타일:url 내부 원(../img.gif) |
이 예에서는 img.gif가 존재하면 이전에 설정한 원 기호가 표시되지 않습니다.
PS: 실제로 list-style-type에는 유용한 스타일이 많이 있습니다. 관심 있는 학생들은 https://developer.mozilla.org/en/CSS/list-style-type 을 참조하세요.
border-radius(모서리 반경)
Border-radius는 둥근 테두리를 구현하는 데 사용되는 CSS3에 새로 추가된 속성입니다. 이 속성의 현재 단점은 각 브라우저가 이를 다르게 지원한다는 것입니다. Gecko(firefox) 및 webkit(safari/chrome)은 각각 개인 접두사 -moz- 및 -webkit-을 사용해야 합니다. 더 혼란스러운 점은 단일 모서리의 border-radius 속성이 두 브라우저 간에 더 다르게 작성되면 많은 수의 비공개 속성을 작성해야 한다는 것입니다.
| -moz-border-radius-bottomleft:6px; -moz-border-radius-topleft:6px; -moz-border-radius-topright:6px; -webkit-border-bottom-left-radius:6px; -webkit-border-top-left-radius:6px; -webkit-border-top-right-radius:6px; 테두리 하단 왼쪽 반경:6px; 테두리-상단-왼쪽-반경:6px; 테두리 상단 오른쪽 반경:6px; |
어, 벌써 눈이 멀었나? 이는 왼쪽 상단 모서리가 둥글지 않고 다른 세 모서리가 둥글게 되는 상황을 달성하기 위한 것입니다. 따라서 경계 반경의 경우 Shenfei는 다음 약어를 사용할 것을 강력히 권장합니다.
| -moz-border-radius:0 6px 6px; -webkit-border-radius:0 6px 6px; 테두리 반경:0 6px 6px; |
이것은 훨씬 간단합니다. 추신: 안타깝게도 최신 Safari(4.0.5)에서는 아직 이 약어를 지원하지 않습니다... (@fireyy에게 감사드립니다)
그게 전부입니다. 축약할 수 있는 다른 속성이 있나요? 모두가 함께 토론하는 것을 환영합니다.