CSS - 6. 문구 스타일

1. 텍스트 정렬

텍스트 정렬은 왼쪽 정렬, 가운데 정렬, 오른쪽 정렬이 있다. property 이름은 text-align이고 값은 left, center, right이다.

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

모든 요소의 기본 정렬은 왼쪽 정렬이다. 그래서 tex-align을 주지 않은 부분들은 기본적으로 왼쪽 정렬이 된다.

단, 예외사항이 있는데 span같은 inline-element들은 오른쪽 정렬을 부여해도 되지 않는다. 그 이유는 span이 차지하는 영역(inline-element들이 차지하는 영역)은 span의 오른쪽 정렬만큼의 길이밖에 안되기 때문이다.

.js-description {
  text-indent: 50px;
}

css로 들여쓰기도 할 수 있다. html 코드 내에서 스페이스와 엔터를 아무리 추가하여도, 실제 결과 화면에서는 적용되지 않는다.

text-indent를 사용하면 들여쓰기와 내어 쓰기가 가능하다. 값이 양수이면 들여 쓰기, 음수이면 내어 쓰기가 된다.

기본값은 0이며, 길이값을 px, em, cm 등의 단위로 지정할 수 있다. 그리고 %를 사용해 부모 요소 너비에 상대적인 백분율 또한 줄 수 있다.

🍯꿀팁🐝

1. blockquote이란 태그는 인용 구문을 넣을 때 쓰는 태그이다.

2. 문장 사이사이에 스페이스를 추가하고 싶을 때는  를 쓰면 된다.

<p>스페이스 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;넣는 예제</p>