trash can icon

휴지통

문서 document icon image

CSS에는 텍스트 서식 지정을 위한 많은 속성이 있습니다.

출처 https://www.w3schools.com/css/css_text.asp

텍스트   색상


이 color속성은 텍스트의 색상을 설정하는 데 사용됩니다. 색상은 크게 다음과 같이 지정됩니다.
  • 색상 이름 - "red"와 같은
  • HEX 값 - "#ff0000"와 같은
  • RGB 값 - "rgb(255,0,0)"와 같은
가능한 색상 값의 전체 목록은 CSS 색상 값을 참조하세요.

페이지의 기본 텍스트 색상은 body selector에서 정의됩니다.

Example

body {
 color: blue;
}


h1 {
 color: green;
}

배경 색상


이 background-color속성은 배경 색상을 설정하는 데 사용됩니다.

Example

body {
 background-color: lightgrey;
}


h1 {
 background-color: black;
}


div {
 background-color: white;
}

텍스트 정렬 및 텍스트 방향


다음 속성에 대해 알아봅니다.
  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

텍스트 정렬


이 text-align속성은 텍스트 가로 정렬을 설정하는 데 사용됩니다.

텍스트는 왼쪽 또는 오른쪽, 가운데 정렬 또는 양쪽 맞춤이 가능합니다.

다음 예는 텍스트 중앙 정렬 및 왼쪽 및 오른쪽 정렬을 보여줍니다(텍스트 방향이 왼쪽에서 오른쪽인 경우 왼쪽 정렬이 기본값,
텍스트 방향이 그와 정반대일 경우 오른쪽 정렬이 기본값).

Example

h1 {
 text-align: center;
}


h2 {
 text-align: left;
}


h3 {
 text-align: right;
}

속성이 "justify"로 설정 되면 text-align각 줄이 늘어나서 모든 줄이 같은 너비를 가지며 왼쪽 및 오른쪽 여백이 직선이 됩니다.

Example

div {
 text-align: justify;
}

텍스트 정렬 마지막


속성 text-align-last은 텍스트의 마지막 줄을 정렬하는 방법을 지정합니다.

Example

세 개의 <p> 요소에서 텍스트의 마지막 줄을 정렬합니다.

p.a {
 text-align-last: center;
}


p.b {
 text-align-last: left;
}


p.c {
 text-align-last: right;
}

텍 스 트   방 향
direction및 속성 unicode-bidi을 사용하여 요소의 텍스트 방향을 변경할 수 있습니다.

Example

p {
 direction: rtl;
 unicode-bidi: bidi-override;
}

수직 정렬


이 vertical-align속성은 요소의 수직 정렬을 설정합니다.

Example

텍스트에서 이미지의 수직 정렬을 설정합니다.

img.a {
 vertical-align: baseline;
}


img.b {
 vertical-align: text-top;
}


img.c {
 vertical-align: text-bottom;
}


img.d {
 vertical-align: sub;
}


img.e {
 vertical-align: super;
}

그 외


텍스트 서식 지정을 위한 많은 속성들을 참고합니다.


텍스트 장식 : https://www.w3schools.com/css/css_text_decoration.asp
텍스트 변환 : https://www.w3schools.com/css/css_text_transformation.asp
텍스트 간격 : https://www.w3schools.com/css/css_text_spacing.asp
텍스트 그림자 : https://www.w3schools.com/css/css_text_shadow.asp
텍스트 색상 이름 : http://davidbau.com/colors/