CSS 교재18 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.6 의사-요소(pseudo-element)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 CSS에서는 방금 전 의사 클래스(pseudo-class)와 더불어 의사 요소(pseudo-element)를 이용하여 선택자를 구성하고 CSS 규칙을 만들어서 스타일을 적용할 수 있는 기능을 제공합니다. 만일 여러분이 첫 번째 문자, 혹은 첫 라인에 스타일을 적용하고자 할 경우 span 요소를 이용하지 않고 문제를 해결할 수 있을까요? 여러분은 “first-letter”, “first-line” 와 같은 의사 요소(pseudo-element)를 이용하여 이와 같은 작업을 수행할 수 있으며 다음과 같은 형식 사용합니다. HTML 요소이름::pseudo-element이름 { property:valu.. 2013. 8. 1. 1.5.6 부정(negation) pseudo-class 1.5.6 부정(negation) pseudo-class 부정 의사 클래스는 not(입력파라미터) 안의 입력 파라미터에 의해 선택된 요소(들)을 제외한 모든 요소(들)을 선택하는데 사용하는 것으로 기본 사용 형식은 다음과 같습니다. HTML 요소이름:not(요소,속성,id,...) { property:value; property:value; } 위 형식에서 not의 입력 파라미터로는 HTML 요소, 속성, id 등이 올 수 있으며 이러한 입력 파라미터를 통해 선택된 요소(들)을 제외한 요소(들)에 스타일이 적용됩니다. 이제 메모장을 열어서 다음과 같이 작성합니다. not의 이해 HTML,CSS and Javascript HTML,CSS and Javascript HTML,CSS and Javascript.. 2013. 8. 1. 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. 이전 1 2 3 4 5 다음