HTML 내부스타일 CSS 선택자의 그룹화 방법

오늘은 각 요소에 클래스값을 부여하고, 이들을 모두 그룹화해서 일괄적으로 스타일을 적용시키는 방법에 대해서 배웠습니다. 여러개의 클래스값을 사용하는 경우에, 이들 중 일부 몇 클래스만 동일한 스타일을 적용시키고 싶다면 그룹으로 묶어서 관리할 수 있습니다.




내부스타일로 적용한다고 했으니, head 안쪽에 style 영역을 따로 만들어 줍니다. 그리고 본문을 먼저 작업을 합니다. 지금 보시면 h1부터 h5까지 다양한 요소들로 텍스트를 작성했는데, 제목 부분인 h1을 제외한 나머지에 class 값을 부여했습니다. 각 클래스값은 다릅니다. 이 모든 클래스값에 동일한 스타일을 적용시키고자 한다면 어떻게 할까요?


간단합니다. 콤마(,)를 이용하여 그룹화를 만들고 일괄 적용할 수 있습니다. 위에 빨간색으로 표시된 부분을 잘 봐주시기 바랍니다. 중요한건 띄어쓰기가 없습니다. 쉼표 바로 다음에 클래스명을 작성해야 합니다.


클래스값,클래스값,클래스값


이런 식인 것입니다. 그리고 괄호 안쪽에 원하는 스타일을 적용시키는 태그들을 넣어주시면 됩니다. 여기에서는 글씨 색상만 빨갛게 변경하도록 했습니다. 결과물을 확인해 보겠습니다.




보시는 것 처럼 정상적으로 일괄 변경 되었음을 알 수 있습니다. 선택자를 그룹화 할 때는 꼭 클래스명끼리 하지 않아도 됩니다. 일반 태그 선택자도 가능합니다. 태그 선택자와 클래스명을 그룹화 할 수도 있습니다.




이런식으로 클래스값이 아닌 태그와 짝을 지어서 그룹화도 가능합니다. 결과물을 확인해 볼까요? 이 선택자가 올바르게 작동한다면, h1의 텍스트, h4의 텍스트, p03의 텍스트 글씨만 빨간색으로 변경이 되어야 합니다.




아무 이상없이 잘 적용 되었음을 확인할 수 있습니다. 이처럼 그룹화도 잘 이용하면 편리하게 웹문서의 스타일을 입맛대로 꾸밀 수 있습니다. 끝.



"친절한효자손 취미생활" 을 검색!


이 블로그를 후원해주실 분들을 모집합니다!

이 글을 공유하기

댓글(0)

Designed by JB FACTORY