CSS 문단 스타일: direction text-align text-indent

  오늘은 문단 관련 스타일을 배워 보겠습니다. 글자 쓰기 방향, 텍스트 정렬, 들여쓰기 등에 대해 배워봅시다.

 

 

1. direction

  - direction 속성은 텍스트를 어느 방향부터 쓰기 시작할지 지정해줍니다.

  - 선택자 { direction: 속성값; }과 같은 형식으로 작성해줍니다.

  - 속성값을 ltr로 설정하거나, direction 속성을 지정하지 않을 시 왼쪽에서부터 텍스트를 써줍니다.

  - ltr은 left-to-right의 줄임말입니다. 즉, '왼쪽에서 오른쪽으로'라는 뜻입니다.

  - 속성값을 rtl로 설정하면 오른쪽에서부터 텍스트를 써줍니다.

  - rtl은 right-to-left의 줄임말입니다. 즉, '오른쪽에서 왼쪽으로'라는 뜻입니다.

 

 

2. text-align

  - text-align 속성은 문단의 텍스트 정렬 방법을 지정해줍니다.

  - 오피스 한글에서 '문단 정렬'과 같은 기능을 한다고 생각하면 편합니다.

  - 선택자 { text-align: 속성값; }과 같은 형식으로 작성해줍니다.

  - 속성값을 left로 지정해주면, 왼쪽에 맞추어 문단을 정렬해줍니다.

  - 속성값을 right로 지정해주면, 오른쪽에 맞추어 문단을 정렬해줍니다.

  - 속성값을 center로 지정해주면, 가운데에 맞추어 문단을 정렬해줍니다.

  - 속성값을 justify로 지정해주면, 양쪽에 맞추어 문단을 정렬해줍니다. 양쪽 모두에 빈 곳이 없도록 띄어쓰기를 조절해 배치해줍니다.

 

 

3. text-indent

  - text-indent 속성을 사용하면 들여쓰기를 해줄 수 있습니다.

  - 선택자 { text-indent: 속성값; }과 같은 형식으로 작성해줍니다.

  - 속성값으로 '크기'와 '백분율'을 사용할 수 있습니다.

  - .indent1에서는 크기 값으로 10px을 사용했고, .indent2에서는 백분율 값으로 10%를 사용해 들여쓰기를 해주었습니다. 여기서 10%란 부모 요소를 기준으로 10%만큼 들여 써 준다는 뜻입니다. 따라서 부모 요소의 너비 값이 달라지면 실제 들여쓰기 양이 달라지게 됩니다.