HTML에서 텍스트 방향 설정하기
HTML에서 텍스트의 표시 방향을 설정하려면 style 속성을 사용합니다. style 속성은 요소에 인라인(inline) 스타일을 직접 지정하는 역할을 하며, 여기에 CSS의 direction 속성을 함께 사용하면 텍스트가 화면에 배치되는 방향을 조절할 수 있습니다.
다만 한 가지 주의할 점이 있습니다. style 속성으로 지정한 스타일은 다른 모든 전역(global) 스타일보다 우선 적용됩니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 설정한 값이 있더라도 인라인 스타일이 그것을 덮어쓰게(override) 됩니다.
direction 속성에 사용할 수 있는 값
텍스트 방향을 설정할 때 사용할 수 있는 주요 속성값은 다음과 같습니다.
| 번호 | 속성값 및 설명 |
|---|---|
| 1 | ltr 왼쪽에서 오른쪽으로(left to right) 텍스트를 표시합니다. |
| 2 | rtl 오른쪽에서 왼쪽으로(right to left) 텍스트를 표시합니다. |
| 3 | initial 브라우저의 기본값(default)으로 되돌립니다. |
참고로 아랍어나 히브리어처럼 오른쪽에서 왼쪽으로 읽는 언어를 다룰 때 rtl 값을 활용하면 유용하며, 요소 단위로 방향을 지정하는 대신 문서 전체의 기본 방향을 정하고 싶다면 <html> 태그에 dir="rtl" 속성을 사용하는 방법도 있습니다.
예제 코드
아래 코드를 실행하면 HTML에서 텍스트 방향을 설정하는 결과를 직접 확인할 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML Text Direction</title> </head> <body> <p style = "direction: rtl;"> This text will get displayed from right to left </p> <p>This is normal text.</p> </body> </html>
위 예제에서 첫 번째 <p> 요소에는 direction: rtl; 스타일이 적용되어 텍스트가 오른쪽에서 왼쪽으로 표시되고, 두 번째 <p> 요소는 별도의 스타일이 없으므로 기본 방향인 왼쪽에서 오른쪽으로 그대로 출력됩니다.