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