[HTML/CSS] 2-5. 단축속성

단축 속성(여백 속성)

 

바깥과 안쪽 여백의 단축 속성도 똑같이 동작합니다.

바깥 여백, margin 속성은 한 개, 두 개, 세 개, 네 개의 값을 사용해 지정합니다.

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

 

다음의 네 값 구문 속성을 사용한 선언과 같습니다.

방향이 시계 방향임을 기억하세요.

각 값은 위, 오른쪽, 아래, 왼쪽을 나타냅니다.

margin: 10px 5px 10px 5px;

 

padding: 100px; (1-2-3-4)

• 한 개의 값은 모든 네 면의 여백을 설정합니다.

 

padding: 100px 80px; (1-3 / 2-4)

• 두 개의 값을 지정하면 첫 번째는 위와 아래, 두 번째는 왼쪽과 오른쪽 여백을 설정합니다.

 

padding: 100px 80px 100px; (1 / 2-4 / 3)

• 세 개의 값을 지정하면 첫 번째는 위, 두 번째는 왼쪽과 오른쪽, 세 번째 값은 아래 여백을 설정합니다.

 

padding: 100px 80px 100px 80px; (1 / 2 / 3 / 4)

• 네 개의 값을 지정하면 각각 상, 우, 하, 좌 순서로 여백을 지정합니다. (시계방향)

 

 

요소 가운데 정렬

margin: 0 auto;

 

 

 

---

단축 속성(글꼴 속성)

 

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;

 

 

---