[CSS] 텍스트(text)

텍스트(text)

---

CSS에서 사용할 수 있는 대표적인 text 속성은 다음과 같습니다.

1. color

2. text-align

3. text-decoration

4. text-transform

 

text-align 속성

<style>
  h2 {
    text-align: left;
  }
  h3 {
    text-align: right;
  }
  h4 {
    text-align: center;
  }
</style>

 

text-decoration 속성

 

text-decoration 속성값을 none으로 설정하여 링크(link)가 설정된 텍스트의 밑줄을 제거하는데 자주 사용합니다.

이외 속성
text-decoration-style
text-decoration-line
text-decoration-color
text-decoration-thickness

ex)
text-decoration-style: dotted;
text-decoration-line: underline overline;
text-decoration-color: red;
text-decoration-thickness: 10px;

<style>
  h2 {
    text-decoration: overline;
  }

  h3 {
    text-decoration: line-through;
  }

  h4 {
    text-decoration: underline;
  }

  a {
    text-decoration: none;
  }
</style>

 

여러 속성을 적용하고 싶은 경우

<style>
  h2 {
    text-decoration: dotted underline overline green 10px;
  }
</style>

 

text-transform 속성

text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정합니다.

이 속성은 텍스트에 포함된 모든 영문자를 대문자나 소문자로 변경시켜 줍니다.

또한, 단어의 첫 문자만을 대문자로 변경시킬 수도 있습니다.

 

<style>
  h2 {
    text-transform: uppercase;
  }

  h3 {
    text-transform: lowercase;
  }

  h4 {
    text-transform: capitalize;
  }
</style>

 

text-transform을 통하여 영문자를 입력받은 경우에는 보이는 것만 변환하여 주는것으로 실제로 데이터를 읽어 들일때는 사용자가 입력한 대,소문자 그대로 전송이 일어난다. 그래서 데이터를 읽어을때 자바스크립트 코드를 통해 문자를 대문자나 소문자로 통일시켜 데이터를 전송 시킨다.

<script>
  let a = "food";
  a.toUpperCase()
</script>

 

참고자료

http://www.tcpschool.com/css/css_basic_text