• 회원가입
  • 로그인
  • 구글아이디로 로그인

[text] CSS - text-emphasis 속성 - 텍스트 강조마크의 '모먕/색깔' 일괄 지정 (= 텍스트 글자 위에 점찍기 = text-emphasis속성 = 텍스트엠퍼시스속성) ※ 글자 강조표시자 모양과 색깔 지정

목차
  1. text-emphasis 예제 - 글자 강조마크 모양/색깔
  2. text-emphasis 정의
  3. text-emphasis 구문

 

text-emphasis 예제 - 글자 강조마크 모양/색깔 


<style>

div { 

   text-emphasis-style: dot;

   text-emphasis-position: over left;

   -webkit-text-emphasis-style: dot;

   -webkit-text-emphasis-position: over;

}

</style>

 

<div>홈짱닷컴</div>


결과보기

 

text-emphasis 정의

 

텍스트 강조마크의 '모양/색상'을 일괄 지정.

 


 

1.

강조 표시에 적합한 글꼴 :  "Kenten Generic OpenType Font

 

2.

  • 기본값: none currentcolor
  • 상속여부: O
  • 애니가능: (style: 불연속 / color: 가능)
  • CSS버전: CSS3
  • JS구문: object.style.textEmphasis="filled blue";

 

3.

IE 제외한 주요 최신브라우저 지원.

※ 파이어폭스와 사파리 제외한 나머지 브라우저는 일부 지원.

 

4. MDN text-emphasis 예제보기

https://developer.mozilla.org/en-US/docs/Web/CSS/text-emphasis

 

 

text-emphasis 구문

 

selector {text-emphasis: text-emphasis-style text-emphasis-color;}

 


[속성값]

 

text-emphasis-style

텍스트 강조표시자 모양.

 

text-emphasis-color 

텍스트 강조표시자 색상

 

PS. 자세한 사용법은 MDN text-emphasis 매뉴얼 참고.

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
image CSS - Image Modal - (Advanced) - (이미지 모달 띄우기 효과)
button CSS - Button - 버튼스타일 (버튼크기, 버튼색깔, 버튼비활성화, 버튼그룹, 이미지위버튼)
pagination CSS - 페이징 - 기본 스타일 (Simple Pagination)
pagination CSS - 페이징 - 마우스오버 시 색깔 변경 (Active and Hoverable Pagination)
pagination CSS - 페이징 - 트랜지션 효과 (Hoverable Transition Effect)
pagination CSS - 페이징 - 테두리 추가 (Bordered Pagination)
pagination CSS - 페이징 - 둥근테두리 효과 (Rounded bordered pagination)
pagination CSS - 페이징 - 링크칸 간격 띄우기 (Space Between Links)
pagination CSS - 페이징 - 글자 크기 (Pagination Size)
pagination CSS - 페이징 - 가운데 정렬 (Centered Pagination)
pagination CSS - 페이징 - (이전페이지/다음페이지/지정페이지) 이동 링크 버튼
pagination CSS - 페이징 - 빵메뉴 (= Breadcrumbs : 브레드크럼즈 = 메뉴 현재위치 표시)
column CSS - Multiple Columns - (멀티 컬럼 개괄) ※ 열 나누기 = 단락 나누기
column CSS - column-count 속성 - 컬럼 개수 지정 (= 요소 안 텍스트를 지정 컬럼개수로 구분 = …
column CSS - column-fill 속성 - 컬럼 채우기 방식 지정 (= column-fill속성 = 컬럼필속성…
column CSS - column-gap 속성 - 컬럼간의 간격 지정 (= column-gap속성 = 컬럼갭속성)
column CSS - column-rule 속성 - 컬럼구분자 스타일 일괄지정 (= 컬럼구분바 단축속성 = column…
column CSS - column-rule-color 속성 - 컬럼구분자 색상 지정 (= 컬럼구분바 색깔 = colum…
column CSS - column-rule-style 속성 - 컬럼구분자 모양 지정 (= 컬럼구분바 생김새 = colu…
column CSS - column-rule-width 속성 - 컬럼구분자 너비 지정 (= 컬럼구분바 두께 = colum…
10/25
목록
찾아주셔서 감사합니다. Since 2012