CSS Text

실무 샘플

text-overflow를 이용한 말줄임

text-overflow속성은 표시되지 않은 오버플로 된 콘텐츠를 사용자에게 알리는 방법을 지정합니다. 잘 리거나 줄임표 (...)를 표시하거나 사용자 지정 문자열을 표시 할 수 있습니다.

    .text {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 13px;
      line-height: 24px;
      color: #222;
    }

 

text formatting

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 "Try it Yourself" link.

 

text-color

color속성은 텍스트 색상을 설정하는 데 사용됩니다.

• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

body {
  color: blue;
}

h1 {
  color: green;
}

 

text-align

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

텍스트는 왼쪽 또는 오른쪽 정렬, 가운데 정렬 또는 정렬 할 수 있습니다.

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

text-align속성이 "정의"로 설정 되면 모든 줄의 너비가 같고 잡지 및 신문과 같이 왼쪽과 오른쪽 여백이 똑 바르도록 각 줄이 늘어납니다.

div {
  text-align: justify;
}

 

text-decoration

text-decoration속성은 텍스트에서 장식을 설정하거나 제거하는 데 사용됩니다.

text-decoration: none;은 종종 링크에서 밑줄을 제거하는 데 사용됩니다.

a {
  text-decoration: none;
}

 

text-transform

text-transform속성은 텍스트에서 대문자와 소문자를 지정하는 데 사용됩니다.

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

p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}

 

text-indent

text-indent속성은 텍스트의 첫 줄 들여 쓰기를 지정하는 데 사용됩니다.

text-indent를 -9999px로 설정하면 화면에서 폰트가 사라집니다.

p {
  text-indent: 50px;
}

p {
  text-indent: -9999px;
}

 

letter-spacing

letter-spacing속성은 텍스트에서 문자 사이의 간격을 지정하는 데 사용됩니다.

h1 {
  letter-spacing: 3px;
}

h2 {
  letter-spacing: -3px;
}

 

line-height

line-height속성은 줄 사이의 간격을 지정하는 데 사용됩니다.

p.small {
  line-height: 0.8;
}

p.big {
  line-height: 1.8;
}