![[웹코딩 가이드] 홈](./_img/sparrow-sqr.svg "[웹코딩 가이드] 홈으로 돌아가기"){kind=small}
- 태그 선택자
- Css 선택자는 스타일 속성을 적용하기 위한 선택 대상 을 지정하는데, 가장 기본적인 요소 선택자는 특정 요소Tag 를 대상으로 스타일을 적용한다
/* p 요소를 대상으로 하는 [선택자 p] */
p { /* 모든 p 요소에 Css 속성(속성명: 속성값;)을 설정한다 */
color: red; background: gray; /* 속성 정의 뒤에는 ;를 붙여야 한다! */
}
p { /* 다시, p 요소를 대상으로 위와 동일한 스타일인 color를 정의한다 */
color: blue; /* 이제, 나중에 정의된 이 p 스타일이 위에서 먼저 정의된 p 스타일을 덮는다! */
}
/* h1, h2(태그), #title(아이디), .para(클래스), [lang](속성) 모두에 적용할 공용 스타일 */
h1, h2, #title, .para, [lang] {
color: red;
}
☞ 콤마(,)로 구분하여 서로 다른 태그들(및 Class명, ID명, 속성명, .. 등)을 함께 지정해줄 수 있다 - 이하 同
- 아이디, 클래스 선택자
-
ID 선택자, Class 선택자는 특정 id, class 를 대상으로 스타일을 적용하는데,
#id스타일은 원칙적으로 문서 내의 단 한 곳에서만 쓸 수 있는 반면(곧, 해당 id 속성을 가진 단 하나의 대상),.class스타일은 하나의 태그에 여러개 적용하거나 서로 다른 태그들에 걸쳐 사용할 수도 있다
/* id 스타일 */
#idName { .. } /* idName ID를 가진 요소 */
h1#idName { .. } /* idName ID를 가진 h1 태그 */
/* class 스타일 */
.className { .. } /* className 클래스를 가진 요소(들) */
p.className1 { .. } /* className1 클래스를 가진 p 태그(들) */
p.className1.className2 { .. } /* className1, className2 클래스를 함께 가진 p 태그(들) */
☞ 위와 같이 .으로 연결하여 클래스 속성을 복수로 조합할 수 있다!
✓
ID를 사용하는 것 외에 달리 방법이 없는 특별한 경우가 아니라면;
대부분의 경우 요소에 #id 대신 .class를 사용하는 것이
미처 예기치 못한 에러의 가능성을 미리 방지한다는 차원에서 더 안전하다!
- 요소 속성 선택자
- 속성 선택자는 요소의 속성 을 대상으로 하는 선택자인데, 좀 혼란스럽지만.. 아래 참조하여 찬찬히 살펴보십시오
요소[속성] { .. } /* 특정 [속성]을 지닌 요소 */
요소[속성 = "값"] { .. } /* [속성 = "값"]을 지닌 요소 */
요소[속성 ~= "값"] { .. } /* [속성]에서 "값"이 하나라도(단어 단위) 포함된 요소 */
요소[속성 |= "값"] { .. } /* [속성]에서 "값"이 하나라도(단어 단위) 포함된(뒤에 -가 붙은 경우도 포함하는) 요소 */
요소[속성 *= "값"] { .. } /* [속성]에서 "값"이 일부라도 포함된 요소 */
요소[속성 ^= "http"] { .. } /* [속성]에서 "값"이 "http"로 시작하는 요소 */
요소[속성 $= ".com"] { .. } /* [속성]에서 "값"이 ".com"으로 끝나는 요소 */
☞
뒤에 i 플래그를 붙이면; 대/소문자 를 구분하지 않는다: 요소[속성 *= "iFlag" i]
←
html과는 달리, Css는 기본적으로 영문 대/소문자 를 구분한다!
- 요소 관계(위치) 선택자
- 요소 관계 선택자는 요소의 (모든)후손, (직계)자식, (모든)형제, (바로 아래)형제 등을 구분하는데, 이 선택자를 이해하기 위해서는; 먼저, 상위요소(= 부모)와 하위요소(= 자식 및 후손)를 구분할 필요가 있다
이 문단에는 굵은 텍스트가 포함되어 있습니다
이 문단에는 이탤릭체 텍스트가 포함되어 있습니다
☞ 여기서 <div>는 내부 모든 요소들을 포함하는 최상위 조상 이 되고, 아래 <p> 요소들은 그 자식들 이 된다(서로는 형제간 이다). 각 <p> 요소들은 또 그 밑에 <b> 및 <i>라는 자식 을 거느리고 있다(<p>와 <b> 및 <i> 모두 <div>의 후손들 이다). 각 <p> 요소들은 그 부모 <div>와 관련하여 자식 이 되며, 그 자식 <b> 및 <i>와 관련해서는 부모 가 된다 ← 이러한 관계는 각각에 대해 서로 상대적이다!
div p { .. } /* div에 속한 모든 p 요소들(후손들: 자식, 손자, ..) */
div > p { .. } /* div 내부 바로 밑 단계에 위치한 p 요소들(자식들) */
h1 ~ p { .. } /* h1과 같은 단계에서 뒤에 나오는 모든 p 요소들(모든 형제들) */
h1 + p { .. } /* h1과 같은 단계에서 바로 뒤에 나오는 p 요소 하나(바로 아래 형제) */
☞ 참고로, <table> 태그에서는 계층구조상 브라우저 차원에서 <thead>, <tbody>, <tfoot>가 자동으로 추가되므로, 사용시 주의할 필요가 있다!
✓ Css 선택자는 위쪽을 대상으로 선택할 수는 없고, 오직 하위 요소를 대상으로 하여 아래쪽으로만 선택할 수 있다 는 점은 기억해둘만한 가치가 있다!
- 범용 전체 선택자
- 범용 전체 선택자 *는 모든 하위 요소를 대상으로 한 스타일 적용에 사용되는데, 보통 문서의 기본 스타일 초기화에 사용된다
* { margin: 0; padding: 0; } /* html 문서 전체 스타일 정의 */
html, body { /* html과 body 전체 스타일 정의 */
margin: 0 auto; padding: 0;
}
