CSS에서 단축 속성(shorthand properties)은 여러 개의 CSS 속성을 한 줄로 축약하여 작성할 수 있도록 도와주는 속성이다. 이를 사용하면 코드가 간결하고 읽기 쉬워지며, 스타일 시트를 더욱 효율적으로 관리할 수 있다.
margin과 padding
margin 속성
margin은 요소의 바깥 여백을 설정하는 속성이다.- 단축 속성으로 1~4개의 값을 지정할 수 있으며, 각각 위, 오른쪽, 아래, 왼쪽 여백을 설정한다.
예시1
/* 상, 우측, 하단, 좌측 여백을 각각 설정 */
margin: 10px 20px 30px 40px;10px: 상 (top)20px: 우측 (right)30px: 하단 (bottom)40px: 좌측 (left)
예시2
- 2개의 값이 주어지면 첫 번째 값은 상, 하 여백을 설정하고, 두 번째 값은 좌, 우 여백을 설정한다.
margin: 10px 20px; /* 상하 10px, 좌우 20px */예시3
- 1개의 값만 주어지면, 모든 방향에 동일한 값을 설정한다.
margin: 10px; /* 모든 방향 10px */예시4
- 3개의 값이 주어지면, 첫 번째 값은 상, 두 번째 값은 좌우, 세 번째 값은 하 여백을 설정한다.
margin: 10px 20px 30px; /* 상 10px, 좌우 20px, 하 30px */padding 속성
padding은 요소의 안쪽 여백을 설정하는 속성이다.margin과 같은 방식으로 값을 설정할 수 있다.
예시
/* 상, 우측, 하단, 좌측 여백을 각각 설정 */
padding: 10px 20px 30px 40px;10px: 상 (top)20px: 우측 (right)30px: 하단 (bottom)40px: 좌측 (left)- 2개, 3개, 1개 값을 지정하는 방법도
margin과 동일하다.
border 속성
border
border는 요소의 경계선을 설정하는 속성이다. 이 속성은 경계선의 두께, 스타일, 색상을 지정할 수 있다.border는 3가지 속성(border-width,border-style,border-color)을 한 줄에 작성할 수 있는 단축 속성이다.
예시
border: 2px solid red;2px: 경계선의 두께solid: 경계선 스타일 (실선)red: 경계선 색상- 값의 개수에 따라:
- 1개 값:
border-width - 2개 값:
border-width와border-style - 3개 값:
border-width,border-style,border-color
- 1개 값:
border-radius
border-radius는 요소의 모서리 둥글기를 설정하는 속성이다.- 1개 이상의 값을 사용하여 각 모서리의 둥근 정도를 설정할 수 있다.
예시1
border-radius: 10px;모든 모서리에 10px의 둥근 곡선을 적용한다.
예시2
- 2개의 값을 주면, 첫 번째 값은 상단 좌우 모서리, 두 번째 값은 하단 좌우 모서리의 둥근 정도를 설정한다.
border-radius: 10px 20px; /* 상단 좌우 10px, 하단 좌우 20px */예시3
- 4개의 값을 주면 각각 상 좌, 상 우, 하 좌, 하 우 모서리의 둥근 정도를 설정한다.
border-radius: 10px 20px 30px 40px; /* 상 좌 10px, 상 우 20px, 하 좌 30px, 하 우 40px */font 속성
font속성은 글꼴 스타일과 관련된 여러 속성(font-family,font-size,font-weight,font-style,line-height,letter-spacing)을 한 번에 설정할 수 있는 단축 속성이다.
예시
font: italic bold 16px Arial, sans-serif;italic: 글꼴 스타일 (기울임꼴)bold: 글꼴 두께 (굵게)16px: 글꼴 크기Arial, sans-serif: 글꼴 패밀리font속성은 글꼴 스타일을 제외하고, 다섯 가지 속성 중 4개 이상을 지정해야 한다. 순서대로font-style,font-variant,font-weight,font-size,line-height,font-family를 지정한다.
background 속성
background는 배경과 관련된 여러 속성(background-color,background-image,background-position,background-size,background-repeat,background-attachment,background-origin,background-clip)을 한 번에 설정할 수 있는 단축 속성이다.
예시
background: #ff0000 url('image.jpg') no-repeat center center;#ff0000: 배경색 (빨간색)url('image.jpg'): 배경 이미지no-repeat: 배경 이미지 반복 안 함center center: 배경 이미지 위치 (중앙)background속성은 여러 값을 공백으로 구분하여 나열한다.
list-style 속성
list-style속성은 목록에 관련된 여러 속성(list-style-type,list-style-position,list-style-image)을 한 번에 설정할 수 있는 단축 속성이다.
예시
list-style: square inside url('bullet.png');square: 목록 항목의 모양 (사각형)inside: 목록 항목의 텍스트와 기호 간 위치url('bullet.png'): 목록 항목의 기호로 사용할 이미지
transition 속성
transition속성은 요소의변화에 대한 애니메이션을 설정하는 속성이다.transition-property,transition-duration,transition-timing-function,transition-delay를 한 번에 설정할 수 있다.
예시
transition: all 0.3s ease-in-out;all: 모든 속성에 대해 적용0.3s: 애니메이션 지속 시간ease-in-out: 애니메이션 타이밍 함수 (부드러운 시작과 끝)
정리
CSS 단축 속성은 스타일 시트를 간결하고 효율적으로 작성할 수 있게 해준다. 다양한 CSS 속성들이 단축 형식으로 제공되므로, 코드를 더 깔끔하고 관리하기 쉬운 방식으로 작성할 수 있다. 특히 여러 속성을 묶어서 한 번에 작성하면 코드 길이가 줄어들고, 읽기 쉽고 유지보수하기 쉬운 스타일 시트를 만들 수 있다.
Turning Vision into Reality.