[CSS] 샾'#'과 마침표'.' 의 차이, 아이디와 클래스

CSS에서

# id : 선택자로 지정할  때 사용

 

.  class : 값을 선택자로 지정할 때 사용

 

클래스와 id의 기능은 동일하지만 적용할 수 있는 범위가 다름

id	class
# 샾	. 마침표
#id_name{속성명: 속성값; 속성명:속성값;}	.class_name{속성명:속성값;}
동일한 값 사용 불가	동일한 값 사용 가능
한 아이디당 한 페이지만 사용 가능	한 요소에 두 개 이상 사용 가능 (띄어쓰기로 구분)
한가지만 적용하고 싶을 때 유용	여러가지 스타일링을 한꺼번에 적용할 때 유용

---

/* CSS */
#identified {
  background-color: skyblue;
}

<!-- HTML -->
<div id="identified">특별한 ID를 가진 요소에요!</div>
<div>이건 그냥 div에요.</div>

위의 예제는id

 

 

---

/* CSS */
.red {
  color: #f33;
}

.yellow-bg {
  background: #ffa;
}

.fancy {
  font-weight: bold;
  text-shadow: 4px 4px 3px #77f;
}

<!-- HTML -->
<p class="red">빨간 글자색의 문단입니다.</p>
<p class="red yellow-bg">빨간 글자색과 노란 배경의 문단입니다.</p>
<p class="red fancy">빨간 글자색과 "멋진" 스타일을 가진 문단입니다.</p>
<p>이건 그냥 문단이에요.</p>

위의 예제는 class

 

반복적으로 사용되는 스타일에 class를 이용하여 정의하고,

내부에 디테일한 스타일을 정의할 때 id를 사용하면 효과적.

우선순위는 id>class>태그 순

 

 

 

출처: https://developer.mozilla.org/ko/docs/Web/CSS/Class_selectors