728x90
반응형
1. ID 선택자
css에서의 정의방법은 #id_name{속성명: 속성값; 속성명: 속성값;} 식으로 적용합니다.
ID를 사용할 때 중요한 것은 CLASS와 다르게 한페이지에서 한번만 사용이 가능합니다. ID는 페이지 내에서 특정 위치 태그를 지정하는 것이기 때문에 오직 페이지 내에서 한번만 사용할 수 있습니다.
2. CLASS 선택자
자주 사용되는 스타일에 적용하는 것이라고 생각하시면 됩니다.
예를 들어서 빨강색 or 파란색 등 색상을 미리 지정하고 HTML에 적용시키는 방법입니다.
css에서 정의하는 방법은 .class_name{속성명:속성값; 속성명:속성값;} 식으로 적용합니다.
html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 클래스명 또는 아이디값을 할당하여 처리가 가능합니다.
ID와 CLASS는 얼핏 보기엔 똑같은 기능을 하는 것 같지만, 알고 보면 큰 차이점을 가지고 있습니다.
우선순위 id>class>태그 순으로 적용됩니다.
3. ID와 CLASS의 차이점
- 하나의 id는 한 문서에서 한 번만 사용이 가능합니다.
- 하나의 class는 한 문서에서 여러 번 사용이 가능합니다.
- id의 속성이 class의 속성보다 우선 순위가 높습니다.
- 따라서 id의 속성은 해당 요소에 부여된 class 속성에 관계없이 작동합니다.
| ID | CLASS |
| id는 한페이지에 하나의 정의로 단 하나의 태그만 사용할 수 있다. | class는 한페이지에 반복적으로 사용되는 스타일을 정의할 수 있다. |
| 로고,상단메뉴,하단정보 같은 스타일을 정의할 때 id를 사용한다 | 반복적으로 사용되는 스타일에는 class를 이용하여 정의하고 그 내부에 세부 스타일을 정의할 때 id를 사용해주면 효과적이다. |
| #ID명 (선언자 : # ) | .CLASS명 (선언자 : . ) |
| #footer {clear:both;background-color:#333333;} | .center {text-align:center;background-color:#333333;} |
CSS 선택자란?
선택자란 말 그대로 선택을 해주는 요소입니다. 이를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 됩니다.
이런 문장들은 한군데에 모으면 스타일 시트를 이루게 되어, 많은 수의 스타일 규칙들을 관리하기 쉬워집니다.
위 이미지를 보면, 제일 앞 부분의 선택자 요소를 볼 수 있는데, 왼쪽 중괄호 "{"가 나오기 전의 부분 모두가 선택자입니다.
선택자는 Rule Set의 영향을 받는 HTML페이지 안의 특정 element들을 선택해서 선언 블록(Declaration Block)의 내용을 적용시켜 줍니다.