[CSS속성] 텍스트를 강조하는 방법

 

텍스트를 강조하기 위해서 다음과 같은 방법이 있을것이다.

1. 텍스트의 두께를 상대적으로 무겁게 하여 강조

font-weight: bold;   

2. 텍스트의 색상으로 강조

color: red;

3. 텍스트의 배경에 색상을 주어 강조

background-color: #fdd000;

4. 텍스트에 언더라인을 주어 강조

text-decoration: underline;
text-decoration: underline dotted blue;
(underline 속성에 대한 학습은 여기(MDN)를 참고)

 

텍스트에 단순히 text-decoration: underline으로 선을 넣으면 되지만, 구조적으로 적용이 안되는 상황에는 가상클래스와 같은 방법으로 선을 넣어야 할 것이다. 이처럼 불가피한 상황이거나 또는 밑줄에 스타일을 주고 싶은 경우에는 다음과 같은 예시 방법을 통해 텍스트를 강조해보자.

 

5. 텍스트에 스타일이 있는 언더라인을 주어 강조

// 기본 텍스트 스타일
.text_contents {                
        margin: 3em 8em;
        font-size: 2rem;
        font-weight: 100;
        line-height: 3em;
        text-align: left;
        letter-spacing: -1.8px;
        /* position:relative; */
}  

// 밑줄 적용할 텍스트 스타일
    .text_under {
        position: relative; 
    }

    .text_under::after {

        content: ""; 

        width: 100%; 

        height: 10px; 

        background: #99fee7; 

        position: absolute; 

        display: inline-block; 

        left: 0;  
        bottom: 1px;  

        z-index: -1;

    }

① 선을 넣을 텍스트 클래스 또는 (상황에 따라) 상위 클래스에 position: relative; 적용한다.
② 선을 넣을 텍스트 클래스에 가상클래스(::after)를 만든다.
③ 가상 클래스에 원하는 선을 그리고, z-index는 -1 하여 글자 밑으로 배치한다.

 

→ 가상클래스 after앞의 쌍점이 하나 또는 두개 있는 것은 버전차이로 보면 된다. ( :after는 CSS2 / ::after는 CSS3버전 )

 

 

 

전체 코드 확인 :

 

 

위 코드의 결과 출력 :

---

---