TechScribe Notes
5. 커스텀 체크박스 / 속성선택자/가상클래스/가상요소 본문
<HTML>
<CSS>
| 속성선택자 [속성]선택자: 특성 속성이 있는 요소를 선택하는 선택자. A[속성]{....} [속성=속성값]선택자: 특정 속성값이 있는 요소를 선택하는 선택자 input[type="checkbox"]{ ... } => input요소 중에서 type값이 "checkbox"인 요소/ 체크박스 요소 선택 [속성~=값]선택자: 여러 값 중에서 특정 속성값이 포함된 속성요소 선택/ 속성이 하나면서 속성값이 여러개일때 특정 속성값을 찾는데 편리하다. ex) [class ~=button]{ ... } => class값 중에 button이 있는 요소들(값을 포함하는게 아닌 일치하는! 경우에 선택/ 하이픈으로 연결된 값은 선택하지 않음. flat-button이나 buttons같은 경우는 선택하지 않는다.) [속성 |=값]선택자: 특정 속성값이 포함된 속성요소를 선택함 / 일치하거나 하이픈에 연결된 경우도 선택함 ex)a[title |= us] { ...} =>title속성에 us 단어가 포함된 속성값을 가진 요소들을 선택함. [속성^=값] : 특정 속성값으로 시작하는 속성 요소를 선택하는 선택자. [속성$=값] : 특정한 값으로 끝나는 속성의 요소를 선택하는 선택자. [속성*=값] : 일부 속성값이 일치하는 요소를 선택하는 선택자( 위치 상관 없음, 포함되어있다면 선택함) |
가상클래스
| 종류 | 설명 |
| :link | 방문하지 않은 링크에 스타일 적용 |
| :visited | 방문했던 링크에 스타일 적용 |
| :hover | 지정한 요소에 마우스 포인터 올려놓았을 때 스타일 적용 |
| :active | 지정한 요소를 활성화했을 때 스타일 적용 링크나 이미지 등을 활성화 했을 때, 클릭했을 때 |
| :focus | 지정한 요소에 초점이 맞춰졌을 때 스타일 적용 :텍스트 필드 안에 마우스 포인터 올려놓거나 탭키를 눌러 입력커서를 이동했을 때 |
| :target | 앵커 대상에 스타일 적용 앵커로 연결된 부분의 스타일 적용! 문서에서 같은 사이트나 다른 사이트 페이지로 이동할 때는 링크를 이용하고 같은 문서 안에서 다른 위치로 이동할 때는 앵커 사용. |
| :enabled | 지정한 요소를 사용할 수 있는 상태일때 |
| :disabled | 지정한 요소를 사용할 수 없는 상태일 때 |
| :checked | 선택한 요소의 스타일 적용(라디오박스, 체크박스에서) |
| :not | 지정한 요소가 아닐 때 스타일 적용 |
가상요소: 문서 안의 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가함.
불필요한 태그를 만들지 않기 위해 사용한다
| 종류 | 설명 |
| ::first-line | 첫 번째 줄 선택 |
| ::first-letter | (반드시)첫번째 줄에서 첫번쨰 글자 선택. |
| ::before | 특정 요소 앞에 내용이나 스타일 추가 |
| ::after | 특정 요소 뒤에 내용이나 스타일 추가 |
'프론트엔드 > Online Tutorial' 카테고리의 다른 글
| 7.아코디언 메뉴 만들기 (0) | 2021.12.19 |
|---|---|
| 6. 메뉴토글 버튼 만들기(+애니메이션 효과)/ClassList (0) | 2021.12.19 |
| 4. 드롭다운 메뉴 만들기 (0) | 2021.12.19 |
| 3. 이미지에 레터링 커버 효과/ background (0) | 2021.12.19 |
| 2.hover 효과로 자동 스크롤 내리기/transition/transform (0) | 2021.12.19 |
'프론트엔드/Online Tutorial' Related Articles
more
