@ 선택자와 가상클래스, 가상 요소
- CSS 에서는 패턴 매칭(pattern matching) 규칙을 근거로 스타일을 적요하는 요소를 결정한다. 여기서 '패턴'은 선택자의 지정방법과 조합하는 방법을 말하며 이를 사용하여 스타일의 적용대상을 결정한다. 또 가상 클래스와 가상 요소라는 조금 복잡한 방법을 사용하여 스타일을 적용하는 것도 가능하다.
1. 타입 선택자와 전체 선택자
# 타입 선택자(요소명)
- 요소명만 선택자로 하는 것을 타입 선택자(type selector)라고 한다.body {
color : black;
background-color : white;
}
# 전체 선택자(*)
- 요소명이 아니라 애스터리스크(*)를 기술하여 모든 요소에 대한 스타일을 지정할 수 있다.
* {
color : black;
background-color : white ;
}
- 전체 선택자는 class 선택자나 id 선택자, 속성 선택자, 가상 클래스, 가상 요소에서 한 종류라도 함께 사용할 때엔 생략할 수 있다.
- '*.note'와 '.note'는 같다.
2. class 선택자와 id 선택자
- class 선택자와 id 선택자는 특정 요소를 대상으로 스타일을 적용하기 위한 것이다.- class 선택자와 id 선택자의 차이는 문서 안의 '복수'의 요소에 스타일을 적용하는 것인가 아니면 '유일'한 요소에 스타일을 적요하는 것인가이다.
# class 선택자(요소명, class명)
- 요소명에 피어리드(.)와 class명(임의의 이름)을 붙여 구별한다.
p.note { color : red; }
<p class="note"> 웹 콘텐츠 접근성.. </p>
- 요소명을 지정하지 않고 피어리드(.)와 class명만 기술하는 경우나 요소명 대신 전체 선택자(*)를 지정하는 경우에는 모든 요소에 그 스타일을 지정할 수 있다.
.note { color : red; }
<p class="note"> 웹 콘텐츠 접근성.. </p>
*.note { color : red; }
<p class="note"> 웹 콘텐츠 접근성.. </p>
- class 선택자를 복수 적용하는 경우 class 속성에 공백문자로 구분하여 class명을 나열한다.
*.note { color : red; }
p.emph { text-decoration : underline; }
<p class="note emph"> 웹 콘텐츠 접근성.. </p>
- 복수의 class 명을 동시에 지정할 수 있게 되었다.
p.note.emph { color : red; text-decoration : underline; }
<p class="note emph"> 웹 콘텐츠 접근성.. </p>
# id 선택자(요소명 #id 명)
- id 선택자는 문서 안에 있는 단 하나의 요소에 스타일을 적용하는 경우에 사용한다. [하나의 문서 안에 한 번빡에 출현 할 수 없다.]div#gnavi { font-size : small ; }
div#gnavi { font-size : small ; }
<div id="gnavi" >
<ul>
<li><a href="./references/">리퍼런스</a></li>
<li><a href="./tips/">팁</a></li>
</ul>
</div>
# class 선택자와 id 선택자로 사용할 수 있는 문자
- CSS2 에서는 선택자명은 반드시 알파벳(a~z, A~Z)으로 시작하고 알파벳, 숫자(0~9), 하이폰(-), Unicode(ISO 10646) 에서 인정하는 일부문자로 구성해야 한다.그리고 알파벳의 대문자와 소문자를 구별한다. [ 콜론(:), 피어리드(.) 를 사용할 수 없다]# name 속성과 id속성의 충돌 문제
- XHTML1.0에서는 이전 버전의 브라우저와의 호환성을 위해 a 요소 등에 name 속성과 id 속성을 모두 같은 값으로 지정하면 스타일이 충동할 가능성이 있다. a [name="c01"]{color : maroon; }
a#c01 { color : purple; }
<a href="./chapter1.html" name="c01" id="c01">충돌 </a>
- 이 같은 지정은 하나의 대상에 대해 속성 선택자와 id 선택자가 충돌한다.- 스타일 개별성 규칙에 따르면 'a[name="c01"]'은 '11', 'a#c01'를 '101'이므로 id 선택자가 우선된다.
a [name="c01"]{color : maroon !important; }
a#c01 { color : purple; }
<a href="./chapter1.html" name="c01" id="c01">충돌 </a>
- 이 경우 위와 같이 !important 선언을 사용하여 속성 선택자를 우선시킬 수 있다.# '구조와 표현'의 충돌 문제
- 구조와 표현의 충돌을 피하려면 div 요소나 span 요소 남용을 자제하고 class나 id 선택자는 의미(semantic)에 맞는 이름을 사용하는 것이 중요하다.3. 속성 선택자
- 속성 선택자(attribute selector)는 특정 속성명이나 속성값을 가진 요소에 스타일을 적용하기 위한 선택자다. 속성 선택자에는 네 가지 서식이 있다.
# 요소명[속성명]
- 요소 중에 그 속성명을 가진 요소에 스타일을 적용한다. 속성값은 관계없다. h3[id] { color : olive; }
<h3 id="r508">속성값은 상관없다 </h3>
# 요소명[속성명="속성값"]
- 요소 중에 그 속성명과 속성값을 가진 요소에 스타일을 적용한다. h3[id="r508"] { color : olive; }
<h3 id="r508">속성값은 상관있다 </h3>
# 요소명[속성명~="속성값"]
- 요소 중에 그 속성명을 가지고 속성값을 공백문자로 구분하여 복수지정한 경우 그 속성 값이 포함된 요소에 스타일을 적용한다. p[class~="note"]{color:red; }
<p class="w3c wcag note">복수지정한 경우 적용</p>
# 요소명[속성명|="속성값"]
- 요소 중에 그 속성명을 가지고 속성값을 하이픈(-)으로 구분하여 복수지정한 경우, 그 속성값의 앞 부분이 일치하도록 포함된 요소에 스타일을 적용한다. 일반적으로 lang 속성에 사용된다. *[lang|="en"] { font-family : Verdana, Arial, sans-serif; }
<p>
<span lang="en-US"> Time files like an arrow. </span>
</br>
<span lang="ko">시간은 화살처럼 빠르다.</span>
</p>
<p>
<span lang="fr">블라블라</span>
</br>
<span lang="ko">블라블라</span>
</p>
- 'en-US'라는 언어코드에만 속성이 적용된다.- lang 속성은 HTML 4.01 과 XHTML 1.0에는 사용할 수 있지만 XHTML 1.1에서는 폐지되었기 때문에 속성 선택자에도 lang 속성이 아니라 xml:lang 속성을 사용한다.
*[xml:lang|=*en*] { font-family : Verdana, Arial, sans-serif; }
- 속성 선택자는 CSS2에 새롭게 도입된 선택자이며 일부 브라우저가 지원하지 않는 점에서 주의하자.
4. 선택자 조합
- 타입 선택자(요소명)나 전체 선택자(*)는 조합하여 지정할 수 있다. class선택자나 id 선택자, 속성 선택자 등과 함께 사용할 수 있다.
# 선택자와 선택자(공백문자로 구분)
- 부모 요소에 포함된 모든 자식 요소를 대상으로 스타일을 적용하는 방법이며 자손 선택자라고 한다. div.note p{color :red}
div.note p abbr {text-decoration : underline }
<div class="note">
<p> 자식이다 <abbr title="w3c">W3C</abbr> </p>
</div>
- div 요소와 p 요소 사이에 전체 선택자(*)가 지정되어 있으므로 p요소가 div 요소의 직접적 자식 요소는 스타일이 적용되지 않고 자식 요소 이하의 경우에 스타일이 적용된다.(손자가 p이면 적용)
div * p { color : blue; }
# 선택자 > 선택자(왼쪽 부등호로 구분)
- 부모 요소 바로 뒤의 자식 요소(자식 요소 이하를 포함하지 않는다)를 대상으로 스타일을 적용하는 방법이며 자식 선택자(child selector)라고 한다. blockquote.wcag > p {font-size : small; }
<blockquote class="wcag" cite="http://www.w3c.org/TR/WAI-WEBCONTENT">
<p> 부모 요소 바로 뒤의 자식 요소 선택</p>
</blockquote>
- 자식 선택자를 연결하여 스타일을 적용하는 대상의 범위를 더 좁힐 수 있다.
blockquote.wcag > p> abbr {text-decoration : underline; }
- 하위 선택자 등 다른 조합 방법으로 사용할 수도 있다.
blockquote.wcag > ul p {font-size: small ; }
# 선택자 + 선택자(플러스기호로 구분)
- 문서 트리구조상 동일한 부모 요소를 가진 병렬 관계에 있는 요소 가운데 먼저 등록한 요소를 형 요소, 나중에 등록한 요소를 동생 요소라 한다. 인접 선택자는 요소의 직접적 동생 요소를 대상으로 스타일을 적용하는 방법이며 선택자와 선택자 플러스기호(+)로 구분하여 지정한다. h1+h2 { color : green;}
<h1>선택자 형</h1>
<h2>선택자 동생</h2>
- 아래 같은 경우는 적용 안된다.
h1+h2 { color : green;}
<h1>선택자 형</h1>
<p> 적용 안된다 </p>
<h2>선택자 동생</h2>
- 아래 같은 경우도 가능하다.
h1+h2+h3 { color: green;}
h1.chapter+h2.chapter+h3.chapter { color: green;}
# 선택자 그룹화
- 선택자는 콤마(,)로 구분하여 그룹화하고 복수의 요소에 같은 스타일을 한 번에 적용할 수 있다. th, td { font-size : small; }
div#title dl, div#title p {display : none; }
6. 가상 클래스
- 가상 클래스는 스타일을 적용하는 대상을 요소명이나 속성명, 속성값에 따라 분류하는 것이 아니라 '상황'에 따라 분류한다.
#:first-child 가상 클래스
- :first-child 가상 클래스는 부모 요소의 범위에서 처음 등장하는 자식 요소에만 스타일을 적용한다. div > p:first-child { text-indent: 0;}
<p> 앞 단락 </p>
<div class="note">
<p> 최초 단락 </p>
</div>
- div 요소에 포함된 직접적 자식 요소 중 최초에 등장하는 p 요소에만 스타일이 적용 div > p:first-child { text-indent: 0;}
<p> 앞 단락 </p>
<div class="note">
<h3>주의</h3>
<p> 최초 단락 </p>
</div>
- div의 직접적 자식 요소이지만 최초에 등장하는 자식 요소가 아니기 때문에 스타일 적용 안됨. p:first-child em {font-weight : bold; }
<div class="note">
<p> 주의문 <em>최초</em>의 단락 </p>
<p> 주의문 <em> 두번째 </em> 의 단락 </p>
</div>
- 자식 요소로 최초에 등장하는 p요소 중에 하위 요소로서 포함된 em 요소에 스타일이 적용된다. (두번째 em요소에는 적용안됨)# 링크 가상 클래스(:link, :visited)
- :link : 아직 열린 적이 없는 페이지로의 링크에 적용된다.- :visited : 이미 열린 적 있는 페이지로의 링크에 적용된다.
:link { color : blue; }
a:link { color: blue; }
a[href]:link {color:blue; }
:visited { color:purple; }
a:visited { color:purple; }
a[href]:visited {color:purple;}
- (X)HTML 에서 각각 의미가 같은 것이 된다.(다만 개별성은 각각 위에서부터 '10','11','21'이라는 차이가 있다.- 링크 가상 클래스는 class선택자나 id 선택자와 조합하여 지정하는 것도 가능하다.
a.external:link {color : blue;}
a.external:visited {color:purple;}
<a class="external" href="http://www.w3c.net">w3c</a>
div#gnavi a:link {color : blue;}
div#gnavi a:visited {color : purple; }
<div id="gnavi">
<ul>
<li><a href="./references/">리퍼런스</a></li>
<li><a href="./tips/">팁</a></li>
<li><a href="./reported/">리포트</a></li>
<li><a href="./selected/">추천</a></li>
</ul>
</div>
# 다이내믹 가상 클래스(:hover, :active, : focus)
- :hover => 어떤 요소를 마우스 커서 등의 지시 장치로 가리키는 경우 표시되지만 활성 상태가 아닌 경우에 적용된다.- :active => 어떤 요소가 활성 상태일 때 적용된다. 예컨대 사용자가 그 요소를 마우스로 클릭한다든지 실행키를 누른 다음 손을 떼기까지의 시간 등이 해당된다.
- :focus => 어떤 요소가 포커스될 때 적용된다. 단축키나 Tab키 등의 키보드 입력에 의한 포커스나 텍스트 입력폼이 포커스되는 경우가 해당된다.
a:link { color : blue; }
a:visited { color : purple; }
a:hover { color: yellow; }
a:active { color: red; }
- 여기서 :link 가사 클래스, :visited 가상 클래스, :hover 가상 클래스, :active 가상 클래스라는 지정순서에 주의해야 한다.
a:focus {background-color : yellow; }
a:focus :hover { background-color : fuchsia; }
- CSS1에서는 :active 가상 클래스는 :link 가상 클래스, :visited 가상 클래스와 함께 앵커 가상 클래스로 분류되어 a 요소에만 지정할 수 있었고, 이들 가상클래스는 상호 배타적인 것으로 분류 되어 있었다.
- CSS2에서는 :active 가상 클래스는 다이내믹 가상 클래스에 분류되어 링크 가상 클래스와 상호배타적이지 않는다.
- :focus 가상 클래스는 아우트라인 관련 속성과 조합하여 사용되는 경우가 있다.(여백을 제외하고 선이 그어짐)
:focus {outline : 2px dotted red }
# 언어 가상 클래스(:lang)
*.lang(en) { font-family : Verdana, Arial, sans-serif; }
<p>
<span lang="en-US"> Time files like an arrow. </span>
</br>
<span lang="ko">시간은 화살처럼 빠르다.</span>
</p>
<p>
<span lang="fr">블라블라</span>
</br>
<span lang="ko">블라블라</span>
</p>
- 'en-US'라는 언어코드에만 속성이 적용된다.
7. 가상 요소
# :first-line 가상 요소
- 어떤 요소의 첫 번째 줄에만 스타일을 적용하는 데는 :first-line 가상 요소를 사용한다. p:first-line { font-weight : bold; }
<p> 블라블라.. </p>
- 적용 가능 속성
- color
- word-spacing
- 배경 관련 속성
- 글꼴 관련 속성
- text-transform
- clear
- text-decoration
- line-height
- text-shadow
- vertical-align
- letter-spacing
# :first-letter 가상 요소
- 인쇄 매체에서 '드롭 캡'이나 '이니셜 캡'이라 하는 레이아웃 방법을 실현하기 위한 가상 요소이다.
p:first-letter {
float : left;
font-weight : bold;
font-size : 200%;
}
<p> 하하하히히히 </p>
- 적용 가능 속성
color
float
배경 관련 속성
글꼴 관련 속성
text-transform
clear
text-decoration
line-height
text-shadow
vertical-align
p { color : black; }
p:first-line { color : blue; }
p:first-letter {color : red; }
# :before 가상 요소와 :after 가상 요소
- :before 가상 요소와 :after 가상 요소는 어떤 요소에 포함된 내용의 앞뒤에 내용을 생성하기 위한 가상 요소다. p.note: before { content : "Note!";}
<p class="note"> 사용자...</p>
p.note: before { content : "Note!";}
p.note:first-letter {color :red; }
p.note: before { content : "Note!";}
p.note {border : 1px solid blue; }
q {font-style : italic }
q:before {
content : "Note!" ;
color : green ;
}
body :after {
content : "종료" ;
display : block ;
margin-top : 20px ;
text-align : center ;
}
댓글 없음:
댓글 쓰기