[selector] CSS - ::highlight() 가상선택자 - 사용자 정의 강조 표시의 스타일을 지정 (= highlight선택자 = 하이라이트선택자)

1. ::highlight() 예제 - 사용자 정의 강표 표시 스타일 지정
2. ::highlight() 정의
3. ::highlight() 구문

::highlight() 예제 - 사용자 정의 강표 표시 스타일 지정

 

<style>

#hz {

  font-family: verdana;

  font-size: 30px;

}

::highlight(mycolor-1) {color: red;}

::highlight(mycolor-2) {color: green;}

::highlight(mycolor-3) {color: blue;}

::highlight(mycolor-4) {color: magenta;}

</style>

<p id="hz">홈짱닷컴 Homzzang.com</p>

<script>

const textNode = document.getElementById("hz").firstChild;

if (!CSS.highlights) {

  textNode.textContent = "Highlight API 지원 X";

}

// 각 색상에 대한 하이라이트 생성 후 등록

const highlights = [];

for (let i = 0; i < 4; i++) {

  // 이 색상에 대한 새로운 하이라이트 생성.

  const colorHighlight = new Highlight();

  highlights.push(colorHighlight);

  // 이 하이라이트를 사용자 정의 이름으로 등록.

  CSS.highlights.set(`mycolor-${i + 1}`, colorHighlight);

}

// 텍스트를 문자 하나하나씩 반복.

for (let i = 0; i < textNode.textContent.length; i++) {

  // 이 문자에 대해 새로운 범위 생성.

  const range = new Range();

  range.setStart(textNode, i);

  range.setEnd(textNode, i + 1);

  // 다음 사용 가능한 하이라이트에 범위를 추가,

  // 4번째에 도달하면 첫 번째 루프로 회귀.

  highlights[i % 4].add(range);

}

</script>

 

결과보기

::highlight() 정의

 

사용자 정의 강조 표시의 스타일을 지정하는 데 사용.  (즉, 사용자가 선택한 텍스트에 하이라이트 스타일을 지정할 수 있도록 해줌.)

 

---

1.

• 이 선택자는 CSS Custom Highlight API의 일부로, JavaScript와 CSS를 함께 사용해 특정 텍스트 영역에 스타일을 적용할 수 있게 해줌.
• Range 객체의 컬렉션이며 HighlightRegistry 사용해 웹페이지에 등록함.

2. ::highlight() 선택자에서 사용 가능한 속성 종류

• color 속성 - 글자색
• background-color 속성 - 배경색
• text-decoration 속성 - 텍트트 라인
• text-shadow 속성 - 텍스트 그림자

 

3.

• CSS Custom Highlight API Module Level 1
• IE 제외한 주요 최신 브라우저 모두 지원.

 

::highlight() 구문

 

::highlight(custom-highlight-name) { CSS 선언; }