차이

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

--- wiki:css:css_note:css_text [2021/03/08 14:19]
emblim98
+++ wiki:css:css_note:css_text [2023/01/13 18:44] (현재)
@@ 줄 7: / 줄 7: @@
 </WRAP>
 <WRAP clear></WRAP>
+\\
 \\
 =====Source of the article====
@@ 줄 177: / 줄 178: @@
 <code css>
 p {
-  text-decoration: 50px;
+  text-indent: 50px;
 }
 </code>
@@ 줄 244: / 줄 245: @@
 \\
 가장 단순하게 사용하기 위해서 수평 그림자(2px) 그리고 수직 그림자(2px)를 지정합니다.\\
-====예제====
-<code>
-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속성과 함께 사용디어 동잃한 문서내애ㅔ서 여러 언어를 지원하도록 텍스트
-====== 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-decoration: 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>
 h1 {
   text-shadow: 2px 2px;

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

사용자 도구

사이트 도구

차이

문서 도구