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

CSS 패딩(padding) 속성 완벽 가이드: 기본부터 숏핸드 활용법까지

이 글에서는 CSS padding 속성의 사용법을 자세히 알아봅니다.

CSS padding 속성은 HTML 요소의 내부, 즉 콘텐츠와 테두리(border) 사이의 여백 크기를 조절할 때 사용합니다.

padding은 종종 CSS margin 속성과 혼동되곤 하는데, margin은 요소 테두리의 바깥쪽에 공간을 만든다는 점에서 정반대 역할을 합니다.

CSS 패딩의 기본 개념

먼저 텍스트 라벨(콘텐츠)이 들어 있는 버튼 요소를 살펴보겠습니다.

<button>Button</button>

이 버튼에 24px의 패딩 값을 지정해 보겠습니다.

button {
    padding: 24px;
}

패딩 값을 0으로 변경하면 버튼 안쪽 여백이 모두 사라지고 콘텐츠가 테두리에 딱 붙게 됩니다.

CSS에는 다섯 가지 패딩 관련 속성이 있습니다.

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left
  • padding (방금 사용한 속성)

앞의 네 가지 속성(-top, -right, -bottom, -left)은 각각 한 방향에만 패딩을 적용할 수 있는 개별 속성입니다.

마지막의 padding은 이른바 숏핸드(shorthand) 속성으로, 다섯 가지 중 가장 유연하고 가장 많이 사용됩니다.

이제 padding 숏핸드 속성을 좀 더 깊이 살펴보겠습니다.

패딩 숏핸드 속성 사용 방법

숏핸드 padding 속성(지금까지 사용한 유일한 속성)은 한 번에 여러 개의 패딩 값을 지정할 수 있습니다. 값은 1개, 2개, 3개 또는 4개까지 가능합니다.

예시를 통해 하나씩 확인해 보겠습니다.

값 1개를 사용한 숏핸드

앞서 본 24px 패딩 버튼 예제는 아래처럼 작성할 수도 있습니다.

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

하지만 네 방향을 한 번에 지정할 수 있는 값 1개짜리 숏핸드가 있다면 굳이 이렇게 시간을 낭비할 필요가 없겠죠.

button { 
    padding: 24px;
}

값 2개를 사용한 숏핸드

그렇다면 위아래에는 16px, 좌우에는 24px의 패딩을 적용하고 싶다면 어떻게 해야 할까요?

다음처럼 작성할 수도 있지만(시간 낭비죠),

button {
    padding-top: 16px; 
    padding-right: 24px;
    padding-bottom: 16px;
    padding-left: 24px; 
}

값 2개짜리 padding 숏핸드를 사용하면 훨씬 간결합니다.

button {
    padding: 16px 24px;
}

padding 속성에 두 개의 값을 사용하면 다음과 같이 동작합니다.

  • 첫 번째 값: 위(top)와 아래(bottom) 패딩에 적용
  • 두 번째 값: 왼쪽(left)과 오른쪽(right) 패딩에 적용

값 3개를 사용한 숏핸드

padding 속성에 세 개의 값을 사용하면 다음과 같습니다.

button {
    padding: 12px 24px 8px;
}
  • 첫 번째 값: 위(top) 패딩
  • 두 번째 값: 왼쪽(left)과 오른쪽(right) 패딩 양쪽 모두
  • 세 번째 값: 아래(bottom) 패딩

값 4개를 사용한 숏핸드

padding 속성에 네 개의 값을 사용하면 다음과 같습니다.

button {
    padding: 12px 16px 12px 16px;
}
  • 첫 번째 값: 위(top) 패딩
  • 두 번째 값: 오른쪽(right) 패딩
  • 세 번째 값: 아래(bottom) 패딩
  • 네 번째 값: 왼쪽(left) 패딩

단일 방향 패딩 속성은 언제 사용할까?

유연성과 효율성 면에서 숏핸드 padding 속성이 단일 방향 속성보다 훨씬 뛰어납니다.

그렇다면 왜 굳이 다음처럼 작성할까요?

padding-left: 24px;

아래 숏핸드로도 같은 결과를 얻을 수 있는데 말이죠.

padding: 0 0 0 24px; /* top: 0, right: 0, bottom: 0, left: 24px */

단일 방향 패딩 속성을 사용하는 주된 이유는, 어떤 이유로든 요소의 한쪽 면에만 특정 패딩을 추가하고 나머지 세 면은 기본값/현재값(설정 환경에 따라 다름) 그대로 두고 싶을 때입니다.

예를 들어 요소의 왼쪽에만 패딩을 주고 위, 오른쪽, 아래는 0으로 만들고 싶다고 가정해 보겠습니다. 단일 방향 속성으로 이를 구현하려면 기존의 위·오른쪽·아래 패딩 값을 덮어쓰기(override) 위해 코드를 다음과 같이 작성해야 합니다.

padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 24px

하지만 이 정도 코드라면 숏핸드 패딩 속성으로 한 줄에 끝낼 수 있습니다.

padding: 0 0 0 24px; /* top, right, bottom, left */

그럼 앞서 언급한 '기본값/현재값'은 대체 무엇일까요?

