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

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

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


text-align

text-align은 텍스트의 가로축 정렬을 지정하는 속성입니다.


사용 가능한 값은 다음과 같습니다.

왼쪽 정렬
.left-align {
text-align: left;
}

오른쪽 정렬
.right-align {
text-align: right;
}

가운데 정렬
.center-align {
text-align: center;
}

양쪽 정렬
.justify-align {
text-align: justify;
}

text-decoration

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

사용 가능한 값은 다음과 같습니다.


밑줄 추가
.underline {
text-decoration: underline;
}

위쪽에 줄 추가
.overline {
text-decoration: overline;
}

중앙에 줄 추가
.line-through {
text-decoration: line-through;
}

장식 없애기
.no-decoration {
text-decoration: none;
}

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

다음 내용이 궁금하다면?

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