html class 클래스로 그룹을 만들어 CSS 서식 동시에 적용하기
같은 수업을 듣는 학생들의 모임을 클래스 class라고 합니다. html에서는 같은 속성을 가진 개체를 하나로 묶어 그룹핑을 할 때 이 class 개념을 사용합니다. class="클래스 이름"으로 서식을 적용할 그룹임을 정의합니다. 클래스 이름을 saw로 작성했습니다. 아래와 같이 class를 만듭니다.
<a href="1.html" class="saw"> HTML </a>
<a href="2.html" class="saw"> CSS </a>
지정한 saw 클래스에 서식을 적용하겠습니다.
<style> </style> 스타일 태그 안에 선택자로서 saw 클래스를 지정합니다. 선택자로 클래스를 지정하려면 클래스 이름 앞에 period [. ]을 찍어주어야 합니다. period 없이 클래스 이름 saw만으로 선택자를 지정한다면, 웹페이지에 있는 saw라는 텍스트에 대해 서식이 적용됩니다. 여기서는. saw와 같이 선택자를 적용하면 됩니다. 이제 saw 클래스에 해당되는 영역을 동시에 변경할 수 있습니다. 글자색은 회색으로 지정하겠습니다.
<head>
<style>
. saw {
color:grey;
}
</style>
</head>
2개 이상의 클래스 class 동시에 적용하기
CSS를 클릭했을 때, 글자가 빨간색으로 변경되도록 하고 싶습니다. "saw" 클래스를 지정해놓은 부분에 active라는 단어를 추가하여 "saw active"로 수정합니다. saw라는 클래스에 적용되는 서식 외에 active라는 클래스에 적용되는 서식을 추가한다는 의미입니다. clsass="클래스 이름 A 클래스 이름 B 클래스 이름 C..."와 같이 1칸씩 띄어쓰기로 구분하여 서로 다른 서식을 적용하는 다양한 그룹을 지정할 수 있습니다.
<a href="2.html" class="saw active"> CSS </a>
이제 <style> </style> 스타일 태그에 선택자. active를 추가 지정합니다. active라는 클래스에는 빨간 글자색을 서식으로 적용하겠습니다.
<head>
<style>
. saw {
color:grey;
}
. active {
color:red;
}
</style>
</head>
saw 클래스가 먼저 작성되었고 active가 상대적으로 최근에 작성된 클래스입니다. 클래스의 서식이 같은 내용에 적용될 경우 가장 최근에 작성된 클래스에 우선하여 적용됩니다.
id 선택자를 사용해 최우선 순위로 서식 적용하기
id는 identifier의 축약어로 어떤 대상을 유일하게 식별 및 구별할 수 있는 이름을 의미합니다. id 선택자를 통해 최우선 순위로 서식을 적용해야 할 이름을 구별해내는 것이지요. "saw active"에서 active를 분리해내어 id로 지정하겠습니다. 이때 id 선택자로 지정한 id="active"를 다른 곳에 사용할 수 없습니다. id 선택자는 고유한 값 하나만 가져야 하며 단 한 번만 등장해야 합니다. id는 중복되어서는 안 되는 유일무이한 값입니다. id="active2"등으로 별도 지정해야 합니다.
<a href="2.html" class="saw active"> CSS </a>
<a href="2.html" class="saw" id="active"> CSS </a>
이제 지정해놓은 ID 선택자에 서식을 적용해보겠습니다. 선택자로서 class를 지정할 때 period [. ]를 찍어. class 방식을 사용했습니다. 선택자로서 id를 지정할 때는 period 대신 #을 붙입니다.
<head>
<style>
. saw {
color:grey;
}
#active {
color:red;
}
</style>
</head>
서식 적용 우선순위 ID 선택자 > class 선택자 > 태그 선택자
기본적으로 가장 마지막에 작성된 선택자에 대한 서식이 우선으로 적용된다는 약속이 있습니다. 이에 앞서 작성된 코드 순서와 무관하게 id 선택자는 일반 class 선택자에 우선해서 적용됩니다. 또한 class 선택자는 앵커 링크 태그 선택자 등 태그 선택자에 우선하여 적용됩니다. 상대적으로 세부적이고 구체적인 내용이 우선 적용되는 방식입니다.
다양한 선택자 스스로 찾아 학습하기
검색엔진에 css selector 키워드를 검색해보겠습니다. 다양한 선택자의 활용법을 얻을 수 있습니다. element(태그와 동일한 의미) 선택자 : p --- 모든 p태그를 선택합니다. 선택자를 통해 구체적인 서식을 적용할 태그에 타기팅 할 수 있습니다. 이를 통해 중복되는 코드의 양을 효율적으로 줄일 수 있습니다. 또한 한 부분을 수정하면 동시에 다른 부분까지 한 번에 수정할 수 있습니다.
'코딩' 카테고리의 다른 글
| <style> 태그에 선택자 comma [ , ] 로 정렬하여 동시에 서식 적용하기 (0) | 2020.08.29 |
|---|---|
| html 테두리로 상자 만드는 border 속성과 block element, inline element, none 값 (0) | 2020.08.29 |
| CSS 속성 property 텍스트 서식 적용하기 (0) | 2020.08.28 |
| html CSS 스타일 style 태그, 선택자 selector, 선언 declaration, 속성 property, 값 value 개념 (0) | 2020.08.27 |
| html 동영상 링크 삽입하기 (0) | 2020.08.27 |
댓글