이는 다음 출처에서 상속받은 스타일을 의미합니다.

  • 사용자 에이전트 스타일시트(User Agent Stylesheet)
  • CSS 라이브러리 또는 프레임워크
  • 혹은 스타일시트 상단에 직접 추가한 다른 스타일 선언(CSS는 캐스케이드한다는 점을 기억하세요)

사용자 에이전트 스타일시트(UAS)는 모든 브라우저에 내장된 최소한의 CSS 스타일시트입니다. 개발자가 웹사이트에 아무런 CSS를 추가하지 않더라도 콘텐츠가 사용자에게 읽히기에 충분한 스타일과 포맷을 갖추도록 보장하는 역할을 합니다.

예를 들어 버튼 요소의 현재 패딩이 다음과 같다고 해보겠습니다(출처가 어디든 상관없습니다).

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

여기서 패딩 top 값만 다루는 버튼 클래스를 하나 만들면,

.button-login {
    padding-top: 40px;
}

이 클래스를 버튼 요소에 적용합니다.

<button class="button-login">Login</button>

그러면 로그인 버튼의 위쪽 패딩만 40px로 늘어나고, 오른쪽·아래·왼쪽 패딩은 다른 곳에서 상속받은 값 그대로 유지됩니다.

짐작하셨겠지만, 단일 방향 패딩 속성은 프로젝트의 CSS 코드베이스가 얼마나 체계적으로 관리되느냐에 따라 혼란이나 예측 불가능한 결과를 초래할 수 있습니다.

필자는 단일 방향 패딩 속성을 거의 사용하지 않는데, 새 프로젝트를 시작할 때마다 패딩 값을 전부 0으로 리셋한 후, 프로젝트의 스페이싱 규격(spacing scale)에 맞춰 UI 컴포넌트(HTML 요소)에 패딩 값을 지정하기 때문입니다.

이렇게 하면 특정 브라우저의 사용자 에이전트 스타일시트가 전달하는 다양한 스타일을 걱정할 필요가 없어 작업 흐름이 훨씬 예측 가능해집니다.

위에서 말씀드린 이유들을 종합하면, 대부분의 경우 패딩 값을 정의할 때는 숏핸드 padding 방식을 사용하는 것이 실질적으로 더 좋습니다.

확실하지 않다면 패딩 숏핸드를 사용하세요.

패딩 숏핸드를 기억하는 방법

값 4개짜리 숏핸드가 가장 기억하기 쉽습니다. 값이 시계 방향, 즉 위 → 오른쪽 → 아래 → 왼쪽 순서로 적용되기 때문입니다.

값 2개와 3개짜리 숏핸드는 상대적으로 덜 직관적입니다.

  • 값 2개 숏핸드: 16px 8px (위-아래, 왼쪽-오른쪽)
  • 값 3개 숏핸드: 8px 16px 4px (위, 왼쪽-오른쪽, 아래)

참고: 실무에서는 값 3개짜리 숏핸드를 사용할 일이 드물기 때문에 굳이 외울 필요는 없다고 생각합니다(뇌 용량은 다른 데에 쓰세요). 필요할 때 찾아보면 됩니다.

패딩에 사용할 수 있는 길이 단위

padding 속성은 모든 종류의 길이 단위를 받을 수 있습니다. 가장 많이 쓰이는 단위는 px, rem, em, %, vw, vh, inherit 등입니다.

참고: 이 튜토리얼에서 픽셀 단위(px)를 사용한 이유는 초보자(대부분 독자가 그렇다고 가정합니다)에게 더 친숙한 단위이기 때문입니다. 특히 Illustrator, Sketch, Figma 같은 도구를 다뤄온 비주얼 디자인 출신이라면 더욱 그렇습니다.

하지만 픽셀은 고정된 길이를 가진 절대 단위이기 때문에 확장성(scaling)이 떨어집니다.

앞서 언급한 rem, em, %, vw, vh 같은 상대 단위는 확장성이 뛰어나며, 각각 서로 다른 방식으로 동작합니다.

필자는 패딩 값을 지정할 때 주로 rem을 사용하지만, 요즘은 모든 최신 브라우저가 모든 단위 타입을 처리할 수 있으므로 이는 대체로 취향의 문제입니다.

성능 최적화 (선택 사항)

성능 최적화 분야에 관심 있는 분들이라면 이런 생각이 드실 겁니다.

"단일 방향 값을 사용하는 것과 비교했을 때, 패딩 숏핸드를 사용하면 성능 차이나 비용이 발생할까?"

답은 '그렇다'입니다. 하지만 아래 두 예시 중 어느 쪽이 전반적으로 더 나은 성능을 내는지 예측하는 것은 거의 불가능합니다.

padding: 8px 12px 16px 20px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 16px;
padding-left: 20px;

처리할 바이트(데이터)가 적으니 숏핸드가 당연히 더 성능이 좋다고 생각하실 수 있습니다.

하지만 실제로는 개발 환경과 프로덕션 환경 사이에서 코드가 처리되는 과정(파싱, 압축, 컴파일)과 프로젝트의 설정 및 구조에 따라 달라집니다.

잠재적인 성능 차이는 너무 미미해서 걱정할 가치가 없습니다. 성능 최적화에서는 싸울 전선을 현명하게 골라야 하며, 패딩 속성보다 훨씬 중요하게 다뤄야 할 부분이 많습니다.