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

[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 매뉴얼 참고.


분류 제목
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…
column CSS - column-span 속성 - 컬럼 병합 여부 지정 (= 컬럼병합 = 컬럼확장 = column-s…
column CSS - column-width 속성 - 컬럼 너비 지정 (= column-width속성 = 컬럼위드스속성…
column CSS - columns 속성 - (컬럼최소너비/컬럼개수) 일괄 지정 (= columns속성 = 컬럼즈속성)
box CSS - box-sizing 속성 ★★ - 너비결정방식 (= 길이결정방식 = box-sizing속성 = 박…
flex CSS - FlexBox (플렉스박스) 소개 ★★★ - 새로운 반응형 레이아웃 모델 ※ (가로/세로) (기본…
flex CSS - flex-direction 속성(C) ★★ - 기본축 방향 결정. (= flex-direction…
10/25
목록
찾아주셔서 감사합니다. Since 2012