텍스트 스타일링

html & css/개념
텍스트 스타일링

Doo Hee 2023. 7. 4. 22:52
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .text-center {
        text-align: center;
      }

      .text-right {
        text-align: right;
      }

      .text-blue {
        color: blue;
      }

      /* 밑줄 */
      .underline {
        text-decoration: underline;
      }

      /* 윗줄 */
      .overline {
        text-decoration: overline;
      }

      /* 취소선 */
      .delline {
        text-decoration: line-through;
      }

      /* 장식선 업음 */
      .text-none {
        text-decoration: none;
      }

      /* text-decoration */
      /* 4가지 하위 프로퍼티 */
      /* text-decoration-style : 장식선 스타일(점선, 직선 등) */
      /* text-decoration-line : 장식 종류(밑줄, 윗줄, 가운데줄 등) */
      /* text-decoration-color : 장식선 색상 */
      /* text-decoration-thickness : 장식선 두께  */

      .underoverline {
        text-decoration: dashed underline overline pink 5px;
        /* text-decoration-style: dashed;
        text-decoration-line: overline underline;
        text-decoration-color: pink;
        text-decoration-thickness: 5px; */
      }

      /* 모든 알파벳 문자를 대문자로 변환 */
      .uppercase {
        text-transform: uppercase;
      }

      /* 모든 알파벳 문자를 소문자로 변환 */
      .text-lowercase {
        text-transform: lowercase;
      }

      /* 영어 문장에서 각 단어의 첫무자만 대문자로 변환 */
      .capitalize {
        text-transform: capitalize;
      }
    </style>
  </head>
  <body>
    <!-- 기본적인 텍스트 관련 스타일링 -->
    <!-- CSS 파일을 만들지 않은 사람도 알 수 있게끔 클래스명을 정해야한다. -->
    <h1 class="text-center">가운데 정렬</h1>
    <h1 class="text-right">오른쪽 정렬</h1>

    <!-- 텍스트 색상 -->
    <h1 class="text-blue">파란색</h1>

    <!-- 텍스트 장식선 -->
    <p class="underline">밑줄을 가진 글씨입니다.</p>
    <p class="overline">윗줄을 가진 글씨입니다.</p>
    <p class="delline">취소선을 가진 글씨입니다.</p>
    <p class="text-none">
      <a href=""></a> a 태그의 기본 값인 밑줄을 없앤 글씨입니다.
    </p>
    <p class="underoverline">윗줄과 밑줄 글씨입니다.</p>

    <!-- 텍스트 변환 -->
    <p class="uppercase">
      only the first letter of a word is converted to uppercase
    </p>
    <p class="text-lowercase">
      only the first letter of a word is converted to uppercase
    </p>
    <p class="capitalize">
      only the first letter of a word is converted to uppercase
    </p>
    <input type="text" class="uppercase" />
    <!-- CSS는 단순히 디자인을 위한 언어 -->
    <!-- 눈에 보이는 값만 대문자로 보이게할 뿐, 실게 그 값이 대문자로 변환되는 것이 아니다. -->
    <!-- 대문자로 된 값을 받아야하는 경우, javascript의 toUpperCase()를 이용하여 받아야한다. -->
  </body>
</html>