CSS: 요소 이름 지정

명명이란 무엇입니까

HTML에서 요소 이름을 지정하는 것은 페이지에 CSS를 구체적으로 적용하는 가장 좋은 방법입니다. 이러한 이름을 사용하여 모든 스타일을 CSS 파일에 넣을 수 있으므로 HTML을 훨씬 쉽게 이해할 수 있습니다. CSS, ClassName 및 ID의 이름을 지정하는 두 가지 주요 방법이 있습니다. 이들 사이의 주요 차이점은 대부분 JS와 상호 작용하는 방식으로 귀결되지만 CSS 목적의 차이점은 다음과 같습니다. ClassName은 여러 개별 요소에 적용하는 것이고 ID는 요소의 단일 인스턴스에 적용하는 것입니다.

클래스명

다음은 ClassName으로 HTML 요소를 식별하는 방법입니다.

<p className="example" >Lorum Ipsum</p>

다음은 CSS에서 해당 className을 호출하는 방법입니다.

.example {

}

여기에서 해당 중괄호 안에 CSS 속성을 입력하기만 하면 해당 ClassName이 있는 모든 항목에 CSS 속성을 적용할 수 있습니다.

ID

개체에 ID를 할당하는 방법은 다음과 같습니다.

<p id="specific-item" > Specific Lorum Ipsum </p>

다음은 ID로 CSS에서 해당 요소를 호출하는 방법입니다.

#specific-item {

}

ClassNames와 마찬가지로 중괄호 안에 해당 속성을 작성하여 항목에 스타일을 직접 적용할 수 있습니다.

요소 유형에 CSS 직접 적용

요소의 이름을 지정할 때 염두에 두어야 할 또 다른 사항은 때로는 완전히 불필요하다는 것입니다. 이름 지정의 아이디어가 낭비되는 공간을 줄이는 것이라면 ClassName과 ID를 모든 요소에 적용하는 것은 비생산적일 수 있습니다. 경우에 따라 CSS 특성을 HTML 요소 유형에 직접 적용하여 공간을 절약할 수 있습니다.

이를 수행하는 구문은 매우 간단합니다. 페이지의 모든 단락 요소에 흰색 텍스트와 검은색 배경을 갖고 싶다고 가정해 보겠습니다. CSS에 다음을 입력하면 됩니다.

p {
  background-color: black;
  color: white;
}

위의 코드는 코드의 모든 단일 단락 요소에 적용되며 이름을 지정하는 동안 시간을 ​​절약할 수 있는 훌륭한 방법입니다.

이 기술을 적용하는 또 다른 좋은 방법은 전체 페이지에 디자인 '표준'을 적용하는 것입니다. 본문 요소에 직접 속성을 추가하면 특별히 덮어쓰지 않는 한 다른 모든 요소가 따르는 표준을 만들 수 있습니다. 예를 들어:

body {
  font-family: "Times New Roman", Times, serif;
  text-align: center;
}

위의 코드는 페이지의 모든 텍스트가 'Times New Roman' 글꼴을 갖게 하고 기본적으로 중앙에 정렬되도록 합니다.

컨테이너에 따라 요소에 CSS 적용

그러나 특정 유형의 컨테이너 내에서 특정 유형의 HTML 요소에 특성을 적용하려면 어떻게 해야 할까요? 특정 유형의 클래스 내의 단락 요소에 특정 글꼴을 적용하고 싶다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다.

.example p{
  font-family: "Times New Roman", Times, serif;
}

위의 코드는 'example' ClassName이 있는 요소와 중첩되어 있는 한 모든 단락 태그가 'Times New Roman' 글꼴을 갖도록 합니다.

vis 선택자와 상호 작용할 때 요소에 CSS 적용

마지막으로 선택기를 사용하여 CSS를 요소에 적용할 수 있지만 특정 사항이 참인 경우에만 가능합니다. 예를 들어 :hover를 사용하면 커서가 객체 위에 있는 동안 요소가 다른 CSS 속성을 갖도록 할 수 있습니다. 다음은 그에 대한 몇 가지 예제 구문입니다.

button {
  color: red;
}
button:hover {
  color: blue;
}

위의 코드는 커서가 위에 있는 동안 버튼 요소가 빨간색에서 파란색으로 변경되도록 합니다. 마찬가지로 :active는 CSS 속성을 요소에 적용하는 데 사용할 수 있지만 활성 상태에서 클릭하는 동안에만 사용할 수 있습니다. 예를 들어 :link 또는 :visited와 같이 사용할 수 있는 다양한 상황별 선택기가 있습니다. 이러한 선택기를 사용하면 CSS가 사용자에게 적극적으로 응답하는 것처럼 보이고 느껴집니다.