[CSS] CSS .과 #의 차이

CSS에서 스타일을 적용시킬 때, #과 .을 정말 많이 쓴다. #과 .은 각 아이디(id)와 클래스(class)를 구분하는 선택자로 사용된다. CSS 파일을 보면, #과 .을 구분하여 스타일을 각각 적용하고 있는 것을 볼 수 있다.

---

# 선택자

# 선택자의 경우에는 아이디(id)를 구분하는 선택자로 사용되는데, 해당 id가 여러 개가 존재한다면 해당 id를 가진 것에 스타일이 적용이 된다.

#testDiv {
  width: 200px;
  height: 200px;
  background-color: red;
}

 

위와 같이, testDiv라는 id를 가진 태그에 아래 정의된 css의 스타일(width, height, background-color)을 적용하는 것을 말한다.

---

. 선택자

. 선택자의 경우에는 클래스(class)를 구분하는 선택자로 사용되는데, 해당 클래스를 가지고 있으면 해당 클래스에 다 적용이 된다.

.bodyContentArea {
	float: left;
    margin-bottom: 10px;
    padding: 4px 6px;
    width: 100%;
	overflow: auto;
}

 

위와 같이, bodyContentArea 클래스를 가진 요소에 float와 margin-bottom, padding 등의 css 스타일을 먹이는 거다.