css 강좌20 1.7.2 자식(Child) combinator 1.7.2 자식(Child) combinator 자식 combinator는 선택자1(selector1)이 selector2를 자식의 형태로 취하는 것으로 “>” 기호를 이용하여 다음과 같은 형식으로 사용합니다. selector1 > selector2 { property:value; property:value; …} “combinatorEx.html” 파일을 메모장으로 열어서 다음과 같이 “자손(Descendant) combinator” 코드 밑에 h4 요소 중 클래스이름이 myclass인 요소에 대해서 배경색이 청록색이 되도록 설정합니다. 저장한 후 IE9를 통해 확인해보면 다음과 같이 h4의 자식 요소들 중에서 class 속성값이 “myclass”인 p요소에 배경색을 청록색으로 다음과 같이 나타냅니다... 2013. 8. 1. 1.7 combinator를 이용한 선택자 구성과 규칙 만들기 1.7 combinator를 이용한 선택자 구성과 규칙 만들기 combinator는 여러 개의 단순한 선택자(selector)를 조합하여 하나의 통합 선택자(selector)를 만드는 형태로 자손(Descendant), 자식(Child), 인접 형제(Adjacent Sibling)과 일반적인 형제(General Sibling)으로 구분하며 이에 대한 개념을 이해하기 위해서 다음과 같이 HTML 문서를 작성합니다. Program Files 디렉토리는 여러분들이 설치하는 프로그램이 기본적으로 위치하는 곳입니다. Program Files 디렉토리 안에는 다양한 프로그램들 Microsoft Office 오피스 프로그램이 위치하고 있습니다. Windows 디렉토리는 여러분의 두뇌와 같은 역할을 하는 프로그램들이 .. 2013. 8. 1. 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. 이전 1 2 3 4 5 다음
