CSS 선택자(Selector), 속성(Property), 값(Value)
• CSS기본구조 : CSS선언의 기본 구조는 아래와 같습니다.
선택자는 복수의 속성과 값을 가질수 있으며, 각 속성:값; 사이에 세미콜론(;)으로 구분 지어 사용합니다.
선택자 { 속성 : 값; }
EX)
1) p { background:red; }
2) .class1 { border:1px solid red; background:blue; }
3) li > li.calss1{ margin:0 auto; padding:10px; font-size:12px; }
|
• CSS선택자 : CSS에서 가장 중요한 개념은 선택자(Selector)라고 할 수 있습니다. 선택자(Selector)가 있어야 선언된 CSS가 어디에 적용될지를 결정할 수 있기 때문입니다.
특히 CSS는 상속의 개념을 가지므로 선택자(Selector)에 대한 확실한 이해가 없이는 CSS를 제대로 활용하지 못합니다.
| 선택자(Selector) | 설명 |
| * | 전체 선택자 – 모든 요소를 선택 |
| #id | id=”id”의 모든 요소를 선택 |
| .class | class=”class”의 모든 요소를 선택 |
| element | |
| element | 요소 선택자 – 지정된 요소를 선택 |
| element, element | 요소 선택자 – 선택할 요소를 여러 개 지정 |
| element element | 자손 선택자 – 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택 |
| element > element | 자식 선택자 – 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택 |
| element + element | 인접 선택자 – 지정된 요소와 같은 레벨의 바로 다음 요소 선택 |
| attribute | |
| [attribute] | 속성 선택자 – 지정된 속성 가진 요소를 모두 선택 |
| [attribute=value] | 속성 값 선택자 – 지정된 속성의 값을 가진 요소를 모두 선택 |
| [attribute~=value] | 속성 값 선택자 – 지정된 속성에 지정된 값이 포함된 요소를 모두 선택 |
| [attribute|=language] | 속성 값 선택자 – 지정된 속성에 지정된 단어로 시작되는 요소를 모두 선택 |
| Link | |
| :link | 링크 선택자 – 모든 링크를 선택 |
| :visited | 링크 선택자 – 방문된 링크만 모두 선택 |
| :active | 링크 선택자 – 활성화된 링크만 모두 선택 |
| :hover | 링크 선택자 – 마우스오버된 링크만 모두 선택 |
| :focus | 링크 선택자 – input 요소의 포커스 된 요소를 선택 |
| 가상 선택자 | |
| :first-letter | 가상 선택자 – 지정된 요소의 첫 번째 문자를 선택 |
| :first-line | 가상 선택자 – 지정된 요소의 첫 번째 줄을 선택 |
| :first-child | 가상 선택자 – 지정된 요소의 첫 번째 하위(자식) 요소를 선택 |
| :before | 가상 선택자 – 지정된 요소의 앞 부분을 선택 |
| :after | 가상 선택자 – 지정된 요소의 뒷 부분을 선택 |
| :lang(language) | 가상 선택자 – 지정된 요소 중 언어가 괄호 안의 지정된 언어로 시작되는 요소를 선택 |
• CSS속성 : 각 속성에 대한 값은 링크를 통해 알수 있습니다.
| 분류 | 속성 | 비고 |
| 유형 | display | |
| z-index | |
| overflow | |
| visibility | |
| float | |
| clear | |
| cursor | |
| 넓이 + 높이 | width | |
| height | |
| 위치 | position | |
| 간격 | margin | |
| padding | |
| 표 | table | |
| 선 + 윤곽 | border | |
| outline | |
| 배경 | background | |
| 폰트 | font | |
| 텍스트 | color | |
| direction | |
| letter-spacing | |
| line-height | |
| text-align | |
| text-decoration | |
| text-indent | |
| text-transform | |
| vertical-align | |
| white-space | |
| word-spacing | |
| 리스트 | list-style | |
| 콘텐츠 | content | |
