[HTML] 스타일 태그 ID / CLASS 선택자 개념 사용법 속성

 

1. ID 선택자

#아이디 { 속성1: 속성값; 속상2: 속성값; }

 

id는 한페이지에 단 한번의 정의로 고유한 하나의 태그만 사용할 수 있다.

그리고 하나의 태그에 id 속성은 하나만 가질 수 있다.

동일한 것이 없는 고유한 태그기 때문에 <고유 식별자>라고도 표현할  수 있다.

 

<div id="id1">

 

로고, 상단메뉴, 하단정보 같은 스타일을 정의할 때 id를 사용한다.

 

 

 

 

---

 

 

 

2. CLASS

.클래스명 { 속성1: 속성값; 속상2: 속성값; }

 

class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다.

또한 하나의 태그에 class 속성은 여러개 가질 수 있다.

똑같은 형태로 꾸밀건데 하나씩 만든다면 엄청 불편하겠죠?

그럴때 그룹처럼 묶어서 똑같은 스타일을 지정해주고 뿌려준다면 아주 편할것이다.

 

 

<div class="class1 class2">

 

 

 

---

 

 

 

3. 스타일 선언의 우선순위

!important > inline > id > class > tag

 

 

 

---

 

 

 

4. !important

!important는 선언자 우선순위와는 관계없이 0순위 우선권으로 부여하여 표시할 수 있게하는 속성이다.

이 선언으로 순위를 깨버리고 최상위권으로 올라가 id/class를 무효화 시킨다.

 

 

 

---

 

 

 

class는 공통적인 성격을 가지는 폰트, 폰트사이즈, 폰트컬러 등 반복적인 스타일 요소에 적용하고

id는 개별적인 성격을 가지는 메뉴창의 크기, 위치 등 스타일 요소에 적용하는게 적합할것같다.