본문으로 건너뛰기
실습하기

텍스트 정렬(text-align), 텍스트 장식(text-decoration)

텍스트의 정렬 방향과 및 장식을 지정하는 CSS 속성, text-align과 text-decoration에 대해 알아보겠습니다.


text-align​

text-align은 HTML 요소 내 콘텐츠(주로 텍스트)의 가로축 정렬을 지정하는 속성입니다.


사용 예시​

  • 왼쪽 정렬:

    CSS
    .left-align {
      text-align: left;
    }

  • 가운데 정렬:

    CSS
    .center-align {
      text-align: center;
    }

  • 오른쪽 정렬:

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

  • 양방향 정렬:

    CSS
    .justify-align {
      text-align: justify;
    }

text-decoration​

text-decoration은 텍스트에 장식을 추가하거나 없애는 속성입니다.

사용 예시​

  • 밑줄:

    CSS
    .underline {
      text-decoration: underline;
    }

  • 위줄:

    CSS
    .overline {
      text-decoration: overline;
    }

  • 취소선:

    CSS
    .line-through {
      text-decoration: line-through;
    }

  • 장식 없음:

    CSS
    .no-decoration {
      text-decoration: none;
    }

코드의 별표로 강조된 부분을 따라 입력해 보세요.

다음 내용이 궁금하다면?

코드프렌즈 PLUS 멤버십 가입 or 강의를 등록해 주세요!