[Css] 글자 속성 - 스타일, 간격, 공백

CSS 텍스트(Text) 속성

color 속성

• color 속성은 텍스트의 색상을 설정하는데, 원래 텍스트 기본 색상은 검정색이다.

body { color: red; }
p { color: maroon; }

direction 속성

• direction 속성은 텍스트가 써지는 방향을 설정하는데, 기본적으로 왼쪽에서 오른쪽 방향으로 써진다.
• 아랍어와 같이 텍스트를 반대 방향으로 쓰는 언어를 나타낼 때는 텍스트가 써지는 방향을 direction 속성을 사용하여 변경해줘야 한다.

.leftToRight { direction: ltr; }     /* 왼쪽에서 오른쪽 (기본값) */
.rightToLeft { direction: rtl; }     /* 오른쪽에서 왼쪽 */

unicode-bidi 속성

• direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정한다.

.bible-quote {
  direction: rtl;
  unicode-bidi: embed;
}

letter-spacing 속성

• letter-spacing 속성은 텍스트 내에서 글자 사이의 간격을 설정한다.

.decLetterSpacing { letter-spacing: -3px; }
.incLetterSpacing { letter-spacing: 10px; }

word-spacing 속성

• letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정한다.

.decWordSpacing { word-spacing: -3px; }
.incWordSpacing { word-spacing: 10px; }

line-height 속성

• line-height 속성은 텍스트의 줄 간격을 설정한다.

.narrowLineHeight { line-height: 70%; }
.wideLineHeight { line-height: 1.8; }

text-indent 속성

• text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정하며, 웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않다.

.paraIndent { text-indent: 30px; }

text-align 속성

• text-align 속성은 텍스트의 수평 방향 정렬을 설정합니다.

h2 { text-align: left; }
h3 { text-align: right; }
h4 { text-align: center; }

vertical-align 속성

• vertical-align 속성은 HTML 요소 내의 수직 방향 정렬을 설정한다.

img.top { vertical-align: text-top; }
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; }

text-decoration 속성

• text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용하며, 속성값이 none이면 링크가 설정된 텍스트의 밑줄을 제거할 수 있다.

h2 { text-decoration: overline; }           /* 위에 선 */
h3 { text-decoration: line-through; }       /* 중앙 선 */
h4 { text-decoration: underline; }          /* 밑줄 */
a { text-decoration: none; }

text-transform 속성

• text-transform 속성은 텍스트에 포함된 영문자의 대소문자를 설정한다.

h2 { text-transform: uppercase; }
h3 { text-transform: lowercase; }
h4 { text-transform: capitalize; }   /* 첫 문자만 대문자 */

text-shadow 속성

• 그림자가 시작할 x축과 y축의 상대 위치를 명시하고, 그림자의 흐린 정도를 나타내는 blur 값을 명시한다.

text-shadow: 그림자가로축 그림자세로축 흐림정도 그림자색;

#shadow_01 { text-shadow: 2px 2px; }
#shadow_02 { text-shadow: 2px 2px orange; }
#shadow_03 { text-shadow: 2px 2px 5px; }
#shadow_04 { text-shadow: 0 0 3px red; }
#shadow_05 { text-shadow: 1px 1px 2px black, 0 0 20px purple, 0 0 5px maroon; }

text-overflow 속성

• text-overflow 속성은 콘텐츠 영역을 벗어난 텍스트를 어떻게 표현할지 설정한다.
• 속성값 clip은 기본값으로 영역을 벗어난 텍스트를 표시하지 않고, ellipsis는 영역을 벗어난 텍스트를 잘라내어 보이지 않게 하고 말줄임표 … 로 표시한다.
• block 요소로 width 속성이 지정되어 있고, white-space 프로퍼티를 nowrap이며, overflow 속성은 반드시 visible 이외의 값이 지정되어 있어야 한다.

.truncate {
    width: 150px;             /* width가 지정되어 있어야 한다 */
    white-space: nowrap;      /* 자동 줄바꿈을 방지 */
    overflow: hidden;         /* visible 이외의 값 지정 */
    text-overflow: ellipsis;  /* ellipsis or clip */
}

word-wrap 속성

• word-wrap 속성은 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한하며, 영문자로 구성된 단어에만 적용된다.

.word-wrap { word-wrap: break-word; }

word-break 속성

• word-break 속성은 길이가 긴 단어를 나누어 표현해야 할 때 단어가 나뉘는 기준을 설정하는데, 단어를 문자나 하이픈 - 기준으로 나눌 수 있다.
• word-wrap 속성은 . 나 - 등의 단어를 고려하여 개행하지만 word-break: break-all; 의 경우 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.
• word-break 속성은 영문자로 구성된 단어에만 적용되며, 한글은 자동으로 속성값이 break-all로 적용된다.

.word-wrap  { word-wrap: break-word; }
.word-break { word-break: break-all; }
.word-break { word-break: keep-all; }

white-space 속성

• Html은 기본적으로 연속된 공백, 들여쓰기는 1번만 실행되며 줄바꿈은 무시되는데 white-space 속성은 이러한 기본 동작을 제어한다.

.normal { white-space: normal; }     /* 줄바꿈X,자동줄바꿈O,띄어쓰기와탭1번 
.nowrap { white-space: nowrap; }     /* 줄바꿈X,자동줄바꿈X,띄어쓰기와탭1번
.pre    { white-space: pre; }        /* 줄바꿈O,자동줄바꿈X,띄어쓰기와탭X
.pre-wrap { white-space: pre-wrap; } /* 줄바꿈O,자동줄바꿈O,띄어쓰기와탭X
.pre-line { white-space: pre-line; } /* 줄바꿈O,자동줄바꿈O,띄어쓰기와탭1번

text-emphasis 속성

• text-emphasis 속성은 사용자가 강조 표현을 설정할 수 있도록 한다.

h2 { text-emphasis: triangle #d55; }
em {
  text-emphasis-color: green;
  text-emphasis-style: "*";
}

text-align-last 속성

• text-align-last 속성은 텍스트의 마지막 줄의 정렬 방법을 설정한다.

p {
  font-size: 1.4em;
  text-align: justify;
  text-align-last: center;
}

text-justify 속성

• text-justify 속성은 텍스트의 정렬이 양끝 맞춤으로 되어 있을 때 그 정렬 방법을 설정한다.

p {
  font-size: 1.5em;
  border: 1px solid black;
  padding: 10px;
  width: 95%;
  margin: 10px auto;
  text-align: justify;
}

.word {
  text-justify: inter-word;
}

 

Reference

• http://www.tcpschool.com/
• https://poiemaweb.com/