단축 속성 (Shorthand properties)

안녕하세요! 프론트엔드 개발의 세계에 오신 것을 환영합니다. 오늘 배울 내용은 CSS 코드를 작성할 때 여러분의 손가락 관절과 퇴근 시간을 지켜줄 아주 고마운 기능, 바로 단축 속성(Shorthand properties)입니다.

단축 속성이란 여러 개의 CSS 속성값들을 단 하나의 선언(declaration)으로 한 번에 설정할 수 있게 해주는 마법 같은 CSS 속성입니다. 이 단축 속성을 사용하면 스타일시트를 훨씬 간결하고 (대부분의 경우) 더 읽기 쉽게 만들 수 있어서, 개발자의 시간과 에너지를 크게 절약해 주죠.

CSS 명세(specification)에서는 같은 테마(theme)로 동작하는 공통 속성들의 정의를 하나로 묶기 위해 단축 속성을 정의해 두었습니다. 가장 대표적인 예로 CSS의 background 속성을 들 수 있습니다. 이 단일 속성 하나만으로 background-color, background-image, background-repeat, 그리고 background-position의 값을 한 번에 다 세팅할 수 있답니다.

💡 강사님의 꿀팁: 단축 속성은 요리로 치면 '밀키트'나 '만능 양념장'과 같아요. 소금, 설탕, 간장을 따로따로 넣을 필요 없이 양념장 한 스푼이면 끝나는 것처럼 코드를 확 줄여줍니다!

---

주의해야 할 엣지 케이스 (Tricky edge cases)

단축 속성을 사용할 때 머릿속에 꼭 넣어두어야 할 몇 가지 까다로운 예외 상황(edge cases)이 있습니다. 이 부분을 놓치면 "어? 내 CSS가 왜 이러지?" 하고 당황할 수 있으니 집중해 주세요!

속성 생략하기 (Omitting properties)

단축 속성을 쓸 때 특정 하위 속성(longhand)의 값을 적지 않고 생략하면, 그 값은 해당 단축 속성이 정의해 둔 '기본값(default value)'으로 자동 세팅됩니다. 그리고 이 기본값은 종종 해당 속성의 오리지널 초깃값(initial value)과 다를 수도 있습니다.

가장 치명적인 점은, 이렇게 생략되어서 기본값으로 채워진 값이 이전에 여러분이 힘들게 설정해 둔 값을 무자비하게 덮어써 버린다(overrides)는 사실입니다!
아래 예시를 볼까요?

p {
  background-color: red;
  background: url("images/bg.gif") no-repeat left top;
}

위 코드를 실행하면 문단의 배경색은 여러분이 위에서 적어둔 red가 되지 않습니다! 대신, 두 번째 줄의 background 단축 속성에서 색상 값을 생략했기 때문에, background-color의 기본값인 transparent(투명)로 덮어씌워 져 버립니다. 첫 번째 줄의 red는 완전히 무시되는 거죠.

💡 강사님의 꿀팁: 단축 속성은 그 안에 포함된 모든 하위 속성들을 리셋하는 폭탄과도 같습니다. 만약 특정 속성(예: 배경색)만 먼저 설정해두고 나중에 배경 이미지만 슬쩍 추가하고 싶다면, background 단축 속성 대신 background-image라는 개별 속성(longhand)을 써야 기존의 색상이 날아가지 않습니다.

또한, 오직 개별 속성(individual properties) 단위로만 부모의 값을 상속(inherit)받을 수 있습니다. 단축 속성에서 값을 생략하면 상속을 받는 게 아니라 '기본값'으로 리셋되어 버리기 때문에, "생략하면 부모 걸 물려받겠지?"라는 기대는 통하지 않습니다. inherit 키워드를 단축 속성에 적용할 수는 있지만, 그것은 단축 속성 덩어리 전체를 상속받는 것이지, 그중 특정 하위 속성 하나만 쏙 골라서 상속받게 할 수는 없어요. 만약 특정 값 하나만 상속받게 만들고 싶다면, 꼼수 없이 개별 속성(longhand property)을 꺼내서 거기에 직접 inherit 키워드를 써주어야만 합니다.

