css {
프로퍼티명 : 값;
}
축약표현은 여러 CSS속성을 하나의 표현으로 설정가능.
color
텍스트 색상을 지정합니다.
color: red; /* 빨간색 */
color: #ff5733; /* HEX 색상 */
color: rgb(255, 87, 51); /* RGB 값 */padding
요소 내부 여백(컨텐츠와 경계선 사이)을 설정합니다.
padding: 10px; /* 모든 방향 10px */
padding: 10px 20px; /* 위아래 10px, 좌우 20px */
padding: 10px 15px 20px; /* 위 10px, 좌우 15px, 아래 20px */
padding: 10px 15px 20px 25px; /* 위, 오른쪽, 아래, 왼쪽 순서 */margin
요소 외부 여백(요소와 요소 사이의 거리)을 설정합니다.
margin: 0 auto; /* 수평 가운데 정렬 */
margin: 20px; /* 모든 방향 20px */
margin: 10px 15px 5px 0; /* 위, 오른쪽, 아래, 왼쪽 */width
요소 외부 여백(요소와 요소 사이의 거리)을 설정합니다.
height: 200px; /* 고정 높이 */
height: auto; /* 내용에 따라 자동 조정 */background
요소의 배경을 설정합니다.
background-color:#CCC;
background-image:url("image/photo1.png");
background-position:left center;
background-size:20%;
background-repeat:no-repeat;
background-attachment:fixed;
=>
축약표현
background:#ccc url("image/photo1.jpg") left center/20% no-repeat fixed
