direction

CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!

direction 텍스트나 이미지등의 내용의 읽기방향을 지정합니다.

예제 1
direction 개요 - 오른쪽 읽기를 위한 예제
보기
안녕하세요?
즐거운 하루 되세요!
A B C D E
히브리어
מה שלומך?
יהיה לך יום נחמד!
A B C D E
아랍어
كيف حالك؟
أتمنى لك نهارا سعيدا!
A B C D E
우드루어
آپ کیسے ہیں؟
ایک اچھا دن ہے!
A B C D E
소스
<style type="text/css">
    .css_test {
        border : 1px solid black;
        margin-bottom : 15px;
        padding : 5px;
        font-size : 15pt !important;
    }
</style>

<div class="css_test">
안녕하세요?<br>
즐거운 하루 되세요!<br>
A B C D E<br>
</div>

히브리어
<div class="css_test" style="direction:rtl;">
מה שלומך?<br>
יהיה לך יום נחמד!<br>
A B C D E
</div>

아랍어
<div class="css_test" style="direction:rtl;">
كيف حالك؟<br>
أتمنى لك نهارا سعيدا!<br>
A B C D E
</div>

우드루어
<div class="css_test" style="direction:rtl;">
آپ کیسے ہیں؟<br>
ایک اچھا دن ہے!<br>
A B C D E
</div>
사용된 CSS (클릭시 보기) : borderdirectionfont-sizemargin-bottompadding
설명

- 글자나 이미지등의 표시방법(읽기방법)을 지정합니다.
- direction : ltr 왼쪽읽기 설정(기본값)
- direction : rtl 오른쪽읽기 설정
- 대부분의 읽기는 왼쪽에서 오른쪽이지만 일부 언어들은 오른쪽에서 왼쪽으로 읽습니다.
- 히브리어 아랍어가 대표적인데요. 이런 언어들을 위한 읽기 방법입니다.

※ ltr - left to right
※ rtl - right to left

예제 2
실습 - 직접 타이핑 해보기 (textarea 에 적용)
보기
direction :
direction : ltr
설명
- direction 설정을 바꿔보세요 ^^
연구 1
실습 - 테이블(table)에 적용해 보기
보기
1 2 3 4 5
direction :
direction : ltr
설명
- table 의 td 의 내용도 순서가 바뀌는군요 !!
- 음.. 이거 은근 심오한데요. ㅎㅎ (저도 처음 해봤습니다)
- 벽돌과 돈 이미지는 background 를 이용해서 배경으로 넣어보았습니다.
연구 2
실습 - float 된 div 에도 될것인가?
보기
float : left 적용된 div
1
2
3
4
5
display : inline-block 적용된 div
1
2
3
4
5
direction :
direction : ltr
설명
- 둘다 동시에 적용되도록 만들어져 있습니다.
- float 가 적용된 div 에는 안되는 군요.
- 검은색 테두리의 숫자가 있는 것이 적용된 div 입니다.

- 참고 : display float
연구 3
실습 - 현재 이 페이지에 적용해 보기
보기
direction :
direction : ltr
설명
- direction : rtl 은 혼란 스럽네요.. 하하..
☞ 목록으로 가기
CSS 공작소  /   jQuery 공작소