---

속성 순서 (Ordering properties)

단축 속성들은 그들이 대체하는 개별 속성 값들을 적을 때 웬만하면 특정한 순서를 강제하지 않으려고 노력합니다. 이건 값들의 타입(type)이 서로 명확하게 다를 때는 아주 잘 작동해요. 순서가 전혀 안 중요하니까요. (예: background에서 색상은 단어이고, 이미지는 url()이라 순서를 바꿔 써도 브라우저가 찰떡같이 알아듣습니다.)

하지만, 여러 하위 속성들이 동일한 타입의 값(예: 10px, 2em 같은 길이 값)을 가질 때는 순서가 생명이 됩니다.

여기서 아주 중요한 두 가지 케이스가 있습니다:

• 박스의 테두리(edges)와 관련된 속성들: border-style, margin, padding 등
• 박스의 모서리(corners)와 관련된 속성들: border-radius 등

박스의 테두리(상하좌우) (Edges of a box)

박스의 가장자리(edge)를 다루는 단축 속성들, 즉 border-style, margin, padding 같은 녀석들은 항상 1개에서 4개까지의 값을 일관된 문법(syntax)으로 해석합니다.

• 1개 값 문법: border-width: 1em — 이 단일 값은 상하좌우 네 방향 모두에 적용됩니다.
  
• 2개 값 문법: border-width: 1em 2em — 첫 번째 값은 수직(위, 아래) 가장자리를, 두 번째 값은 수평(왼쪽, 오른쪽) 가장자리를 나타냅니다.
  
• 3개 값 문법: border-width: 1em 2em 3em — 첫 번째 값은 위(top), 두 번째 값은 수평(왼쪽, 오른쪽), 세 번째 값은 아래(bottom)를 나타냅니다.
  
• 4개 값 문법: border-width: 1em 2em 3em 4em — 네 개의 값은 각각 위(top), 오른쪽(right), 아래(bottom), 왼쪽(left) 순서로 적용됩니다. 즉, 맨 위부터 시작해서 시계 방향(clock-wise)으로 돌아가는 거죠!
  

💡 강사님의 꿀팁: 이 4개 값의 순서(Top-Right-Bottom-Left)는 영어 단어 'trouble(문제)'의 자음 순서인 TRBL과 똑같습니다. 혹은 시곗바늘이 돌아가는 순서로 외우시면 절대 안 까먹어요! 12시(Top) -> 3시(Right) -> 6시(Bottom) -> 9시(Left) 방향입니다.

박스의 모서리 (Corners of a box)

마찬가지로, 박스의 모서리(둥글기)를 다루는 border-radius 같은 단축 속성도 1개에서 4개까지의 값을 일관된 방식으로 해석합니다. 다만 출발점이 살짝 다릅니다.

• 1개 값 문법: border-radius: 1em — 이 단일 값은 네 개의 모서리 모두에 둥글기를 적용합니다.
  
• 2개 값 문법: border-radius: 1em 2em — 첫 번째 값은 왼쪽 위(top left)와 오른쪽 아래(bottom right) 대각선 모서리를, 두 번째 값은 오른쪽 위(top right)와 왼쪽 아래(bottom left) 대각선 모서리를 세트로 묶어서 적용합니다.
  
• 3개 값 문법: border-radius: 1em 2em 3em — 첫 번째 값은 왼쪽 위, 두 번째 값은 오른쪽 위와 왼쪽 아래, 세 번째 값은 오른쪽 아래에 적용됩니다.
  
• 4개 값 문법: border-radius: 1em 2em 3em 4em — 네 개의 값은 왼쪽 위, 오른쪽 위, 오른쪽 아래, 왼쪽 아래 모서리 순으로 적용됩니다. 즉, 왼쪽 위(top left)에서 시작해서 시계 방향(clock-wise)으로 돌아갑니다!
  

