[selector] CSS - ::marker 가상선택자 - 리스트 마커 선택 의사요소선택자 (= ::marker선택자 = 마커선택자)

1. ::marker 예제 - 리스트 마커 표시 가능 요소 스타일 지정
2. ::marker 정의
3. ::marker 구문

::marker 예제 - 리스트 마커 표시 가능 요소 스타일 지정

 

<style>

::marker {font-size: 22px; color: red; }

</style>

<ul>

  <li>HTML</li>

  <li>CSS</li>

  <li>JavaScript</li>

</ul>

<ol>

  <li>PHP</li>

  <li>SQL</li>

  <li>Python</li>

</ol>

결과보기

::marker 정의

 

리스트 마커 항목 지정 의사요소선택자.

 

---

 

1. display: list-item 설정된 모든 요소에서 작동.
2. 이 선택자가 사용 가능한 속성: 모든 font 속성, 모든 animation 속성, 모든 transition 속성, color, white-space, content, text-combile-upright, unicode-bidi, direction
3. CSS 이용한 마커 모양 모양은 content 속성 이용.
4. CSS3
5. 주요 최신브라우저 모두 지원.

 

---

PS. 함게 사용 가능 여부

• color (O)
• font-size (O)
• font-family (O)
• font-weight (O)
• content (O)
• background (X)
• width (X)
• height (X)
• margin (X)
• padding (X)
• border (X)

 

---

PS. 그외 CSS 의사요소

 

• ::before - 요소 시작 부분
• ::after - 요소 끝 부분
• ::first-letter - 첫 글자
• ::first-line - 첫 줄
• ::selection- 드래그 선택 영역
• ::marker - 리스트 마커

 

::marker 구문

 

::marker {  css 선언; }

 

PS. list::marker { .... } 가능.