요소 당 하나의 CSS 클래스에 국한되지 않습니다.
CSS (Cascading Style Sheets)를 사용하면 해당 요소에 적용한 속성에 연결하여 요소의 모양을 정의 할 수 있습니다. 이 속성은 ID와 클래스 중 하나 일 수 있으며 모든 속성과 마찬가지로 첨부 된 요소에 유용한 정보를 추가합니다. 요소에 추가하는 속성에 따라 CSS 선택기를 작성하여 해당 요소 및 웹 사이트 전체의 모양과 느낌을 얻는 데 필요한 시각적 스타일을 적용 할 수 있습니다.
ID 나 클래스가 CSS 규칙을 사용하여 작업하기 위해 노력하는 반면 현대 웹 디자인 메소드는 ID에 비해 클래스를 우선적으로 선호합니다. 그 이유는 전체적으로 작업하기가 쉽지 않기 때문입니다. 그렇습니다. ID를 사용하는 많은 사이트를 계속 찾을 수 있지만, 클래스가 현대 웹 페이지를 인수하는 동안 이러한 속성은 과거보다 훨씬 적게 적용됩니다.
CSS에서 단일 또는 다중 클래스?
대부분의 경우 하나의 클래스 속성을 요소에 할당하지만 사실 ID가있는 것과 같은 방식으로 하나의 클래스에만 국한되지는 않습니다. 요소는 하나의 ID 속성 만 가질 수 있지만 요소에 여러 클래스를 부여 할 수 있으며 일부 경우 그렇게하면 스타일을 더 쉽게 만들고 더 유연하게 만들 수 있습니다!
요소에 여러 클래스를 지정해야하는 경우 추가 클래스를 추가하고 속성의 공백으로 클래스를 구분하면됩니다.
예를 들어,이 단락에는 세 가지 클래스가 있습니다.
pullquote featured left "> 문단의 텍스트가됩니다.
이것은 단락 태그에 다음 세 가지 클래스를 설정합니다.
- 견적서
- 추천
- 왼쪽
이 클래스 값들 사이의 공백에 주목하십시오. 그 공간은 다른 개별 클래스로 설정합니다. 이것은 또한 클래스 이름이 공백을 가질 수없는 이유이기도합니다. 그렇게하면 클래스 이름을 별도의 클래스로 설정할 수 있기 때문입니다.
예를 들어, "pullquote-featured-left"를 공백없이 사용했다면 하나의 클래스 값이되지만 위의 예에서는 공백으로 구분 된이 세 단어를 개별 값으로 설정합니다. 웹 페이지에서 사용할 클래스 값을 결정할 때이 개념을 이해하는 것이 중요합니다.
클래스 값이 HTML로되면 클래스의 값을 CSS에 할당하고 추가 할 스타일을 적용 할 수 있습니다. 예를 들어.
.pullquote {...}
.featured {...}
p.left {...}
이 예에서 CSS 선언과 값 쌍은 해당 스타일이 적절한 선택자에 적용되는 방법 인 중괄호 안에 있습니다.
주 - 클래스를 특정 요소 (예 : p.left)로 설정 한 경우 클래스를 클래스 목록의 일부로 계속 사용할 수 있습니다. 그러나 CSS에 지정된 요소에만 영향을줍니다. 즉, p.left 스타일은 선택자가 실제로 'left'클래스 값을 가진 단락에 적용한다는 의미이므로이 클래스의 단락에만 적용됩니다. 반대로 예제의 다른 두 선택기는 특정 요소를 지정하지 않으므로 해당 클래스 값을 사용하는 요소에 적용됩니다.
여러 클래스의 장점
여러 클래스를 사용하면 해당 요소에 대해 완전히 새로운 스타일을 만들지 않고도 특수 효과를 요소에 쉽게 추가 할 수 있습니다.
예를 들어 요소를 왼쪽이나 오른쪽으로 빠르게 배치 할 수 있습니다. 그냥 float을 사용하여 왼쪽과 오른쪽의 두 클래스를 작성할 수 있습니다. left; 부유물 : 오른쪽; 그들 안에. 그런 다음, 왼쪽에 떠있는 요소가있을 때마다 클래스 목록에 "left"클래스를 추가하기 만하면됩니다.
그러나 여기서 걸을 수있는 좋은 라인이 있습니다. 웹 표준은 스타일과 구조의 분리를 요구한다는 것을 기억하십시오. 스타일은 CSS에있는 반면 구조는 HTML을 통해 처리됩니다.
HTML 문서가 모두 "빨간색"또는 "왼쪽"과 같은 클래스 이름을 가진 요소로 채워지는 경우 요소는 요소가 어떻게 보이는지보아야합니다. 구조와 스타일 사이에서 해당 선을 넘고 있습니다. 이런 이유로 비 의미 론적 클래스 이름을 가능한 한 많이 제한하려고합니다.
다중 클래스, 의미 및 JavaScript
여러 클래스를 사용하는 또 다른 장점은 더 많은 상호 작용 가능성을 제공한다는 것입니다.
초기 클래스를 제거하지 않고 JavaScript를 사용하여 기존 요소에 새 클래스를 적용 할 수 있습니다. 클래스를 사용하여 요소 의 의미 를 정의 할 수도 있습니다. 즉, 추가 클래스를 추가하여 해당 요소가 의미 론적으로 의미하는 것을 정의 할 수 있습니다. 이것이 Microformats의 작동 방식입니다.
여러 클래스의 단점
요소에서 여러 클래스를 사용하면 가장 큰 단점은 시간이 지남에 따라보고 관리하기가 다소 어렵게 만들 수 있다는 것입니다. 어떤 스타일이 요소에 영향을 미치는지, 그리고 어떤 스크립트가 영향을 미치는지 파악하기가 어려울 수 있습니다. Bootstrap과 같이 오늘날 사용 가능한 많은 프레임 워크는 여러 클래스로 요소를 많이 사용합니다. 이 코드는주의를 기울이지 않으면 빠져 나와 매우 빨리 작업 할 수 있습니다.
여러 클래스를 사용하는 경우, 의도하지 않더라도 한 클래스의 스타일을 다른 클래스의 스타일보다 우선 할 위험이 있습니다. 그러면 스타일을 적용해야하는 이유가 나타나도 왜 적용되지 않는지 파악하기가 어려울 수 있습니다.
하나의 요소에 적용된 속성을 사용해도 특수성을 인식 할 필요가 있습니다!
Chrome의 웹 마스터 도구와 같은 도구를 사용하면 클래스가 스타일에 어떤 영향을 주는지 쉽게보고 스타일 및 속성과 충돌하는 문제를 피할 수 있습니다.
Jennifer Krynin의 원본 기사입니다. 제레미 지라드 편집 : 8/7/17