---

배경 속성 (Background properties)

다음과 같은 배경 관련 속성들을 길게 풀어썼다고 생각해 보세요.

background-color: black;
background-image: url("images/bg.gif");
background-repeat: no-repeat;
background-position: left top;

이 네 줄의 코드는 단축 속성을 쓰면 딱 한 줄로 통쾌하게 줄일 수 있습니다:

background: black url("images/bg.gif") no-repeat left top;

(사실 이 단축 형태는 위의 개별 속성 4개에 background-attachment: scroll까지 더해진 것과 같으며, CSS3 버전에서는 여기에 몇 가지 속성이 더 추가로 리셋됩니다.)

CSS3에 추가된 속성들을 포함하여 더 자세한 정보가 궁금하다면 background 레퍼런스 페이지를 확인해 보세요.

---

폰트 속성 (Font properties)

이번엔 폰트(글꼴) 선언들을 볼까요?

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

이 무려 5줄짜리 코드들도 아래처럼 단 한 줄로 깔끔하게 압축할 수 있습니다:

font:
  italic bold 0.8em/1.2 "Arial",
  sans-serif;

💡 강사님의 꿀팁: font 단축 속성에서 font-size와 line-height는 항상 슬래시(/)로 구분해서 붙여 써야 합니다. (예: 16px/1.5) 그리고 font-family는 반드시 제일 마지막에 써주셔야 에러가 안 나요!

이 단축 선언 역시 위의 개별 속성들에 더해 font-variant: normal, font-size-adjust: none, 그리고 font-stretch: normal까지 한꺼번에 기본값으로 리셋해버리는 효과를 가집니다.

---

테두리 속성 (Border properties)

테두리(border)를 다룰 때도 두께(width), 색상(color), 스타일(style)을 단 하나의 선언으로 간단하게 합칠 수 있습니다. 예를 들어, 아래와 같이 긴 코드가 있다면:

border-width: 1px;
border-style: solid;
border-color: black;

이렇게 심플하게 바꿀 수 있습니다:

border: 1px solid black;

💡 강사님의 꿀팁: border 단축 속성은 순서가 상관없습니다. solid 1px black이라고 써도 똑같이 잘 작동합니다. 코딩 컨벤션에 맞춰서 예쁘게 써주시면 됩니다!

---

마진과 패딩 속성 (Margin and padding properties)

마진(margin)과 패딩(padding) 값을 줄이는 방법은 이미 앞의 '박스의 테두리' 섹션에서 배운 것과 똑같이 작동합니다. 마진 속성은 1개부터 4개까지의 값을 사용해서 코드를 줄일 수 있죠. 다음 CSS 선언들을 살펴볼까요:

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

이 4줄은 4개의 값을 사용하는 단축 속성으로 작성한 아래 코드와 완전히 똑같은 결과를 냅니다. 값이 시계 방향(Top, Right, Bottom, Left - TRBL)으로 돌아간다는 사실을 잊지 마세요!

margin: 10px 5px 10px 5px;

복습 차원에서 마진(그리고 패딩) 단축 속성의 규칙을 다시 한번 정리해 드립니다:

• 1개의 값을 쓰면, 상하좌우 4면 모두에 그 여백이 똑같이 적용됩니다.
• 2개의 값을 쓰면, 첫 번째는 위/아래(top and bottom), 두 번째는 왼쪽/오른쪽(left and right)에 적용됩니다.
• 3개의 값을 쓰면, 첫 번째는 위(top), 두 번째는 왼쪽/오른쪽(left and right), 세 번째는 아래(bottom)에 적용됩니다.
• 4개의 값을 쓰면, 시계 방향인 위(top), 오른쪽(right), 아래(bottom), 왼쪽(left) 순서대로 각 면에 하나씩 적용됩니다.

---

포지션 속성 (Position properties)

