Selector13 only-child, only-of-type, empty only-child, only-of-type, empty 메모장으로 “structural-others.html”을 열고 …안의 다음 라인에 아래와 같이 코드를 추가합니다. CSS3 CSS3는 생각보다 재미있습니다. CSS3는 생각보다 재미있습니다. 위와 같이 p 요소의 자식 요소로 em 요소 1개가 사용되는 형태의 p 요소와 em 요소가 2개가 사용된 p 요소가 정의되어 있습니다. 저장한 후 IE9를 통해 보면 다음과 같이 나타나게 됩니다. 이제 only-child 의사 클래스를 이용해서 선택된 요소에 배경색을 청록색(aqua)로 적용해봅니다. 이를 위해 블록 내에 다음과 같이 한 줄을 추가하고 저장합니다. em:only-child{background-color: aqua;} IE9를 통해서 확인하면 다.. 2013. 8. 1. first-child, last-child, first-of-type, last-of-type first-child, last-child, first-of-type, last-of-type 메모장으로 “nth-of-typeANDnth-last-of-type.html”을 열고 블록 안의 코드를 다음과 같이 수정합니다. 위와 같이 수정한 후 다른 이름으로 저장을 선택한 후 “structural-others.html”로 저장하고 ①의 주석을 “tr:first-child{background-color: green;}”와 같이 풀어주고 저장한 후 IE9를 통해 그 결과를 확인합니다. 그 다음 다시 코드로 돌아와서 ①에 주석 처리한 후 ②의 주석을 풀어주고 저장한 후 IE9를 통해 그 결과를 확인합니다. 이와 같은 과정을 ③, ④에도 적용하여 확인하면 앞서 표에서 설명한대로 나타내게 됩니다. - 본 저작물은.. 2013. 8. 1. nth-of-type, nth-last-of-type nth-of-type, nth-last-of-type nth-of-type 의사 클래스는 부모 내에 포함된 모든 자식들을 선택한다는 의미에서는 nth-child, nth-last-child 의사 클래스와 비슷하지만 특정 요소에 해당하는 자식 요소(들)만을 선택한다는 점에서 다릅니다. 마찬가지로 nth-last-of-type 의사 클래스는 nth-last-child 의사 클래스를 유사하며 특정 요소에 해당하는 자식 요소(들)만을 선택한다는 점에서 다릅니다. 방금 전 예제를 가지고 알아볼까요? 메모장으로 "rootnthnth-lastEx.html"을 열고 블록을 다음과 같이 수정합니다. 위에서 보는 것처럼 tr 자식 요소들 중 첫 번째 자식 요소에 배경색을 녹색으로 적용하도록 하였습니다. 메모장에서 다른 이.. 2013. 8. 1. 1.5.5 구조적(structural) pseudo-class 1.5.5 구조적(structural) pseudo-class 구조적 의사-클래스(pseudo-class)는 DOM(Document Object Model) 구조를 바탕으로 동작하는 선택자로 DOM은 요소(Element), 속성(Attribute), 텍스트(text)로 구성된 HTML 페이지의 계층형 구조를 나타냅니다. 구조적 의사-클래스(pseudo-class)는 이러한 계층형, 다시 말해서 트리(Tree) 구조의 HTML DOM 구조에서 요소(Element)의 id나 class 속성 같은 것을 이용하지 않고도 요소의 상대적 위치를 탐색하는데 요긴하게 사용될 수 있는 선택자(Selector)로 사용할 수 있는 구조적 의사-클래스(pseudo-class)는 다음과 같습니다. pseudo-class 설명 .. 2013. 8. 1. 이전 1 2 3 4 다음
