Computer >> 컴퓨터 >  >> 프로그램 작성 >> CSS

CSS 유형 선택기

CSS 유형 선택기 (요소 유형 선택기라고도 함 )는 유형별로 HTML 요소를 대상으로 지정하는 데 사용됩니다. 유형은 <h2>와 같은 내장 HTML 요소일 수 있습니다. , <p> , <button> .

유형 선택기 구문

다음 구문을 사용하여 유형 선택기를 통해 요소의 스타일을 지정합니다.

element-name {
    property-name: value;
}

예를 들어 유형 선택기를 통해 이 버튼 요소의 스타일을 지정해 보겠습니다.

<button>Click me!</button>

CSS:

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

결과:

유형 선택기를 사용하면 웹사이트에서 광범위하게 요소의 스타일을 지정할 수 있습니다.

따라서 웹사이트에 10개의 버튼 요소가 있고 위의 CSS를 사용하면 모든 버튼이 동일한 스타일을 갖게 됩니다. 이것은 일 수도 있고 아닐 수도 있습니다. 상황에 따라 원하는 대로 됩니다.

기본 스타일

HTML 요소에 직접 몇 가지 광범위한 기본 스타일을 설정하는 것이 좋습니다. 그러나 기본 스타일은 가능한 한 구체적이지 않아야 합니다. UI 전체에 의미 있는 시각적 일관성을 적용하고 불필요한 코드 반복을 방지하는 방법으로 사용되어야 합니다.

자주 일관성을 유지하고 싶은 영역:

  • 글꼴(서체라고도 함)
  • 글꼴 크기
  • 줄 높이
  • 색상
  • 공백(공백)

예를 들어 UI에서 선택한 글꼴 모음과 일관성을 유지하는 것이 좋습니다. 5가지 다른 글꼴을 사용하고 싶지 않다면 UI가 이상하고 일관성이 없어 보입니다. 대부분의 웹사이트에서 1개에서 최대 3개의 서로 다른 글꼴 모음을 원합니다.

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

  1. 단락 및 목록을 위한 Serif
  2. 다른 모든 것을 위한 산세리프체

이 경우 광범위한 유형 선택기를 사용하여 해당 글꼴 모음을 적용하는 것이 좋습니다. 

/* Roboto is a sans serif*/
html, body {
  font-family: roboto;  
}

/* Merriweather is a serif*/
p, li {
  font-family: merriweather;
}

위의 CSS를 사용하면 Merriweather를 사용할 단락과 목록을 제외한 모든 HTML 요소가 Roboto 글꼴을 사용합니다.

유형 선택기를 사용하지 않는 경우

일반적으로 획이 넓은 요소를 "오버 스타일"하는 것은 페이지에서 해당 요소의 모든 표현에 영향을 미치기 때문에 나쁜 습관입니다.

예를 들어 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 디자인이 일관되기를 원하지만(특히 타이포그래피) 모든 것이 똑같이 보이거나 동작하는 것을 원하지는 않을 것입니다. 특히 여백 값과 같은 것은 주어진 요소 유형에 광범위하게 적용하는 것은 위험합니다.

물론 클래스 선택기를 사용하여 요소의 기본 스타일을 항상 재정의할 수 있습니다. 그러나 클래스를 사용하는 목적은 요소 선택기에서 전달된 기본 스타일을 실행 취소/재정의하는 데 많은 시간을 소비하는 것이 아닙니다.

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

  • 확장 그것을 요구하는 특정 상황의 요소에 대한 기본 스타일. 예를 들어 영웅 섹션의 클릭 유도문안 버튼을 다른 곳보다 약간 크게 만들 수 있습니다.
  • 재사용성. 클래스는 무한히 재사용할 수 있으므로 유연하고 효율적입니다. 그 좋은 예는 기능적 CSS라고도 하는 단일 목적 유틸리티 클래스를 기반으로 하는 Tailwind CSS 프레임워크입니다.

요약:

  • 유형 선택기를 사용하여 일관성을 통해 브랜드의 시각적 아이덴티티를 강화하는 일반적인 스타일의 기준선을 설정합니다.
  • 클래스(때로는 id)를 사용하여 기본 스타일 위에 빌드하고 특정 환경에서의 역할에 따라 요소의 스타일을 지정합니다.