====== CSS Text ======
<WRAP left notice 80%>
  * description : CSS text color, alignment, decoration,transformation, spacing, shadow
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-08
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_text.asp|CSS text]]
  * [[https://www.w3schools.com/css/css_text_align.asp|CSS Text Alignment]]
  * [[https://www.w3schools.com/css/css_text_decoration.asp|CSS Text Decoration]]
  * [[https://www.w3schools.com/css/css_text_transformation.asp|CSS Text Transformation]]
  * [[https://www.w3schools.com/css/css_text_spacing.asp|CSS Text Spacing]]
  * [[https://www.w3schools.com/css/css_text_shadow.asp|CSS Text Shadow]]
\\
\\
======CSS Text Color======
CSS에는 텍스트 서식을 만드는 많은 속성들이 있습니다.\\
''color''속성은 텍스트의 컬러를 설정하기 위해 사용합니다. 컬러는 하기와 같이 지정됩니다.\\
  * 컬러 이름 - "red"와 같은 컬러 이름을 지정합니다.
  * HEX - "ff0000"과 같은 HEX 값을 지정합니다.
  * RGB - "rgb(255, 0, 0)"과 같이 RGB 값을 지정합니다.
\\
웹 페이지의 기본 텍스트 컬러는 body 선택자로 정의합니다.\\
\\
====예제====
<code css>
body {
  color: blue;
}

h1 {
  color: green;
}
</code>
\\
**Note:**\\
W3C를 준수하는 CSS의 경우, ''color''속성을 정의할 경우, ''background-color''도 정의해야 합니다.\\
\\
\\
======Text Color and Background Color======
하기의 예제에서 ''background-color''와 ''color''속성을 정의합니다.\\
<code css>
body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}
</code>
\\
\\
======CSS Text Alignment (텍스트 정렬)======
''text-alignment'' 속성은 텍스트의 가로 정렬을 설정하기 위해 사용합니다.\\
\\
텍스트는 우측 또는 좌측 정렬, 중앙 정렬 또는 양쪽 맞춤을 할 수 있습니다.\\
\\
하기의 예제에서 중앙 정렬, 좌측/우측 정렬된 텍스트를 확인할 수 있습니다.\\
(텍스트 방향이 왼쪽에서 오른쪽일 때에서는 왼쪽 정렬이 기본이고, 텍스트 방향이 오른쪽에서 왼쪽일 경우 우측 정렬이 기본입니다.)\\
\\
====예제====
<code css>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</code>
\\
''text-align''속성이 "justify(양쪽 맞춤)"으로 설정된 경우, 각각의 줄이 늘어나 모든 줄의 너비가 동일하고, 좌측 및 우측 여백(margins)은 직선이 됩니다.(잡지 및 신문에서와 같이)\\
====예제====
<code css>
div {
  text-align: justify;
}
</code>
\\
\\
======Text Direction=====
''direction''과 ''unicode-bidi'' 속성은 한 요소의 텍스트 방향을 변경하기 위해 사용할 수 있습니다.\\
====예제====
<code css>
P {
  direction: rtl;   /* rtl: right to left */
  unicode-bidi: bidi-override;
}
</code>
\\
\\
======Vertical Alignment======
''vertical-align''속성은 한 요소의 수직 정렬을 설정합니다.\\
\\
하기 예제에서 텍스트 안에 있는 하나의 이미지의 수직 정렬을 설정하는 방법을 확인할 수 있습니다.\\
====예제====
<code css>
img.top {
  vertical-align: top;
}

img.middle {
  vertical-align: middle;
}

img.bottom {
  vertical-align: bottom;
}
</code>
\\
\\
======CSS Text Decoration======
''text-decoration''속성은 텍스트에서 데코레이션 (decoration)을 설정 또는 삭제하기 위해 사용합니다.\\
\\
''text-decoration: none;''속성은 링크의 언더라인을 삭제하기 위해 사용되곤 합니다.\\
====예제====
<code css>
a {
  text-decoration: none;
}
</code>
\\
다른 ''text-decoration'' 값들은 텍스트를 장식하기 위해 사용합니다.\\
====예제====
<code css>
h1 {
  text-decoration: overflow;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</code>
\\
**Note:**\\
혼란을 줄 수 있기 때문에, 링크가 아닌 텍스트에 밑줄을 긋는 것을 권장하지 않습니다.\\
\\
\\
======Text Transformation======
''text-transform''속성은 텍스트에서 대문자 및 소문자를 설정하기 위해 사용합니다.\\
\\
모든 철자를 대문자나 소문자로 변경하거나, 각 단어의 첫 글자를 대문자로 변경하기 위해 사용할 수 있습니다.\\
\\
====예제====
<code css>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</code>
\\
\\
======CSS Text Spacing======
=====Text Indentation (텍스트 들여쓰기)=====
''text-indent''속성은 텍스트의 첫 번째 줄의 들여쓰기를 지정하기 위해 사용합니다.\\
====예제====
<code css>
p {
  text-indent: 50px;
}
</code>
\\
=====Letter Spacing (철자 간격, 자간 (字間)=====
''letter-spacing''속성은 텍스트에서 철자 사이의 공간을 설정하기 위해 사용합니다.\\
\\
하기의 예제는 철자 사이의 공간을 늘이고 줄이는 방법을 보여줍니다.\\
\\
====예제====
<code css>
h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}
</code>
\\
\\
=====Line Height (행 높이)=====
''line-height''속성은 행간을 설정하기 위해 사용합니다.\\
====예제====
<code css>
p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}
</code>
\\
\\
=====Word Spacing=====
''word-spacing'' 속성은 텍스트에서 단어들 사이의 공간을 설정하기 위해 사용합니다.\\
\\
하기의 예제는 단어들 사이의 공간을 늘이거나 줄이는 방법을 보여줍니다.\\
====예제====
<code css>
h1 {
  word-spacing: 10px;
}

h2 {
  word-spacing: -5px;
}
</code>
\\
\\
=====White Space=====
''white-space''속성은 한 요소 내부에서 화아트 스페이스가 처리되는 방법을 설정합니다.\\
\\
하기 예제에서 한 요소 내부에서 텍스트 랩핑(text wrapping)을 불가능하게 하는 방법을 확인합니다.\\
====예제====
<code css>
p {
  white-space: nowrap;   /* 여러 개의 공백을 하나로 표시하고 영역 너비를 넘어가는 내용은 줄을 바꾸지 않고 계속 한 줄로 표시합니다.*/
}
</code>
\\
\\
=====CSS Text Shadow=====
''text-shadow'' 속성은 쉐도우를 텍스트에 추가합니다.\\
\\
가장 단순하게 사용하기 위해서 수평 그림자(2px) 그리고 수직 그림자(2px)를 지정합니다.\\
====예제====
<code css>
h1 {
  text-shadow: 2px 2px;
}
</code>
\\
그리고 나서, 그림자에 컬러 (red)를 추가합니다.\\
====예제====
<code css> 
h1 {
  text-shadow: 2px 2px red;
}
</code>
이후, 그림자에 블러 효과 (5px)(blur effect, 흐리게 하기)를 추가합니다.\\
====예제====
<code css>
h1 {
  text-shadow: 2px 2px 5px red;
}
</code>
\\
\\
=====All CSS Text Properties=====
^ Property         ^ Description                                    ^
| color            | 텍스트의 컬러를 설정합니다.                                |
| direction        | 텍스트 방향/글쓰기 방향을 설정합니다.                          |
| letter-spacing   | 텍스트에서 철자 사이의 간격을 증가 또는 감소시킵니다.                 |
| line-height      | 행 높이를 설정합니다.                                   |
| text-align       | 텍스트의 가로 정렬을 설정합니다.                             |
| text-decoration  | 텍스트에 추가된 데코레이션(decoration)을 설정합니다.             |
| text-indent      | 텍스트 블럭 내에서 첫 번째 줄의 들여쓰기를 설정합니다.                |
| text-shadow      | 텍스트에 추가된 그림자 효과를 설정합니다.                        |
| text-transform   | 텍스트의 대문자를 조절합니다.                               |
| text-overflow    | 화면에서 표시되지 않고 흘러넘치는 콘텐츠가 사용자에게 표시되는 방법을 설정합니다.  |
| unicode-bidi     | direction속성과 함께 사용되어 동일한 문서 내애서 여러 언어를 지원하도록 텍스트가 우선시 되어야 하는지를 설정하거나 반환합니다.\\  |                                             
| vertical-align   | 한 요소의 수직 정렬을 설정합니다.                            |
| white-space      | 한 요소 내부의 화이트 스페이스가 처리되는 방법을 설정합니다.             |
| word-spacing     | 텍스트 내부의 단어들 사이의 공간을 증가 또는 감소시킵니다.              |









{{tag>오션, CSS text color, alignment, decoration,transformation, spacing, shadow }}