CSS Text

 

- 텍스트 서식 지정을 위한 속성이다

 

Text Color

 

- 속성 color는 텍스트 색상을 설정하기 위해 사용한다.

- 색상은 다음과 같이 지정된다.

 

색상 이름 : 빨간색

HEX 값 - 예 : "#FF0000"

RGB 값 - 예 : "RGB(255, 0, 0)"

 

<!DOCTYPE html>
<html>
<head>
<style>
body {
  color: blue;
}

h1 {
  color: green;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. 
Notice that this text is blue. 
The default text color for a page is defined in the body selector.</p>
<p>Another paragraph.</p>

</body>
</html>

 

This is heading 1

This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector.

Another paragraph.

 

Text 정렬 

 

- text-align 속성은 텍스트의 가로 정렬을 설정하기 위해 사용한다.

- 텍스트는 왼쪽 또는 오른쪽 정렬, 가운데 정렬 또는 양쪽 정렬이 가능하다.

- 텍스트 방향이 왼쪽에서 오른쪽이면 왼쪽 정렬이 기본값이다.

- 텍스트 방향이 오른쪽에서 왼쪽이면 오른쪽 정렬이 기본값이다.

 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}
</style>
</head>
<body>

<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>

<p>The three headings above are aligned center, left and right.</p>

</body>
</html>

 

Heading 1 (center)

Heading 2 (left)

Heading 3 (right)

The three headings above are aligned center, left and right.

 

justify

 

- text-align 속성을 ""로 설정하면 모든 줄의 너비가 동일하고 왼쪽과 오른쪽 여백이 직선이 되도록 늘어난다.

(예 : 잡지나 신문처럼 정렬)

text-align-last

- 텍스트의 마지막 줄을 정렬하는 방법을 지정한다.

 

unicode-bidi와 direction

- 요소의 텍스트 방향을 변경할 수 있다.

 

vertical-align

- 요소의 수직 정렬을 설정한다.

 

Text Decoration

 

- 텍스트를 장식하는 속성은 다음과 같이 있다.

  • text-decoration-line : 장식선을 추가하는 속성이다.
  • (윗줄, 밑줄 등 두 개 이상의 값을 결합하여 텍스트 위와 아래줄을 표시할 수 있음)
  • text-decoration-color : 장식선의 색상을 설정하는 속성이다.
  • text-decoration-style : 장식선의 스타일을 설정하는 속성이다. (옵션 : solid, double, dotted, dashed, wavy)
  • text-decoration-thickness : 장식선의 굵기를 설정하는 속성이다. 
  • text-decoration : line (필수 옵션), color (선택) , style (선택) , thikness (선택)

 

Text Decoration을 사용하여 링크에 밑줄 없이 스타일을 지정하는 방법

 

a {
  text-decoration: none;
}

 

 

Text-transform

 

- text-transform 속성은 텍스트에 대문자와 소문자를 지정할 때 사용한다.

- 모든 것을 대문자 또는 소문자로 바꾸거나 각 단어의 첫 글자를 대문자로 바꿀 때 사용할 수 있다.

- uppercase : 대문자로 변환한다.

- lowercase : 소문자로 변환한다.

 

Text Spacing(텍스트 간격)

 

  • text-indent : 첫 번째 줄 들여쓰기를 지정하기 위해 사용하는 속성이다.
  • letter-spacing : 텍스트의 문자 사이의 간격을 지정하기 위해 사용하는 속성이다.
  • line-height : 줄 사이의 간격을 지정하기 위해 사용하는 속성이다. 
  • word-spacing : 텍스트의 단어 사이의 공백을 지정하기 위해 사용하는 속성이다.
  • white-space : 요소 내부의 공백을 처리하는 방법의 속성이다.
white-space를 사용하여 텍스트 줄 바꿈을 비활성화하는 예제

<!DOCTYPE html>
<html>
<head>
<style>
p {
  white-space: nowrap;
}
</style>
</head>
<body>

<h1>Using white-space</h1>

<p>
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
This is some text that will not wrap.
</p>

<p>Try to remove the white-space property to see the difference!</p>

</body>
</html>​

Using white-space

This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap. This is some text that will not wrap.

Try to remove the white-space property to see the difference!

 

Text Shadow

 

- text-shadow는 텍스트에 그림자를 추가하는 속성이다.

Text Shadow 예제 1번 - 흰색 텍스트의 텍스트 그림자

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>​

Text-shadow effect!



TextShadow 예제 2번 - 빨간색 네온 빛이 있는 텍스트 그림자

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000;
}
</style>
</head>
<body>
<h1>Text-shadow with red neon glow!</h1>
</body>
</html>​

Text-shadow with red neon glow!


TextShadow 예제 3번 - 빨간색과 파란색 네온 빛이 있는 텍스트 그림자
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body>
</html>​

Text-shadow with red and blue neon glow!



TextShadow 예제 4번

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>​

Text-shadow effect!



 

 

HTML Text 실습 - css_text.html

 

<!DOCTYPE html>
<html>
<head>
<style>

div {
  border: 4px solid gray;
  padding: 4px;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  color: #4CAF50;
}

p {
  text-indent: 30px;
  text-align: justify;
  letter-spacing: 3px;
}

a {
  text-decoration: none;
  color: #008CBA;
}
</style>
</head>
<body>

<div>
  <h1>text formatting</h1>
  <p>This text is styled with some of the text formatting properties. 
  The heading uses the text-align, text-transform, and color properties.
  The paragraph is indented, aligned, and the space between characters is specified. 
  The underline is removed from this colored
  <a target="_blank" href="tryit.asp?filename=trycss_text">"Try it Yourself"</a> link.</p>
</div>

</body>
</html>

 

 

 

저작자표시 비영리 변경금지

'Devlopment > HTML & CSS' 카테고리의 다른 글

[CSS] 표(Tables) 생성 및 속성 실습  (0) 2024.01.07
[CSS] 스타일 링크(Style Links)  (1) 2024.01.07
[CSS] Box Model - 박스 모델(Margin, Border, Padding, Content)  (1) 2024.01.05
[CSS] Backgrounds - 배경색 설정  (0) 2024.01.05
[CSS] CSS란, 외부 CSS와 내부 CSS 적용 방법 및 CSS 실습  (1) 2024.01.04

티스토리툴바