소낙눈 0

소개

단축 속성은 같은 범주의 속성을 하나의 선언으로 그룹화합니다.

대개 하이픈을 기준으로 왼쪽의 이름이 같은 속성은 같은 범주의 속성으로 볼 수 있습니다.
ex. font-style + font-weight + … = font

이를 각각 단축 속성과 세부 속성으로 나누겠습니다.

ex. 단축 속성 font = 세부 속성 font-style + font-weight + …

예를 들어 애니메이션 단축 속성인 animation을 사용하면
이름(animation-name) · 지속시간(animation-duration)과 같은 세부 속성을 한번에 설정할 수 있습니다.

상세 정보
좀 더 자세한 설명을 위해 바깥 여백 영역을 넣어보겠습니다.

바깥 여백 영역은 마진 영역으로 불리며,

상/하/좌/우 4방향을 각각 margin-방향 속성을 사용해 값을 지정해 주어야 합니다.

따라서 원래는 다음과 같이 사용해야 합니다.

선택자 {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-right: 5px;
    margin-left: 15px;
}

하지만 단축 속성인 margin 속성을 사용하면
상/하/좌/우의 값을 각각 한번에 지정할 수 있습니다.

선택자 {
    margin: 10px 5px 20px 15px;
}

단축 속성 종류 

이러한 단축 속성 종류는 크게 세 가지로 나눌 수 있습니다. 

가장 자주 사용되는 구문 위주로 다루겠습니다.

종류 #1 : 모서리 방향형

단축 속성이 상단/하단/좌측/우측 모서리의 값을 포함하는 경우입니다.

#1-1 : 하나의 값 지정 시

해당 값이 상단/하단/좌측/우측 모두에 적용됩니다.

single.edge {

    border-width: 2px;

}

#1-2 : 네 개의 값 지정 시

쓰인 값이 각각 상단 → 우측 → 하단 → 좌측 순서(시계 방향)대로 적용됩니다.

quadruple.edge {

    border-width: 2px 4px 6px 8px;

}

종류 #2 : 꼭짓점 방향형

단축 속성이 좌상단/좌하단/우상단/우하단 꼭짓점의 값을 포함하는 경우입니다.

#2-1 : 하나의 값 지정 시

해당 값이 좌상단/좌하단/우상단/우하단 모두에 적용됩니다.

single.corner {

    border-radius: 5px;

}

#2-2 : 네 개의 값 지정 시

쓰인 값이 각각 좌상단 → 우상단 → 우하단 → 좌하단 순서(시계 방향)대로 적용됩니다.

quadruple.corner {

    border-radius: 5px 10px 15px 20px;

}

#3 : 자료형

단축 속성이 이름 / 시간 / 키워드 등 다양한 값을 포함하는 경우입니다.

해당 케이스에서는 기본적으로 이전의 방향형 단축 속성과 다르게 순서가 중요하지 않습니다.

대신 시스템은 단위 또는 특정 키워드를 바탕으로 해당 값을 구분합니다.

따라서 반드시 단위를 포함한 수치 및 정확한 키워드를 사용해 값을 작성해야 합니다.

단축 속성의 특징

이러한 단축 속성은 사용하는 것 만으로도 4방향 or 다양한 값을 지정한 것과 동일한 효과를 냅니다.

따라서 단축 속성에 특정 세부 속성의 값을 포함하지 않은 경우 해당 세부 속성의 값은 기본값으로 지정됩니다.

이에 따라

A {

    transition: 1s;

}

로 지정하였다면,

세부 속성인 지속 시간이 1초로 지정됨과 동시에

지정하지 않은 세부 속성인 지연 시간 · 타겟 속성 · 타이밍 펑션 등은 전부 기본값으로 '지정'됩니다.

이로 인해 세부 속성으로 값을 지정한 구문 뒤에 단축 속성이 오게 된다면

단축 속성에 의해 세부 속성들이 (단축 속성에 지정한 값 or 지정하지 않은 경우 기본값으로)재지정됩니다.

따라서 세부 속성 일부를 따로 분리하고 싶다면

캐스캐이딩에 따라 나중에 쓰인 구문이 우선한다는 점을 이용하여 아래와 같이 단축 속성 뒤로 작성해야 합니다.

B {

    border: 1px solid #000;

    border-right: none;

}

적용 #1

간혹 다른 페이지에서 CSS를 복사해 오실 때 아래와 같이 단축 속성 선언과 세부 속성 선언 전부를 가져오는 경우가 있습니다.

C {

    transition: .2s ease-in-out;

      transition-property: all;

      transition-duration: 0.2s;

      transition-timing-function: ease-in-out;

      transition-delay: 0s;

}

해당 상황은 개발자 도구에서 스타일을 복사해 올 때 단축 속성 옆의 ▶ 버튼을 눌러 속성을 펼친 상태로 복사한 경우 발생합니다.

이제 우리는 위의 구문이 단축 속성과 세부 속성을 둘 다 사용해 스타일을 지정했는데

동일한 스타일¹을 두 번 설정(=중복으로 설정)해 준 것과 다름이 없다(=쓸데없다)는 사실을 알 수 있습니다.

1 상단의 transition 단축 속성 자료 참조. 단축 속성으로 지정한 지속 시간 및 타이밍 펑션 값 이외에는 기본값으로 지정되어 있음.

따라서 아래와 같이 단축 속성 선언과 세부 속성 선언 덩어리 중 하나만 택하여 남기면 됩니다.

C {

    transition: .2s ease-in-out;

}

가급적 단축 속성 선언만 남기는 것이 좋겠죠.

적용 #2

물론 단축 속성은 대부분의 상황에서 코드 가독성을 향상시키지만

필요에 따라 단축 속성 선언과 세부 속성 선언을 혼용해 사용하거나 세부 속성 선언만 사용해도 됩니다.

혼용해 사용할 경우 전술한 대로 세부 속성을 단축 속성 뒤에 작성해야 합니다.

D {

    border: 2px solid #000;

    border-left: none;

}

물론 단축 속성 없이 세부 속성 선언만 사용해도 됩니다.

E {

    font-family: 'Pretendard';

    font-weight: 800;

    line-height: 1.2;

}