본문 바로가기

Selector13

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.3 언어(lang) pseudo-class 1.5.3 언어(lang) pseudo-class 언어(lang) 의사 클래스는 영어(en), 프랑스어(fr), 한국어(ko)와 같이 각 나라 혹은 지역의 언어와 관련되어 사용되는 선택자를 구성하는데 사용되며 다음과 같은 형식을 따릅니다. selector:lang(C) { property:value; property:value; …} lang(C)에서 C에 올 수 있는 것은 “en”, “fr”, “ko”와 같은 각 나라 혹은 지역의 언어를 나타내는 코드를 넣어주면 됩니다. 메모장을 열어서 다음과 같이 작성합니다. 그는 말하길 오늘은 조금 일찍 퇴근할 수 있을꺼야. He said I'm so glad to meet you. 孔子 曰 學而時習之 不亦悅乎 위와 같이 한국어, 영어, 중국어로 된 문장을 포함하고.. 2013. 7. 31.
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.