04. 선택적 스타일 적용 (1)

해당내용은 "쉽고 빠르게 익히는 CSS3(제이슨 크랜포드 티그)"를 읽고 정리한 글입니다. 

 

선택적 스타일 기능은 조건에 부합할 때만 엘리먼트에 스타일을 적용할 수 있는 기능이다.

엘리먼트 가계도

<h2><strong>Chappter 4</strong>The Pool of Tears</h2>

중첩된 형태에서 바깥쪽 엘리먼트(<h2>)를 부모, 안쪽 엘리먼트(<strong>)를 자식이라고 한다. 자식태그와 이 자식 태그의 자식태그들은 모두 부모의 자손이다. 같은 부모 밑에 있는 두 태그는 형제라고 하며 나란히 위치한(= 바로 앞뒤로 위치한) 두 태그는 인접 형제라고 한다. 

 

문맥에 따른 스타일 정의

문맥 스타일을 사용하면 부모 및 형제를 기준으로 특정 엘리먼트가 보이는 방식을 지정할 수 있다. 

 

- 자손 엘리먼트의 스타일 적용 

.copy h1 em { color : red; }

부모 선택자나 공백 구분한 선택자 목록을 기준으로 자손 엘리먼트에 각기 다른 스타일을 적용할 수 있다. 이때 해당 자손 선택자는 기존 선택자의 자손이 될때만 스타일을 적용받는다

 

.copy * em { color : red; }

특정 자식 레벨에서 정확한 선택자를 지정하지 않아도 될때는 공통 선택자 (*)를 사용하면 된다. 

 

- 자식 엘리먼트에만 스타일 적용 

.copy > em { color: red; }

부모의 자식 엘리먼트에만(자손 엘리먼트는 제외)스타일을 적용하려면 닫는 꺽쇠 괄호(>)를 구분자로 사용해 부모 선택자와 자식 선택자를 꼭 명시해야 한다. 

 

- 형제 엘리먼트의 스타일 적용 

 

p + p { color: red; }

인접 형제에 스타일 적용 

 

p ~ p { color: red; }

일반 형제에 스타일 적용

 

의사 클래스의 사용

의사 클래스는 엘리먼트의 기본 상태와는 별도로 스타일을 적용할 수 있는 엘리먼트의 사전 정의 상태 또는 사용 방식을 말한다. 

 

a:link { color : red; }

 

-  링크의 스타일 적용

 

:link  아직 선택하지 않은 하이퍼텍스트 링크의 모습을 선언할 때 사용 

:visited  사용자가 이미 선택한 링크의 모습을 설정할 때 사용. 사용자가 이미 선택했다는 말은 브라우저 히스토리에 태그의 href 어트리뷰트 URL이 등록된 상태를 말한다. 

:hover  사용자의 마우스 포인터가 링크 위에 올라올 때의 링크 스타일을 설정할 때 사용한다. 

:active  사용자가 클릭하거나 선택한 엘리먼트의 스타일을 설정할 때 사용한다. 

 

- 사용자 상호작용에 대한 스타일 적용 

 

:hover  링크에서와 마찬가지로 마우스 포인터가 엘리먼트 위에 올라온 경우 엘리먼트의 모습을 설정한다. 

:focus   텍스트 필드처럼 포커스를 받을 수 있는 엘리먼트에 적용된다. 

:active   링트에서와 마찬가지로 클릭 또는 선택시 엘리먼트의 스타일을 설정한다. 

 

- 의사 클래스를 지닌 특정 자식에 대한 스타일 적용

 

:first-child  부모의 첫번째 자식이면서 해당 선택자 타입에 속하는 엘리먼트의 스타일을 설정한다. 

:first-of-type  부모내에서 처음으로 해당 선택자에 속하는 엘리먼트의 스타일을 설정한다. 

:nth-child(#)  지정된 순서에 등장하는 자식 엘리먼트의 스타일을 설정한다. 예를 들어 단락의 세번째 자식 엘리먼트 스타일을 설정하려면 p:nth-child(3)처럼 하면 된다. 

:nth-of-type(#)  부모내에서 지정된 순서에 등장하는 선택자 타입 엘리먼트의 스타일을 설정한다. 예를들어 7번째 단락은 p:nth-of-type(7)처럼 사용한다.

:nth-last-of-type(#)  부모내에서 지정된 순서에 등장하는 선택자 타입 엘리먼트의 스타일을 설정하되, 밑에서 부터 순서를 계산한다. 

:last-child   부모의 마지막 자식이면서 지정한 선택자에 속하는 엘리먼트의 스타일을 지정한다.

:last-of-type    부모 내에서 마지막으로 등장하는 특정 선택자 타입 엘리먼트의 스타일을 지정한다. 

 

- 특정 언어에 대한 스타일 적용 

:lang() 의사코드 사용해 특정언어를 바탕으로 스타일을 지정할 수 있다. 

p:lang(fr) {...}    ->  <p lang="fr">...</p>의 스타일 지정

 

- 엘리먼트에 대한 스타일 부정 

:not을 사용하면 특정 선택자가 스타일을 적용하지 못하도록 할 수 있다. 

p:not(.dialog) {...}  -> <p class="dialog">...</p>에는 스타일이 적용되지 않는다. 

 

의사 엘리먼트의 사용

의사 엘리먼트는 엘리먼트의 나머지 부분과 상관없이 독립적으로 스타일을 적용할 수 있는 단락의 첫 글자 또는 첫 줄과 같은 특정 영역을 말한다. 

 

- 첫 글자 및 첫 줄 의사 엘리먼트의 사용 

p:first-letter { color : red; } 

텍스트 블록의 첫글자

 

p:first-line { color : red; }

텍스트 블록의 첫줄

 

- 엘리먼트 전, 후 콘텐츠 설정

 

h1:before {
content : url('../images/bullet-1.png');}

h1:after {
content : url('../images/bullet-2.png');}

 

:before와 :after 의사 엘리먼트는 선택자 위아래에 보여줄 콘텐츠를 생성할 때 사용한다. 

보통 이런 의사 엘리먼트는 content속성과 함께 사용한다. 의사 엘리먼트를 사용하면 반복되는 콘텐츠를 일관된 스타일로 페이지에 추가할 수 있다.