Reference/CSS

text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다.

by @webs 2022. 11. 29.

text-emphasis-position

text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다. 이 속성은 아시아권 언어(일본어, 한국어, 중국어 등)를 위한 강조 표시이며, 가로 모드일 때에는 left, right 속성으로 컨트롤 할 수 있습니다.

특징	설명
기본값	text-emphasis-position : over right;
적용	text
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다.
text-emphasis-position 요소의 left, right 속성은 글씨가 가로모드일 경우에 작동됩니다.
text-emphasis-position 요소의 두개의 속성은 가로축(Horizontal), 세로축(Vertical)을 의미합니다.
text-emphasis-position 속성은 일본어, 한국어, 중국어를 위한 요소입니다.

비교(Compare)

text-emphasis 속성은 텍스트에 강조 표시를 일괄적으로 설정합니다.
text-emphasis-style 속성은 텍스트에 강조 표시 스타일을 설정합니다.
text-emphasis-color 속성은 텍스트에 강조 표시 색상을 설정합니다.
text-emphasis-position 속성은 텍스트에 강조 표시 위치를 설정합니다.

문법(Syntax)

text-emphasis-position : ( over | under ) && ( right | left )

/* 기본 속성 (가로축 && 세로축) */
text-emphasis-position : over right;      /* 기본값 */
text-emphasis-position : over left;                        
text-emphasis-position : under right;                        
text-emphasis-position : under left;   
text-emphasis-position : right over;   
text-emphasis-position : left over;   
text-emphasis-position : right under;   
text-emphasis-position : left under;   

/* 전역 속성 */
text-emphasis-style : inherit;   /* 상속 */
text-emphasis-style : initial;   /* 초기화 */
text-emphasis-style : revert;    /* 원래대로 돌리기 */
text-emphasis-style : unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
over	text-emphasis-position : over right;	강조 표시의 위치를 윗쪽으로 설정합니다.
under	text-emphasis-position : under right;	강조 표시의 위치를 아래쪽으로 설정합니다.
right	text-emphasis-position : under right;	강조 표시의 위치를 오른쪽으로 설정합니다.(글씨가 가로모드일 경우)
left	text-emphasis-position : under left;	강조 표시의 위치를 왼쪽으로 설정합니다.(글씨가 가로모드일 경우)

예제1(Sample)

text-decoration-position을 설정한 예제입니다.

text-align 속성은 텍스트 정렬 방식을 설정합니다.
text-align-last 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.
text-decoration 속성은 텍스트 라인 속성을 설정합니다.
text-indent 속성은 문단 들여쓰기 속성을 설정합니다.
text-justify 속성은 텍스트의 정렬 유형을 설정합니다.
text-overflow 속성은 텍스트 영역 속성을 설정합니다.

text-emphasis-position : over right; text-emphasis-position : under right; text-emphasis-position : over left; text-emphasis-position : under left;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
.text-box li i {
    text-emphasis-color : #ff4b4b;
    font-style: normal;
}
.text-box li:nth-child(1) i {
    text-emphasis-style : filled
}
.text-box li:nth-child(2) i {
    text-emphasis-style : open
}
.text-box li:nth-child(3) i {
    text-emphasis-style : dot
}
.text-box li:nth-child(4) i {
    text-emphasis-style : circle
}
.text-box li:nth-child(5) i {
    text-emphasis-style : double-circle
}
.text-box li:nth-child(6) i {
    text-emphasis-style : triangle
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample1 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;

        document.querySelectorAll("#sample1 .text-box ul li i").forEach(li => {
            li.setAttribute("style", text);
        })
    })
});

예제2(Sample)

text-decoration-position을 설정한 예제입니다.

text-align
text-align-last
text-decoration
text-indent
text-justify
text-overflow

text-emphasis-position : over right; text-emphasis-position : over left; text-emphasis-position : under right; text-emphasis-position : under left;

HTML

CSS

SCRIPT

<div class="text-box">
    <ul>
        <li><i>text-align</i> 속성은 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-align-last</i> 속성은 문단의 마지막 텍스트 정렬 방식을 설정합니다.</li>
        <li><i>text-decoration</i> 속성은 텍스트 라인 속성을 설정합니다.</li>
        <li><i>text-indent</i> 속성은 문단 들여쓰기 속성을 설정합니다.</li>
        <li><i>text-justify</i> 속성은 텍스트의 정렬 유형을 설정합니다.</li>
        <li><i>text-overflow</i> 속성은 텍스트 영역 속성을 설정합니다.</li>
    </ul>
</div>

.text-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    writing-mode: vertical-rl;
}
.text-box .box {
    width: 32%;
    line-height: 1.4;
}
.text-box li i {
    font-style: normal;
    text-decoration: underline;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

document.querySelectorAll("#sample2 .sampleBtn a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;

        document.querySelectorAll("#sample2 .text-box ul li i").forEach(li => {
            li.setAttribute("style", text);
        })
    })
});