기본
CSS - 텍스트 스타일
jddng
2022. 2. 14. 22:50
728x90
반응형
텍스트 스타일
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>
<span id="ts2" class="shadow">HTML5</span>
<span id="ts3" class="shadow">HTML5</span>
<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;
}
728x90
반응형