특수선택자
CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다.
이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다.
반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다.
또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다.
전역선택자
전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다.
* {margin : 0; padding : 0;}
* 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화
이 CSS의 코드는 보통 CSS문서의 최상단에 넣어서 사용할 것입니다. 문서에 있는 모든 요소의 마진과 패딩을 '0'으로 초기화합니다. CSS의 전역 선택자인 '*'은 운영체제의 '*'과 비슷한 역할을 합니다.
다른 예제 들도 알아보겠습니다.
div * {color : red;}
div 안에 있는 자식요소들 속에 포함된 텍스트를 빨간색으로 칠함
요소 * 방식으로 스타일을 사용하면 해당 요소 아래에 있는 요소들에 스타일 적용이 된다.
* div {color : red;}
모든 div 안에 있는 텍스트를 빨간색으로 칠함
div * strong { color : red;}
div 안에 있는 자식요소들 중 모든 strong에 포함된 텍스트를 빨간색으로 칠함
전역선택자는 이처럼 전역 선택자가 지정한 요소 아래에 있는 모든 요소의 속성을 일괄적으로 바꿀 때 유용합니다. CSS의 기본적인 상속을 무시하고 강제 적용합니다.
인접한 형제 선택자
형제 선택자를 잘 활용하면 조금 더 정밀하게 스타일을 적용할 수 있습니다. 인접한 형제 선택자는 '+' 기호로 사용합니다.
h1 + p {color : red;}
<h1> 태그와 가장 가까이 있는 <p> 태그 내에 텍스트를 빨간색으로 칠함.
속성 선택자
HTML 태그에는 다양한 속성들이 함께 사용됩니다.
예를 들면 img 태그에는 alt 라는 확장 태그가 있습니다. alt 속성은 이미지를 식별 할 수 있는 텍스트를 넣을 수 있습니다.
<img src="google.gif" alt="구글">
<img>태그에 구글의 로고 이미지를 불러오고 '구글'이라는 텍스트를 alt속성에 부여
img[width|="500"] {border : 10px #ff0000 solid;}
<img> 태그로 가져온 이미지의 너비가 500px인 경우 10px두께의 빨간 테두리를 침
<img src="google.gif" width="500" alt="구글">
'0x01 Programming > 0x013 HTML5&CSS3' 카테고리의 다른 글
# 가상 클래스 (0) | 2012.09.26 |
---|---|
# 박스모델 (0) | 2012.09.20 |
# HTML문서에 CSS를 적용하는 세가지 방법 (0) | 2012.09.18 |
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 (0) | 2012.08.27 |
#HTML5의 새로운 요소(hgroup,article,section) (0) | 2012.08.27 |