태그의 우선순위 ( ID & Class 선택자 )

태그의 우선순위 ( ID & Class 선택자 )

 

1. ID 선택자 & Class

 

ID 선택자 :  #

- Id는 유일한 값.
- 한개만 적용 가능(같은 id를 다른 데에 사용 불가능)

Class :  .

- id 와 달리 같은 class 를 여러 개 적용 가능 → 공통 적인 것의 속성을 변경할 때 사용

 

<div id="wrap">
	ID
</div>

<div class="wrap">
	Class
<div>

#wrap{
	width: 100px;
	height: 100px;
	background-color: pink;
}

.wrap{
	width: 100px;
	height: 100px;
	background-color: skyblue;			
}

 

 

 

2. BOX

 

- 보이지 않는 상자
- 감싸는 역할만 한다.
- box : 아래로 쌓이는 것이 특징(Block 속성)
- 홈페이지의 레이아웃을 div 로 뼈대를 잡고 시작
- 이미지는 inline-block 속성.
- 텍스트는 inline 속성

 

<div class="box01">box1</div>
<div class="box02">box2</div>
<div class="box03">box3</div>

div{
	width: 100px;
	height: 100px;
}

.box01{
	background-color: pink;
}

.box02{
	background-color: skyblue;
}

.box03{
	background-color: darkseagreen;
}

 

3. 태그의 우선순위

- 나중(아래)에 쓰여진 CSS 속성이 우선순위가 높음

- ! important > HTML 지정 > ID선택자 > Class > 일반 태그

- 속성이 중복 지정되는 경우, 우선순위에 따라 적용