[ HTML] id(아이디) 선택자와 class(클래스) 선택자

 

[ HTML ] id(아이디) 선택자와 class(클래스) 선택자

 

 

 

 

id 선택자와 class 선택자를 쓰는 이유는

css에서 디자인 할때 내용이 중복되거나(class 선택자 사용)

특정 부분에만 디자인 하고 싶을 때(id 선택자 사용)

이름을 부여해서 디자인을 한다. 

 

 

 

 

 

여기서 아이디 선택자와 클래스 선택자의 차이는?

 

 

 

아이디 선택자는 동일한 이름을 부여할 수 없고, 

하나의 태그에 이름을 정해서 디자인을 할 수 있다. 

html 표시 : id="이름"  / css 표시 : #이름

 

 

클래스 선택자는 동일한 이름을 가질 수 있고, 

여러 곳에 적용해서 디자인을 할 수 있다. 

html 표시 : class="이름" / css 표시 : .이름

 

 

 

아이디 선택자 예시

 

 

<id 선택자 예시>

html 입력 : <header id="main_header">

헤더 태그 안에 아이디 이름으로 main_header를 부여했다. 

 

 

css 입력 : #main_header{ width:100%; height: 140px;}

부여한 아이디 선택자를 사용하여 해더의 너비를 100%, 높이는 140px로 지정했다. 

 

 

#은 css에서 id를 가리킨다.

#을 적고 부여한 이름을 같이 적어주면 css에서 선택자로 사용할 수 있다.

 

 

보통 디자인 할 때 id나 class로 이름을 정해서 디자인을 한다. 

그게 알아보기도 편하고 입력속도도 빠르다. 

 

 

아이디 선택자로 지정 된 이름은 다른 곳에는 줄 수 없고,

비슷한 이름을 주고 싶을 경우에는 main_header_1 처럼 뒤에 숫자를 주거나

sub_header 처럼 메인이 아닌 서브처럼 명칭을 살짝씩 바꿔서 지정해 줘야 한다. 

 

 

보통 id선택자는 한 부분에 디자인 할 경우에 사용한다. 

 

 

 

 

클래스 선택자 예시

 

 

html 태그에서 동일하게 디자인을 주고 싶은 곳을

클래스 선택자로 이름을 부여한 후 

css 에서 한번에 주면 편하다.

 

 

<클래스 선택자 예시>

html 입력 : <span class="arrow">bottom</span>

<span class="arrow">OUTER</span>

<span class="arrow">TOP</span>

 

bottom과 OUTER, TOP에 동일한 효과를 주고 싶을때,

span 태그에 class 선택자로 동일하게 이름을 부여해 준다. (나는 .arrow로 줬음)

 

 

css입력 : .arrow{width: 14px; height: 10px; background: url(arrow.png);}

arrow 클래스 선택자에 너비는 14픽셀, 높이는10픽셀인 배경이미지(arrow.png)를 넣는다는 의미이다.

 

.은 css에서 class를 뜻한다. 

 

html 에서 class="arrow"를 줬다면,

css 에서 .arrow 로 적으면 된다. 

 

 

클래스 선택자는 꼭 동일한 부분을 디자인 할때만 적어주지 않고, 

특정한 부분을 디자인 할때, 하나의 태그에 사용해도 된다. 

 

 

쉽지만 참 유용한 아이디 선택자와 클래스 선택자에 대해서 알아보았다.