css340 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.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 ··· 4 5 6 7 8 9 10 다음
