이번 마지막 선택자 튜토리얼에서는 아주 특별한 유형의 선택자를 소개하겠습니다. 소위 의사 클래스 및 의사 엘리먼트라고 불리는 것입니다. 이들은 특정 HTML 요소를 참조하지 않지만 출력 장치에서 생성되는 선택기입니다.
의사 클래스와 의사 엘리먼트는 HTML 요소로 명확하게 설명할 수 없는 HTML 컴포넌트에 대한 선언을 정의하는 데 사용할 수 있습니다. 일반적인 예로는 방금 클릭한 하이퍼링크 또는 아직 방문하지 않은 하이퍼링크가 있습니다.
하이퍼링크 디자인하기
페이지의 하이퍼링크를 디자인하고 싶을 때가 많습니다. CSS는 이를 위한 다양한 옵션을 제공하며, 이를 사용하여 하이퍼링크의 다양한 상태를 처리하고 궁극적으로 시각적으로 사용자 정의할 수 있습니다.
예를 들어 하이퍼링크에 빨간색 색상을 지정하려는 경우 다음과 같이 표시할 수 있습니다:
a:링크 {색상: 빨간색; }
반면에 a:visited를 사용하면 이미 방문한 하이퍼링크가 표시됩니다. 다음 구문을 사용하면 이미 클릭한 하이퍼링크를 파란색으로 표시할 수 있습니다.
a:visited { color:blue; text-decoration:none; }브라우저에서는 다음과 같이 표시됩니다:
현재 클릭 중인 하이퍼링크를 별도로 디자인하고 싶다면 이 방법도 가능합니다.
a:active { 글꼴 굵기: 굵게; 색상: 파란색; 텍스트 장식: 없음; }
이를 위해 a:active 구문이 사용됩니다.
반면에 a:hover 구문은 마우스 포인터가 하이퍼링크 위로 이동한 상태를 나타냅니다. a:focus를 가진 또 다른 의사 요소도 있습니다. 이는 하이퍼링크가 포커스를 받는 순간을 설명합니다.
추가 의사 요소
다른 요소의 일부를 가리키는 데 사용할 수 있는 의사 요소가 있습니다. 대표적인 예로 ::첫 글자를 들 수 있습니다. 이 의사 요소는 현재 요소의 첫 번째 문자를 선택합니다. 텍스트가 포함된 모든 요소에 사용할 수 있습니다. 하지만 의사 요소는 모든 선택기의 끝에만 표시될 수 있습니다. 따라서 의사 요소는 여는 중괄호 앞에 배치해야 합니다.
h1::첫 글자 {색상: 파란색; }
요소의 첫 번째 줄은 ::첫 번째 줄을 통해 주소 지정이 가능합니다. 이 의사 요소는 블록 수준 요소에만 적용됩니다. 예시입니다:
p::first-line { background-blue; }
다음은 브라우저의 결과입니다:
on
두 개의 유사 요소인 :after 및 :before는 요소 앞뒤에 추가 콘텐츠를 표시하는 데 사용할 수 있습니다. 콘텐츠에 따라 표시할 내용이 결정됩니다.
- normal - 규칙에 정의된 의사 요소가 생성되지 않습니다.
- none - 의사 요소가 생성되지 않습니다.
- <string> - 여기에 지정된 문자열이 출력됩니다. 문자열은 단일 또는 이중 반전 쉼표로 묶어야 합니다.
- <URI> - URI 아래에 지정된 리소스가 삽입됩니다.
- <카운터> - 카운터를 정의하거나 특정 카운터를 지정합니다.
- attr(<식별자>) - 괄호 안에 지정된 속성 값이 삽입됩니다.
- close-quote - 닫는 역 쉼표를 삽입합니다.
- no-close-quote - 닫는 역방향 쉼표는 삽입되지 않지만 중첩 깊이는 1만큼 증가합니다.
- no-open-quote - 여는 반전 쉼표는 삽입되지 않지만 중첩 깊이는 1 증가합니다.
- 열린 따옴표 - 여는 반전 쉼표가 삽입됩니다.
예시입니다:
ul li:before { content: uri("bullet.gif"); }
CSS3는 또한 :not 의사 선택자를 도입했습니다. 이를 통해 특정 콘텐츠를 매우 쉽게 선택할 수 있습니다. 첫 번째 예시를 통해 이 의사 선택자가 실제로 얼마나 강력한지 보여드리겠습니다. href 속성이 없는 모든 하이퍼링크를 선택한다고 가정해 보겠습니다. 해당 구문은 다음과 같습니다:
a:not([href])
"일반" 하이퍼링크는 이 구문의 영향을 받지 않습니다. 그러나 앵커 정의에 대한 액세스는 가능합니다.
<a name="top">페이지 시작</a>
좀 더 자세한 예시를 통해 :not의 성능을 설명할 수 있습니다. 문서 내에 다양한 텍스트 단락이 정의되어 있습니다.
<body> <h1>PSD-Tutorials.de</h1> <p>이것은 단락입니다.</p> <p>이것은 또 다른 단락입니다.</p> <div>이것은 텍스트 영역입니다.</div> <a href="http://www.psd-tutorials.de" target="_blank">PSD-Tutorials.de</a> </body>
p로 표시된 텍스트 단락 외에도 div 영역과 하이퍼링크가 있습니다. 이제 다음과 같은 일이 발생해야 합니다:
- p로 표시된 모든 단락은 검은색 글꼴 색상을 갖습니다.
- p 단락이 없는 곳에는 빨간색이 글꼴 색상으로 사용됩니다.
해당 CSS 구문은 다음과 같습니다:
p { color:#000; } :not(p) { color:#ff0000; }상속의 원칙
CSS 정의를 이해할 때 가장 중요한 것 중 하나는 상속입니다. 실제로 CSS에서 스타일 속성은 한 요소에서 다른 요소로 상속됩니다.
예를 들어
HTML {색상: 빨간색 }이 정의는 HTML 요소에 전경색을 빨간색으로 할당합니다.
상속 원칙에 따라 이 색상 정의는 이제 HTML에 종속된 모든 요소에도 적용됩니다. 즉, HTML 아래의 모든 요소는 기본적으로 빨간색으로 표시됩니다. 이 변형의 장점은 이러한 요소의 색상을 빨간색으로 명시적으로 정의할 필요가 없다는 것입니다. 하지만 p-단락의 콘텐츠가 빨간색으로 표시되지 않아야 한다면 어떻게 해야 할까요? 그러면 HTML의 상위 색상 정의를 덮어써야 합니다.
HTML { color: red; } p { color: #000; }
p와 div 요소가 두 개 있으면 어떻게 될까요?
<body> <p>PSD-Tutorials.de</p> <div>World</div> </body>
결과는 다음과 같습니다:
HTML의 색상 정의는 div의 콘텐츠에만 영향을 줍니다. 반면에 p 단락은 검은색으로 표시됩니다.
CSS에서는 스타일 정의를 지정하는 다양한 방법이 있습니다. 이것이 한 요소에 대해 모순되는 지침이 있을 수 있는 이유이기도 합니다. CSS는 이러한 경우에 대한 가중치 원칙을 제공합니다. 이 원칙은 요소에 대한 지침 중 우선순위가 있는 지침을 결정합니다. 여기서는 이 원칙에 대해 자세히 설명하지 않겠습니다. 하지만 http://wiki.selfhtml.org/wiki/CSS/Kaskade 또는 http://www.thestyleworks.de/basics/cascade.shtml 에서 이에 대한 자세한 정보를 찾을 수 있습니다.
제 목표는 CSS 속성을 정의할 때 주의해야 할 사항을 보여드리는 것입니다. 다음 예제는 이러한 목적을 달성하기 위한 것입니다:
<!DOCTYPE html> <html lang="en"> <head> <title>PSD-Tutorials.en</title> <meta charset="UTF-8" /> <style> body { font-family:Arial, Helvetica, Serif; font-size: 90%; } p { colour: #000; } h1 { font-size: 120%; 글꼴 굵기: 일반; } strong { color:#CCCCCC; } h2 strong { color: red; } </style> </head> <body> <div> <h1>PSD-Tutorials.en</h1> <p>이것은 <strong>굵은 단어</strong>가 있는 단락입니다.</p> <h2>이것은 <strong>굵은 단어</strong>가 있는 제목입니다.</h2> </div> </body> </html>브라우저에서는 다음과 같이 표시됩니다:
보시다시피, 예를 들어 강하게 표시된 단어는 서식이 다르게 지정되어 있습니다. 어떤 유형의 서식이 사용되는지는 궁극적으로 정의의 순서에 따라 달라집니다.
또는 CSS 명령어를 특히 중요한 것으로 표시하는 데 사용할 수 있는 !.important 키워드도 있습니다.
<style> body { font-family:Arial, Helvetica, sans-serif; font-size: 90%; } p { colour: #000; } h1 { font-size: 120%; font-weight: normal; } strong { colour:#CCCCCC !important; } h2 strong { colour: red; } </style>다시 한 번 결과를 살펴보세요:
이 맥락에서 이 튜토리얼에서 언급한 소스를 다시 한 번 읽어보세요. (처음부터 이 주제를 너무 깊이 파고들 필요는 없겠지만요).
