CSS 교재18 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.4 UI element state pseudo-class 1.5.4 UI element state pseudo-class form과 같은 UI(User Interface) 요소들은 사용자가 버튼을 클릭하거나 데이터를 입력하는 것과 같은 활동에 의해서 다양한 상태를 가지게 됩니다. CSS3에서는 이러한 상태에 대해서 다음과 같은 형식을 이용하여 CSS 규칙을 설정하여 스타일을 적용할 수 있습니다. HTML요소이름:pseudoclass이름 { property:value; property:value; …} 위에서 “pseudoclass이름”에 들어갈 수 있는 UI element state 의사-클래스(pseudo-class)는 다음과 같습니다. pseudo-class 설명 enabled 해당 요소가 사용 가능한 상태 disabled 해당 요소가 사용 불가능한 상태 .. 2013. 7. 31. 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 4 5 다음
