차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

--- wiki:css:css_note:css_text [2021/03/08 11:39]
emblim98 만듦
+++ wiki:css:css_note:css_text [2023/01/13 18:44] (현재)
@@ 줄 7: / 줄 7: @@
 </WRAP>
 <WRAP clear></WRAP>
+\\
 \\
 =====Source of the article====
@@ 줄 59: / 줄 60: @@
 ''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     | 텍스트 내부의 단어들 사이의 공간을 증가 또는 감소시킵니다.              |

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

차이

문서 도구