CSS - 텍스트 스타일

 

 

텍스트 스타일

• color
• text-decoration
• text-transform
• text-shadow
• white-space, letter-spacing, word-spacing

 

 

 

 

 

color

 

• 선택자 { color : 색상명영문이름 | 16진수숫자 | rgb값 | rgba값 | hsl값 | hsla값; }
• 텍스트의 색상을 지정할 수 있다.

 

<li id="c-name">색상명으로 지정</li>
<li id="c-16">16진수 값으로 지정</li>
<li id="c-rgb">rgb로 지정</li>
<li id="c-rgba">rgba로 지정</li>
<li id="c-hsl">hsl로 지정</li>
<li id="c-hsla">hsla로 지정</li>

---

 

text-decoration

 

• 선택자 {text-decoration : none | underline | overline | line-through; }
• 텍스트에 줄을 긋거나 줄을 없앨 때 사용한다.

 

<li><a href="#" id="td1">하이퍼링크 밑줄 없애기</a></li>
<li id="td2">텍스트영역 아래 줄 긋기</li>
<li id="td3">텍스트영역 중간에 줄 긋기</li>
<li id="td4">텍스트영역 위에 줄 긋기</li>

---

 

text-transform

 

• 선택자 { text-transform : none | capitalize | uppercase | lowercase; }
• 영문 텍스트의 대소문자 변환 시 사용한다.

 

<li id="tt1">none</li>
<li id="tt2">capitalize : 영문자의 첫 글자만 대문자로</li>
<li id="tt3">uppercase : 모든 영문자를 대문자로</li>
<li id="tt4">lowercase : 모든 영문자를 소문자로</li>

---

 

text-shadow

 

• 선택자 { text-shadow : none | 가로거리 세로거리 번짐정도 색상; }
• 텍스트에 그림자 효과를 줄 때 사용한다.

 

<div id="bg">
    <span id="ts1" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="ts2" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="ts3" class="shadow">HTML5</span>&nbsp;&nbsp;&nbsp;&nbsp;
    <span id="ts4" class="shadow">HTML5</span>
</div>

/* text-shadow 속성 */
/* 배경 설정 */
#bg {
    background: black;
    margin : 30px;
    padding : 50px;
}
/* 공통 속성으로 사이즈와 두께를 지정 */
.shadow {
    font-size : 100px;
    line-height: 30px;
    font-weight: 900;
}

/* 그림자 효과 (가로, 세로, 번짐, 색상) */
#ts1 {
    color : orangered;
    text-shadow: 5px 5px orange;
}
#ts2 {
    color : white;
    text-shadow: 0px 1px 20px #fff;
}
#ts3 {
    color : white;
    text-shadow: 1px 1px 20px #6f0;
}
#ts4 {
    color : black;
    text-shadow: 0px 0px 4px #ccc,
    0px -5px 4px #ff3,
    2px -10px 6px #fd3,
    -2px -15px 11px #f80,
    2px -19px 18px #f20;
}

---

 

white-space, letter-spacing, word-spacing

 

• white-space : 텍스트의 공백을 처리할 때 사용한다.
• letter-spacing : 낱개 글자의 간격을 조정할 때 사용한다.
• word-spacing : 단어와 단어 사이 간격을 조정할 때 사용한다.

 

<p id="space1">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
               명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space2">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
               명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space3">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
               명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space4">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
               명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>
<p id="space5">모든 국민은 고문을 받지 아니하며, 형사상 자기에게 불리한 진술을 강요당하지 아니한다. 공개하지 아니한 회의내용의 공표에 관하여는 법률이 정하는 바에 의한다.
               명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다. 국가는 농수산물의 수급균형과 유통구조의 개선에 노력하여 가격안정을 도모함으로써 농·어민의 이익을 보호한다.<p>

/* white-space 속성 */
/* letter-spacing 속성 */
/* word-spacing 속성 */
#space1 {
    /* 여러 개의 공백을 하나로 표시 */
    white-space: normal;
    /* 낱개 글자의 간격 조정 */
    letter-spacing: 5px;
}

#space2 {
    /* 여러 개의 공백 하나로 표시, 줄 바꾸지 않고 한 줄 표시 */
    white-space: nowrap;
    /* 단어 사이의 간격 조정 */
    word-spacing: 10px;
}

#space3 {
    /* 여러 개의 공백을 그대로 표시 */
    white-space: pre;
}

#space4 {
    /* 여러 개의 공백을 하나로 표시,
    영역 넘어가면 자동 줄바꿈 */
    white-space: pre-line;
}

#space5 {
    /* 여러 개의 공백을 그대로 표시,
    영역 넘어가면 자동 줄바꿈 */
    white-space: pre-wrap;
}