[JS] CSS 단축 속성

🔷 단축속성

서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 속성이다. 단축 속성을 사용하면 간결한 스타일 시트를 작성할 수 있다.

🔸 여백 속성

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

위와 같이 네 값을 한 구문에 작성해 간결하게 변경할 수 있다.

margin: 10px 5px 10px 5px;

• 한 개의 값
  padding: 100px;
  상, 하, 좌, 우 네 영역에 전부 적용된다.

• 두 개의 값
  padding: 100px 80px;
  첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정한다.

• 세 개의 값
  padding: 100px 80px 100px;
  첫 번째는 위, 두 번째는 좌우, 세 번째는 아래의 여백을 설정한다.

• 네 개의 값
  padding: 100px 80px 100px 80px;
  각각 상, 우, 하, 좌 (시계 방향!) 순서로 여백을 설정한다.
  
  

🔸 글꼴 속성

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

font: italic bold .8em/1.2 Arial, sans-serif;

그런데 강의하시는 강사 분 말로는, 폰트는 그냥 풀어서 쓰는 경우가 많다고 한다.

🔸 테두리 속성

border-width: 1px;
border-style: solid;
border-color: #000;

border: 1px solid #000;

엄청 많이 사용되는 단축 속성!

🔸 배경 속성

background-color: #000
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;

background: #000 url(images/bg.gif) no-repeat top right;