direction
속성의 이해
direction
속성은
텍스트를 포함한 인라인 콘텐츠의 진행 방향을 설정하며,
ltr
(왼쪽 → 오른쪽) 또는 rtl
(오른쪽 → 왼쪽)로 지정할 수 있습니다.
이 속성을 사용하면, 텍스트나 인라인 콘텐츠, 테이블 열(table columns)의 진행 방향을 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 표시할 수 있습니다.
형식 구문
selector {
direction: ltr | rtl
/* ltr : 왼쪽 → 오른쪽(line-left-to-line-right)
rtl : 오른쪽 → 왼쪽(line-right-to-line-left) */
}
구문
/* 키워드 값 */
direction: ltr; /* 초깃값 */
direction: rtl;
/* 전역 값 */
direction: inherit;
direction: initial;
direction: revert;
direction: revert-layer;
direction: unset;
예제
다음의 예제들을 통해서 direction
속성의 구현 방식을 확인해 보세요.
텍스트
<section class="ltr">
<h4>direction: ltr</h4>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
<section class="rtl">
<h4>direction: rtl</h4>
<span>1</span>
<span>2</span>
<span>3</span>
</section>
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
/* 코드의 복잡성을 줄이기 위해서
이하 공통 스타일은 생략했습니다. */
direction: ltr
1 2 3direction: rtl
1 2 3인라인 콘텐츠
<section class="ltr">
<h4>direction: ltr</h4>
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
</section>
<section class="rtl">
<h4>direction: rtl</h4>
<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
</section>
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
/* 코드의 복잡성을 줄이기 위해서
이하 공통 스타일은 생략했습니다. */
direction: ltr
direction: rtl
테이블 열(table columns)
<table class="ltr">
<caption>direction: ltr</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<table class="rtl">
<caption>direction: rtl</caption>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
.ltr {
direction: ltr;
}
.rtl {
direction: rtl;
}
/* 코드의 복잡성을 줄이기 위해서
이하 공통 스타일은 생략했습니다. */
1 | 2 | 3 |
1 | 2 | 3 |
값
ltr |
텍스트나 인라인 콘텐츠, 테이블 열(table columns)의 진행 방향을 왼쪽에서 오른쪽(line-left-to-line-right)으로 설정합니다. |
---|---|
rtl |
텍스트나 인라인 콘텐츠, 테이블 열(table columns)의 진행 방향을 오른쪽에서 왼쪽(line-right-to-line-left)으로 설정합니다. |
형식 정의
초깃값 | ltr |
---|---|
적용 요소 | 모든 요소
( direction 속성은 블록 수준의 요소에 적용 가능합니다. 인라인 수준의 요소에도 영향을 미치려면 unicode-bidi 속성의 값이 embed 또는 bidi-override 또는 isolate-override 여야 합니다.) |
상속 | 예 |
애니메이션 | 아니오 |
브라우저 호환성
속성 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
direction
|
2 | 12 | 1 | 1 |
명세서
명세서 사양 | |
---|---|
direction
|
CSS Writing Modes Level 4 #direction |