CSS # 기호는 id 값을 선택자로 지정할 때 사용합니다. . 기호는 class 값을 선택자로 지정할 때 사용합니다. 선택자는 HTML 태그에 고유 식별 번호를 지정해서 개별적인 디자인 효과를 줄 때 사용합니다.
CSS # . 차이점
# 기호는 HTML id 속성을 CSS 선택자로 지정할 때 id명 앞에 붙이는 기호입니다. .#기호는 HTML class 속성을 CSS 선택자로 지정할 때 class명 앞에 붙이는 기호입니다.
클래스와 id 값을 이해하려면 먼저 CSS 선택자가 무엇인지 살펴볼 필요가 있습니다.
CSS 선택자
CSS 선택자는 HTML 태그나 속성을 지정해서, 해당 태그 영역에 디자인 등의 효과를 부분적으로 줄 때 사용합니다.
예를 들어 <h1>사과</h1> 부분에 빨강색 배경색을 삽입하고 싶습니다.
<h1>사과</h1>
<p>사과는 빨강색입니다.</p><head> 태그 밑에 <style> 태그를 삽입합니다. 이후 <h1>를 선택자로 지정해서 배경색을 빨강색( h1 { background-color: red; } )으로 변경한 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color: red;
}
</style>
</head>
<body>
<h1>사과</h1>
<p>사과는 빨강색입니다.</p>
</body>
</html>HTML 클래스
클래스는 태그에 개별 식별 코드를 붙이는 작업입니다.
예를 들어 <h1>사과</h1>, <h1>바나나</h1>, <h1>딸기</h1>로 세 개가 있습니다. 여기서 <h1>를 선택자로 지정해서 빨강색 배경을 삽입하면, 사과, 바나나, 포도에 빨강색 배경이 모두 삽입될 것입니다.
<!DOCTYPE html>
<html>
<head>
<style>
h1
{
background-color: red;
}
</style>
</head>
<body>
<h1>사과</h1>
<h1>바나나</h1>
<h1>딸기</h1>
</body>
</html>HTML 클래스와 . 기호
만약 사과와 딸기만 빨강색으로 지정하고 싶을 경우 어떻게 해야 할까요?
이럴 경우, <h1 class = "red">사과</h1> 와 같이 class라는 고유 식별 번호를 입력해주고 그 값을 뒤에 적으면 됩니다. class의 값은 같은 값을 중복해서 사용할 수 있습니다. 사과와 딸기에 클래스 값을 같은 요소로 입력해줍니다. class 이름은 apple로 지정했습니다.
<h1 class="apple">사과</h1>
<h1>바나나</h1>
<h1 class="apple">딸기</h1>이제 디자인 효과를 주기 위해서 선택자를 호출해야 합니다. 이 때 h1이 아닌 class 이름인 apple를 선택자로 지정하려면, 마침표가 앞에 붙은 .apple라는 이름을 사용해야 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
.apple
{
background-color: red;
}
</style>
</head>
<body>
<h1 class="apple">사과</h1>
<h1>바나나</h1>
<h1 class="apple">딸기</h1>
</body>
</html>apple라는 클래스명을 가진 태그만 색이 변경되었습니다. 마침표 . 기호는 클래스명을 선택자로 지정할 때 사용하는 기호라는 것을 알 수 있습니다.
HTML id와 # 기호
id는 클래스와 거의 동일한 기능입니다. 특정 태그만 선택해서 디자인 효과를 주기 위해서 태그에 고유 식별 명칭을 붙일 때 사용합니다.
<h1 id="apple">사과</h1>
<h1 id="banana">바나나</h1>
<h1>딸기</h1>class와 차이점이 있다면, id는 동일한 값을 사용할 수 없습니다. 그래서 사과에는 id값을 apple로 지정했고, 바나나에는 banana와 같은 다른 단어를 지정했습니다. 물론 강제로 지정하면 되지만, 나중에 제이쿼리 등과 연계시 오류가 생기므로 id값은 중복을 해서는 안됩니다.
또 하나의 차이점은 선택자 지정시 기호의 차이가 있습니다. class는 선택자로 지정시 . 기호를 사용했습니다. id는 선택자 지정시 # 기호를 사용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
#apple
{
background-color: red;
}
</style>
</head>
<body>
<h1 id="apple">사과</h1>
<h1>바나나</h1>
<h1>딸기</h1>
</body>
</html>id 값이 apple인 요소를 호출한다면 #apple { } 와 같은 형태로 선택자를 지정합니다.