css 강좌20 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.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 1.5 의사 클래스(pseudo-class)를 이용한 선택자(Selector) 구성과 규칙(Rule) 만들기 pseudo라는 의미가 원래 “가짜의”, “모조의”, “의사(擬似)의”라는 의미이며 pseudo-class를 의사 클래스라고 합니다. 이렇게 명명된 이유는 실제로는 클래스가 아닌데 마치 HTML에서 클래스와 유사하기 때문입니다. 의사 클래스(pseudo-class)라는 개념은 1996년 CSS1 권고안(Recommendation)이 완성되었을 때 처음 대두되었고 이 때 HTML의 a 요소에 웹 사이트 방문 전, 후, 활성화를 나타내는데 사용되는 :link, :visited, :hover, :active 같은 의사 클래스(pseudo-class)를 이용한 선택자가 HTML의 a 요소에 대해서 주로 .. 2013. 7. 31. 1.4.7 “[속성*=속성값]”의 경우 1.4.7 “[속성*=속성값]”의 경우 속성이 속성값으로 설정된 문자열을 적어도 한 번 이상 포함하는 경우로 이해를 위해서 … 블록 내의 모든 코드를 주석() 처리한 후 다음의 코드를 추가합니다. CSS(Cascading Style Sheet)는 ... HTML5는 ... CSS, HTML5의 ... 위와 같이 h4 요소의 title 속성에 CSS 문자열이 1번 혹은 2번 나타나거나 아니면 없는 형태로 코드를 작성, 저장한 후 IE9를 통해 보면 다음과 같이 나타나게 됩니다. 이제 스타일을 적용하기 위해서 블록 안을 다음과 같이 수정, 저장합니다. 위와 같이 h4 요소의 title 속성 중 해당 속성값이 “CSS” 문자열을 한 번 이상 포함하는 속성값을 갖는 h4 요소에 대해서 글꼴 색상을 빨강색으로 텍.. 2013. 7. 31. 이전 1 2 3 4 5 다음