position을 사용할 때 함께 따라다니는 top, right, bottom, left 위치 속성들도 단 하나의 선언으로 묶을 수 있는 마법 같은 방법이 있습니다. 예를 들어 이런 CSS가 있다고 쳐보죠:

top: 0;
right: 20px;
bottom: 0;
left: 20px;

이 길고 지루한 4줄의 코드는 inset이라는 단축 속성을 이용해 이렇게 한 줄로 압축할 수 있습니다:

inset: 0 20px 0 20px;

마진이나 패딩과 똑같이, inset의 값들도 시계 방향(Top -> Right -> Bottom -> Left) 순서로 적용됩니다! 정말 편리하죠?

---

만능 단축 속성 (The universal shorthand property)

CSS에는 끝판왕 만능 단축 속성인 all 속성이 있습니다. 이 속성은 문서 내의 모든 CSS 속성에 단 한 번에 값을 때려 넣습니다. 주로 CSS의 상속(inheritance) 모델 자체를 뜯어고치거나 모든 스타일을 확 날려버리고 싶을 때(초기화할 때) 사용하죠.

CSS에서 상속이 어떻게 이루어지는지 더 깊이 알고 싶으시다면 충돌 처리하기 (Handling conflicts)나 CSS 캐스케이드 소개 (Introducing the CSS Cascade) 문서를 꼭 읽어보세요.

---

단축 속성 리스트 (Shorthand properties)

우리가 CSS를 작성하며 활용할 수 있는 단축 속성들의 전체 목록입니다. 심심할 때 한 번씩 클릭해서 "아, 이런 것도 한 줄로 줄일 수 있구나!" 하고 구경해 보세요.

• all
• animation
• animation-range
• background
• border
• border-block
• border-block-end
• border-block-start
• border-bottom
• border-color
• border-image
• border-inline
• border-inline-end
• border-inline-start
• border-left
• border-radius
• border-right
• border-style
• border-top
• border-width
• column-rule
• columns
• contain-intrinsic-size
• container
• flex
• flex-flow
• font
• font-synthesis
• font-variant
• gap
• grid
• grid-area
• grid-column
• grid-row
• grid-template
• inset
• inset-block
• inset-inline
• list-style
• margin
• margin-block
• margin-inline
• mask
• mask-border
• offset
• outline
• overflow
• overscroll-behavior
• padding
• padding-block
• padding-inline
• place-content
• place-items
• place-self
• position-try
• scroll-margin
• scroll-margin-block
• scroll-margin-inline
• scroll-padding
• scroll-padding-block
• scroll-padding-inline
• scroll-timeline
• text-box
• text-decoration
• text-emphasis
• text-wrap
• transition
• view-timeline
• -webkit-text-stroke
• -webkit-border-before
• -webkit-mask-box-image

---

참고 자료 (See also)

• CSS 캐스케이드 및 상속 (CSS cascading and inheritance) 모듈
• CSS 구문 소개: 선언, 규칙 세트, 문장 (Introduction to CSS syntax: declarations, rulesets, and statements)
• 앳룰 (At-rules)
• 명시도 (Specificity)
• 상속 (Inheritance)
• CSS 캐스케이드 소개 (Introduction to the CSS cascade)
• 학습: 충돌 처리하기 (Learn: Handling conflicts)
• 학습: 캐스케이드 레이어 (Learn: Cascade layers)
• 시각적 형식화 모델 (Visual formatting models)
• 값(Values): 초깃값(initial), 계산값(computed), 사용값(used), 그리고 실젯값(actual)
• 값 정의 구문 (Value definition syntax)

---

MDN 개선에 도움을 주세요 (Help improve MDN)

이 문서가 학습에 도움이 되셨나요? (Was this page helpful to you?)
[Yes][No]

문서 기여 방법 알아보기: Learn how to contribute
최종 수정일: 2026년 2월 16일 (MDN contributors 작성)
이 문서를 GitHub에서 보기 | 문서의 문제점 신고하기