HTML #ID와 .CLASS의 차이점
페이지 정보
본문
HTML 요소에 스타일을 설정하는 것 이외에도, CSS는 "ID"와 "CLASS"라는 자신의 선택자를 지정할 수 있습니다.
1. ID 의 정의
ID는 하나의 고유한 요소에 대한 스타일을 지정하는데 사용합니다.
ID는 HTML 요소의 ID속성을 사용하고, "#"로 정의합니다.
ID는 한 태그에 하나의 id만 지정할 수 있습니다.
주의: ID 이름으로 숫자로 시작하는 경우 모질라/파이어폭스에서 오작동할수 있습니다.
2. CLASS 의 정의
CLASS 는 요소 그룹에 대한 스타일을 지정하는데 사용합니다.
ID와 달리, CLASS 선택이 가장 많이 자주 여러 요소에 사용됩니다.
이것은 같은 CLASS와 여러 HTML 요소에 대한 특정 스타일을 설정할 수 있습니다.
CLASS는 HTML "." CLASS 속성을 사용하고, 함께 정의됩니다.
3. ID가 CLASS 보다 우선순위가 높습니다.
4. ID는 JavaScript에서 동적으로 제어가 가능합니다.
JavaScript에서 CSS를 동적으로 변화할 필요가 있을 경우 class는 안됩니다.
CLASS 정적, ID 동적
예)
<style type="text/css">
#hello { color:red; }
.abc { text-align: center; }
.center { text-align: center; }
</style>
<p id="hello">Hello World!</p>
<p class="abc">Hello World</p>
<p class="abc center">Hello World</p>
참고자료
http://bangbangi.tistory.com/145
http://mdoli.com/tatter/entry/CSS-id와-CLASS의-차이점
1. ID 의 정의
ID는 하나의 고유한 요소에 대한 스타일을 지정하는데 사용합니다.
ID는 HTML 요소의 ID속성을 사용하고, "#"로 정의합니다.
ID는 한 태그에 하나의 id만 지정할 수 있습니다.
주의: ID 이름으로 숫자로 시작하는 경우 모질라/파이어폭스에서 오작동할수 있습니다.
2. CLASS 의 정의
CLASS 는 요소 그룹에 대한 스타일을 지정하는데 사용합니다.
ID와 달리, CLASS 선택이 가장 많이 자주 여러 요소에 사용됩니다.
이것은 같은 CLASS와 여러 HTML 요소에 대한 특정 스타일을 설정할 수 있습니다.
CLASS는 HTML "." CLASS 속성을 사용하고, 함께 정의됩니다.
3. ID가 CLASS 보다 우선순위가 높습니다.
4. ID는 JavaScript에서 동적으로 제어가 가능합니다.
JavaScript에서 CSS를 동적으로 변화할 필요가 있을 경우 class는 안됩니다.
CLASS 정적, ID 동적
예)
<style type="text/css">
#hello { color:red; }
.abc { text-align: center; }
.center { text-align: center; }
</style>
<p id="hello">Hello World!</p>
<p class="abc">Hello World</p>
<p class="abc center">Hello World</p>
참고자료
http://bangbangi.tistory.com/145
http://mdoli.com/tatter/entry/CSS-id와-CLASS의-차이점
댓글목록
등록된 댓글이 없습니다.