Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS 약식(Shorthand) 속성 완벽 가이드: 스타일시트를 더 간결하게 작성하는 방법

CSS 약식(shorthand) 속성을 활용하면 스타일시트의 분량을 크게 줄이면서도 동일한 결과를 얻을 수 있습니다. 이 글에서는 약식 속성의 기본 개념부터 실전 예제까지 차근차근 알아보겠습니다.

CSS 약식 속성은 "더 적게 쓰고, 더 많이 하기"를 가능하게 해주는 강력한 기능입니다. 여러 개의 스타일 선언을 한 줄로 합쳐 코드를 훨씬 간결하게 만들어 줍니다.

font 약식 속성으로 폰트 스타일 한 번에 지정하기

예를 들어, h1 요소에 Georgia 폰트 패밀리, 42픽셀 글자 크기, 1.25 줄 높이(line-height)를 적용하고 싶다고 가정해 보겠습니다.

먼저 일반적인 CSS 작성 방식을 살펴보겠습니다:

h1 {
    font-family: "Georgia", "serif";
    font-size: 42px;
    line-height: 1.25;
}

이번에는 font 약식 속성을 사용한 방법과 비교해 보겠습니다:

h1 {
    font: 42px/1.25 "Georgia", "serif";
}

세 줄짜리 코드가 단 한 줄로 줄어들었습니다!

약식 속성의 작동 원리

약식 속성은 여러 개의 스타일 선언을 하나로 결합하여 코드가 차지하는 공간을 줄여줍니다. 물론 일반적인 작성 방식이 더 표현력이 풍부하고 가독성이 좋다고 느낄 수 있습니다. 하지만 그것은 단지 아직 익숙하지 않기 때문입니다. 몇 번만 사용하면 금방 손에 익어 오히려 더 편리하게 느껴질 것입니다.

padding 약식 속성으로 패딩 값 축약하기

개념을 확실히 잡기 위해 약식 속성 예제를 하나 더 살펴보겠습니다. 위쪽과 아래쪽 패딩이 12px, 왼쪽과 오른쪽 패딩이 20px인 버튼이 있다고 가정합니다.

이 버튼에는 다음과 같은 padding 속성들이 사용됩니다:

button {
    padding-top: 12px;
    padding-right: 20px;
    padding-bottom: 12px;
    padding-left: 20px;
}

이제 약식 padding 속성을 사용해 CSS를 더 간결하게 만들어 보겠습니다:

button {
    padding: 12px 20px; /* 위-아래, 왼쪽-오른쪽 */
}

네 줄짜리 코드가 역시 한 줄로 줄어들었습니다!

두 값(two-value) 약식의 의미

위의 padding 약식은 두 개의 값을 사용하기 때문에 'two-value shorthand(두 값 약식)'라고 부릅니다.

  • 첫 번째 값 12px는 padding-top과 padding-bottom에 적용됩니다.
  • 두 번째 값 20px는 padding-left와 padding-right에 적용됩니다.

CSS 약식 속성 전체 목록

CSS에서 사용할 수 있는 약식 속성은 다음과 같습니다:

all, animation, background, border, border-block-end, border-block-start, border-bottom, border-color, border-image, border-inline-end, border-inline-start, border-left, border-radius, border-right, border-style, border-top, border-width, column-rule, columns, flex, flex-flow, font, gap, grid, grid-area, grid-column, grid-row, grid-template, list-style, margin, mask, offset, outline, overflow, padding, place-content, place-items, place-self, scroll-margin, scroll-padding, text-decoration, text-emphasis, transition.

각 속성의 자세한 설명과 사용법은 Mozilla의 공식 CSS 약식 속성 문서(MDN)에서 확인할 수 있습니다.

꼭 익혀야 할 핵심 약식 속성

모든 약식 속성을 외울 필요는 없습니다. 대부분의 속성은 실무에서 거의 사용할 일이 없기 때문입니다. 하지만 이 튜토리얼에서 소개한 font와 padding은 가장 자주 쓰이는 약식 속성에 속하므로 반드시 익혀두는 것이 좋습니다.

다음 약식 속성들도 사용 빈도가 매우 높으므로 함께 살펴볼 것을 추천합니다: margin, background, border, animation, transition, border-radius.