선택자9 1.5.1 동적(dynamic) pseudo-class 1.5.1 동적(dynamic) pseudo-class 웹 사이트에서 여러분은 하나의 링크(link)의 상태가 방문 전(unvisited), 방문됨(visited) 그리고 활성화(active) 3가지 주요 상태가 있다는 것을 알고 있을 것입니다. CSS에서는 이에 대응하는 dynamic pseudo-class로 각각 a:link, a:visited, 그리고 a:active로 나타낼 수 있습니다. 또한 CSS3에는 여기에 a:hover, a:focus를 사용할 수 있도록 정의되어 있습니다. 그래서 일반적인 사용 형식을 나타내면 다음과 같은 형태로 사용할 수 있습니다. 그리고 위에서 사용된 의사 클래스(pseudo-class)에 대하여 정리하면 다음과 같습니다. pseudo-class 설명 link 아직 방.. 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.4.5 “[속성^=속성값]”의 경우 1.4.5 “[속성^=속성값]”의 경우 속성이 속성값으로 시작되는 값을 가질 경우에 정해준 스타일이 적용되는 형태로 블록 내에 모든 코드를 주석 처리하고 다음과 같이 코드를 작성, 저장합니다. 그 다음 IE9를 통해서 보면 4개의 h4 요소의 title 속성이 모두 “book”으로 시작하기 때문에 다음과 같이 모두 스타일이 적용되어 나타납니다. 1.4.6 “[속성$=속성값]”의 경우 속성이 속성값으로 끝나는 값을 가질 경우로 이해를 돕기 위해서 … 블록 내의 모든 코드를 주석() 처리한 후 다음의 코드를 추가합니다. 스타일 시트 파일 HTML 문서 word 문서 h4 요소에 파일 확장자(file extensions) 속성을 설정하고 속성값으로 각각 “.css”, “.html”, “.docx”로 설정하였습.. 2013. 7. 31. 이전 1 2 3 다음
