클래스와 ID는 CSS 확장에 도움이됩니다.
오늘날 웹에서 웹 사이트를 구축하려면 CSS (Cascading Style Sheets)에 대한 깊은 이해가 필요합니다. 다음은 브라우저 창에서 레이아웃을 결정하는 웹 사이트의 지침입니다. HTML 문서에 일련의 "스타일"을 적용하여 웹 페이지의 모양과 느낌을 만듭니다.
앞서 언급 한 스타일을 문서에 적용하는 방법은 여러 가지가 있지만 문서의 일부 요소에만 스타일을 사용하고 해당 요소의 모든 인스턴스에는 사용할 수없는 경우가 있습니다.
개별 인스턴스마다 스타일 규칙을 반복하지 않아도 문서의 여러 요소에 적용 할 수있는 스타일을 만들 수도 있습니다. 이러한 원하는 스타일을 얻으려면 클래스 및 ID HTML 속성을 사용하십시오. 이러한 속성은 거의 모든 HTML 태그에 적용 할 수있는 전역 속성입니다. 즉, 문서의 분할, 단락, 링크, 목록 또는 다른 HTML 조각의 스타일을 지정하는 경우 클래스 및 ID 속성을 사용하여 이 작업을 수행하는 데 도움이됩니다!
클래스 선택자
클래스 선택기를 사용하면 문서의 동일한 요소 나 태그에 여러 스타일을 설정할 수 있습니다. 예를 들어, 텍스트의 특정 섹션을 문서의 나머지 텍스트와 다른 색으로 호출 할 수 있습니다. 강조 표시된 섹션은 사용자가 페이지에서 설정하는 "경고"일 수 있습니다. 단락에 다음과 같은 클래스를 할당 할 수 있습니다.
p {color : # 0000ff; }
p.alert {color : # ff0000; }
이 스타일은 모든 단락의 색상을 파란색으로 설정하지만 (# 0000ff) 클래스 속성이 "alert"인 단락은 빨간색 (# ff0000)으로 스타일 지정됩니다. 이는 class 속성이 태그 선택자만을 사용하는 첫 번째 CSS 규칙보다 높은 특이성을 가지고 있기 때문입니다.
CSS로 작업 할 때,보다 구체적인 규칙은 덜 구체적인 규칙보다 우선합니다. 이 예에서보다 일반적인 규칙은 모든 단락의 색상을 설정하지만 두 번째보다 구체적인 규칙은 일부 단락의 설정보다 우선합니다.
다음은 일부 HTML 마크 업에서이 방법을 사용하는 방법입니다.
이 단락은 페이지의 기본값 인 파란색으로 표시됩니다.
이 단락은 파란색으로 표시됩니다.
클래스 속성이 요소 선택기 스타일에서 표준 파란색을 겹쳐 쓰므로이 단락은 빨간색으로 표시됩니다.
이 예제에서 "p.alert"스타일은 해당 "경고"클래스를 사용하는 단락 요소에만 적용됩니다. 여러 HTML 요소에서 해당 클래스를 사용하려면 간단히 HTML 요소를 스타일 호출 (마침표 (.)를 그대로 두십시오).
.alert {background-color : # ff0000;}
이 클래스는 필요한 모든 요소에서 사용할 수 있습니다. class 속성 값이 "alert"인 HTML의 모든 부분은 이제이 스타일을 갖게됩니다. 아래 HTML에는 "alert"클래스를 사용하는 단락과 제목 레벨 2가 있습니다. 이 두 가지 모두 방금 설명한 CSS를 기반으로 한 배경색이 빨간색입니다.
이 단락은 빨간색으로 쓰여질 것입니다.
그리고이 h2도 빨간색이됩니다.
오늘날 웹 사이트에서 클래스 속성은 ID가 갖는 특수성 관점에서 작업하기가 쉽기 때문에 대부분의 요소에서 자주 사용됩니다. 현재 대부분의 HTML 페이지가 클래스 속성으로 채워지는 것을 볼 수 있습니다.이 중 일부는 문서에서 여러 번 반복되고 다른 일부는 한 번만 나타날 수 있습니다.
ID 선택기
ID 선택기를 사용하면 특정 스타일을 태그 나 다른 HTML 요소 와 연결하지 않고 이름을 지정할 수 있습니다. HTML 마크 업에서 이벤트에 대한 정보가 포함 된 부분이 있다고 가정 해보십시오.
이 구분에 "event"라는 ID 속성을 부여 할 수 있습니다. 그런 다음 1 픽셀 너비의 검은 색 테두리가있는 해당 구분을 윤곽선으로 나타내려면 다음과 같이 ID 코드를 작성하십시오.
#event {border : 1px solid # 000; }
ID 선택기 의 문제점은 HTML 문서에서 반복 될 수 없다는 것입니다. 고유해야합니다 (사이트의 여러 페이지에서 동일한 ID를 사용할 수 있지만 각 HTML 문서에서는 한 번만 사용할 수 있음). 따라서이 경계선을 모두 필요로하는 3 가지 이벤트가 있다면 "event1", "event2"및 "event3"ID 속성을 지정하고 각각에 스타일을 지정해야합니다. 따라서 앞서 언급 한 "이벤트"클래스 속성을 사용하여 한꺼번에 스타일을 지정하는 것이 훨씬 쉬울 것입니다.
ID 속성의 또 다른 문제점은 클래스 속성보다 높은 특이성을가집니다. 즉, 이전에 설정된 스타일을 재정의하는 CSS가 필요할 경우 ID에 너무 많이 의존 한 경우 CSS를 작성하기가 어려울 수 있습니다. 이러한 이유 때문에 많은 웹 개발자가 한 번만 그 값을 사용하려는 경우에도 마크 업에서 ID를 사용하지 않고 거의 모든 스타일의 덜 구체적인 클래스 속성으로 전환했습니다.
ID 속성이 작동하는 한 영역은 인 페이지 앵커 링크가있는 페이지를 작성하려는 경우입니다. 예를 들어 시차 스타일 웹 사이트에 한 페이지에 모든 콘텐츠가 포함되어 있고 해당 페이지의 여러 부분으로 '뛰어'가는 링크가있는 경우 이것은 이러한 앵커 링크를 사용하는 ID 속성 및 텍스트 링크를 사용하여 수행됩니다.
# 기호가 앞에 붙은 속성의 값을 다음과 같이 링크의 href 속성에 추가하면됩니다.
이 링크입니다
클릭하거나 터치하면이 링크가이 ID 속성이있는 페이지 부분으로 이동합니다. 이 ID 값을 사용하는 페이지 요소가 없으면 링크는 아무 것도하지 않습니다.
사이트에서 인 페이지 링크를 만들려면 ID 속성 사용이 필요하지만 일반 CSS 스타일링 용도로 사용할 수는 있습니다. 이것은 오늘 페이지를 마크 업하는 방법입니다. 클래스 선택기를 최대한 많이 사용했으며 속성이 CSS의 훅 (hook)뿐만 아니라 인 페이지 링크로도 작동해야하는 경우에만 ID로 전환했습니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 됨 : 8/9/17