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

CSS 유형 선택기(Type Selector) 완벽 가이드: 기본 문법부터 활용 전략까지

CSS의 유형 선택기(Type Selector)(요소 타입 선택기라고도 함)는 HTML 요소를 그 유형을 기준으로 선택할 때 사용합니다. 여기서 유형은 <h2>, <p>, <button>처럼 HTML에 기본으로 내장된 어떤 요소든 될 수 있습니다.

유형 선택기 문법

유형 선택기를 통해 요소에 스타일을 적용하려면 다음과 같은 문법을 사용합니다.

element-name {
    property-name: value;
}

예를 들어, 버튼 요소를 유형 선택기로 스타일링해 보겠습니다.

<button>클릭하세요!</button>

CSS:

button {
    font-size: 32px;
    padding: 1rem;
    color: red;
}

결과:

유형 선택기를 사용하면 웹사이트의 해당 요소 전체에 광범위하게 스타일이 적용됩니다.

따라서 웹사이트에 버튼 요소가 10개 있고 위의 CSS를 사용했다면, 모든 버튼에 동일한 스타일이 적용됩니다. 이것이 원하는 결과일 수도 있고 아닐 수도 있는데, 상황에 따라 다릅니다.

기본 스타일(Base Styles) 설정

HTML 요소에 광범위한 기본 스타일을 직접 지정하는 것은 좋은 방법이 될 수 있습니다. 다만, 기본 스타일은 최대한 구체적이지 않아야 합니다. UI 전반에 걸쳐 의미 있는 시각적 일관성을 강제하고 불필요한 코드 반복을 피하는 역할을 해야 하기 때문입니다.

일관성을 유지하는 것이 좋은 영역은 다음과 같습니다.

  • 글꼴(폰트 패밀리)
  • 글자 크기
  • 줄 높이(line-height)
  • 색상
  • 간격(여백)

예를 들어, UI에서 글꼴 패밀리 선택에 일관성을 유지하는 것이 좋은 습관입니다. 서로 다른 글꼴 5개를 사용하면 UI가 어색하고 일관성 없어 보입니다. 대부분의 웹사이트에서는 글꼴 패밀리를 최소 1개에서 최대 3개 사이로 사용하는 것이 바람직합니다.

웹사이트에서 두 가지 유형의 글꼴을 사용한다고 가정해 보겠습니다.

  1. 단락과 목록에는 세리프(Serif) 글꼴
  2. 그 외 모든 요소에는 산세리프(Sans Serif) 글꼴

이 경우 광범위한 유형 선택기를 사용해 글꼴 패밀리를 적용하는 것이 완벽하게 합리적입니다.

/* Roboto는 산세리프 글꼴 */
html, body {
  font-family: roboto;  
}

/* Merriweather는 세리프 글꼴 */
p, li {
  font-family: merriweather;
}

위 CSS를 적용하면 단락과 목록을 제외한 모든 HTML 요소는 Roboto 글꼴을 사용하고, 단락과 목록만 Merriweather 글꼴을 사용하게 됩니다.

유형 선택기를 사용하지 말아야 할 때

광범위한 방식으로 요소에 과도한 스타일을 적용하는 것은 일반적으로 나쁜 습관입니다. 페이지 내 해당 요소의 모든 표현에 영향을 미치기 때문입니다.

예를 들어, CSS에서 다음과 같이 작성하지 마세요.

button {
  font-size: 1.125rem;
  padding: 1.5rem;
  margin-top: 1rem;
  border-radius: 8px;
  border: 1px solid #444444;
  color: green; 
  background-color: black; 
  transition: all 1s ease-in;
}

위 코드는 웹사이트의 모든 버튼 요소에 수많은 스타일을 적용합니다. 실제로는 역할이 서로 다른 여러 버튼이 존재하는 경우가 많습니다. 기본 UI 디자인의 일관성(특히 타이포그래피)은 유지하고 싶더라도, 모든 버튼이 똑같이 보이거나 동작하기를 원하지는 않을 것입니다. 특히 margin 값 같은 속성을 특정 요소 유형 전체에 광범위하게 적용하는 것은 위험합니다.

물론 클래스 선택기를 사용하면 언제든 기본 스타일을 재정의할 수 있습니다. 하지만 클래스를 사용하는 목적은 애초에 요소 선택기에서 상속된 기본 스타일을 되돌리거나 덮어쓰는 데 많은 시간을 소모하는 것이 아닙니다.

요소에 클래스를 사용하는 진짜 목적은 다음과 같습니다.

  • 특정 상황에서 필요에 따라 요소의 기본 스타일을 확장하기 위해서입니다. 예를 들어, 히어로 섹션의 CTA(Call to Action) 버튼을 다른 곳보다 약간 크게 만들고 싶을 수 있습니다.
  • 재사용성 확보입니다. 클래스는 무한히 재사용할 수 있어 유연하고 효율적입니다. 좋은 예로 단일 목적 유틸리티 클래스를 기반으로 하는 Tailwind CSS 프레임워크가 있으며, 이는 함수형 CSS(Functional CSS)라고도 알려져 있습니다.

요약

  • 유형 선택기는 일관성을 통해 브랜드의 시각적 정체성을 강화하는 일반 스타일의 기준선(baseline)을 설정하는 데 사용합니다.
  • 클래스(때로는 id)는 기본 스타일 위에 추가로 쌓아 올려, 요소가 속한 특정 환경에서의 역할에 맞게 스타일링하는 데 사용합니다.