선택자9 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.5.2 target pseudo-class 1.5.2 target pseudo-class target 의사 클래스(pseudo-class)는 참조되는 URI의 대상(target) 요소(Element)를 나타내는데 사용됩니다. 그래서 HTML 문서 내의 특정 위치를 가리킬 수 있도록 할 수 있는데 URL을 이용할 경우 번호 기호를 나타내는 #와 fragement identifier(혹은 anchor identifier)을 함께 사용하여 나타낼 수 있습니다. "http://example.com/prog.html#section_2" 위에서 prog.html 문서 안의 fragement identifier는 “section_2”을 가리킵니다. 이러한 fragement identifier는 HTML5의 특정 요소(Element)의 id 속성값이 될 수도 .. 2013. 7. 31. 이전 1 2 3 다음
