CSS 작성 모드: 텍스트 방향의 여정

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 흥미로운 CSS 작성 모드의 세계로 함께 여행을 떠납니다. 너의 친절한 이웃 컴퓨터 선생님으로서, 저는 너의 텍스트를 정말로 머리 위로 돌릴 수 있는 fascinatng 속성을 안내해 주기 위해 여기 있습니다! 그러니 안전벨트를 고정하고, 함께 들어보세요!

CSS 작성 모드는 무엇인가요?

코딩을 시작하기 전에, 작성 모드에 대해 이해해 보겠습니다. 책을 읽고 있는 상상해 봅시다. 영어에서는 보통 왼쪽에서 오른쪽으로, 위에서 아래로 읽습니다. 하지만 전통적인 일본 책을 읽고 있을 때는 어떨까요? 텍스트는 위에서 아래로, 오른쪽에서 왼쪽으로 흐릅니다. 이때 CSS writing-mode가 유용해집니다!

CSS의 writing-mode 속성은 텍스트와 기타 인라인 콘텐츠를 표시할 방향을 제어할 수 있게 해줍니다. 마치 텍스트를 다른 방향으로 춤추게 만드는 마법의 지팡이 같은东西!

가능한 값

writing-mode 속성을 사용할 수 있는 다양한 값을 살펴보겠습니다:

값	설명
horizontal-tb	텍스트가 왼쪽에서 오른쪽으로, 위에서 아래로 흐릅니다
vertical-rl	텍스트가 위에서 아래로, 오른쪽에서 왼쪽으로 흐릅니다
vertical-lr	텍스트가 위에서 아래로, 왼쪽에서 오른쪽으로 흐릅니다
sideways-rl	텍스트가 위에서 아래로 흐르고, 모든 문자가 90도 시계 방향으로 회전됩니다
sideways-lr	텍스트가 위에서 아래로 흐르고, 모든 문자가 90도 반시계 방향으로 회전됩니다

적용 대상

writing-mode 속성은 모든 요소에 적용할 수 있으며, ::first-letter과 ::first-line 가상 요소에도 적용할 수 있습니다. 마치 텍스트 방향을 제어할 수 있는 대용량 리모컨처럼!

DOM 문법

이제 CSS에서 writing-mode를 어떻게 사용할 수 있는지 보겠습니다:

element {
writing-mode: value;
}

간단하지 않나요? 이제 각 값을 하나씩 살펴보고, 그동안에 활용해 보겠습니다!

CSS writing-mode - horizontal-tb 값

이는 영어를 포함한 대부분의 언어에 대한 기본 작성 모드입니다. 예제를 보겠습니다:

<div class="horizontal-tb">
<p>이 텍스트는 왼쪽에서 오른쪽으로, 위에서 아래로입니다.</p>
</div>

.horizontal-tb {
writing-mode: horizontal-tb;
}

이렇게 하면 텍스트가 당신이 이 기사를 읽고 있는 것처럼 표시됩니다. 복잡하지 않지만, 우리의 시작점입니다!

CSS writing-mode - vertical-rl 값

이제 것을 뒤집어 보겠습니다:

<div class="vertical-rl">
<p>이 텍스트는 세로로, 오른쪽에서 왼쪽으로입니다!</p>
</div>

.vertical-rl {
writing-mode: vertical-rl;
height: 200px;
}

볼랍니다! 텍스트가 위에서 아래로 세로로 흐르고, 여러 줄은 오른쪽에서 왼쪽으로 시작하여 왼쪽으로 이동합니다. 마치 전통적인 일본이나 중국의 스크롤을 읽는 것처럼!

CSS writing-mode - vertical-lr 값

이제 왼쪽에서 오른쪽으로 세로 모드를 시도해 보겠습니다:

<div class="vertical-lr">
<p>이 텍스트는 세로로, 왼쪽에서 오른쪽으로입니다!</p>
</div>

.vertical-lr {
writing-mode: vertical-lr;
height: 200px;
}

이제 텍스트가 세로로 표시되지만, 왼쪽에서 시작합니다. 몽골어 스크립트를 읽는 것처럼 보입니다!

CSS writing-mode - sideways-rl 값

어떻게 하면 활강이 가능할까요? sideways-rl을 시도해 보겠습니다:

<div class="sideways-rl">
<p>이 텍스트는 가로로, 오른쪽에서 왼쪽으로입니다!</p>
</div>

.sideways-rl {
writing-mode: sideways-rl;
height: 200px;
}

이렇게 하면 각 문자가 90도 시계 방향으로 회전됩니다. 마치 텍스트가 카트wheel을 돌고 있는 것처럼!

CSS writing-mode - sideways-lr 값

마지막으로 뒤집어 보겠습니다:

<div class="sideways-lr">
<p>이 텍스트는 가로로, 왼쪽에서 오른쪽으로입니다!</p>
</div>

.sideways-lr {
writing-mode: sideways-lr;
height: 200px;
}

이번에는 각 문자가 90도 반시계 방향으로 회전됩니다. 마치 텍스트가 뒤집은 다이빙을 하고 있는 것처럼!

CSS writing-mode - 미적 사용 (영어)

이러한 다양한 작성 모드는 여러 언어를 지원하는 데 필수적이지만, 영어에서도 창의적으로 사용할 수 있습니다. 재미있는 예제를 보겠습니다:

<div class="book-spine">
<h2>The CSS Adventure</h2>
</div>

.book-spine {
writing-mode: vertical-rl;
transform: rotate(180deg);
height: 300px;
width: 50px;
background-color: #f0f0f0;
padding: 10px;
}

이렇게 하면 책 등이 서가에 있는 것처럼 세로 텍스트를 만듭니다. 멋지지 않나요?

CSS writing-mode - 관련 속성

텍스트 방향을 완전히 제어하려면 다음 속성을 함께 사용할 수 있습니다:

속성	설명
text-orientation	텍스트 문자의 방향을 정의합니다
direction	텍스트, 인라인 요소 및 테이블 열의 방향을 설정합니다
unicode-bidi	텍스트의 양방향 알고리즘을 재정의합니다

quick 예제를 보겠습니다:

.vertical-mixed {
writing-mode: vertical-rl;
text-orientation: mixed;
}

이렇게 하면 세로 텍스트에서 라틴 문자는 회전하고, 다른 문자(예: 중국어 문자)는 수직으로 남아 있습니다.

그렇게 해서 우리는 CSS 작성 모드의 fascinatng 세계를 여행했습니다. 기억하세요, 웹은 글로벌 플랫폼이며, 이 속성들은 모든 언어와 스크립트에 대해 접근성 있고 아름다운 것을 만들어줍니다.

다음에 웹 사이트를 만들 때, 이 속성들을 조금씩 실험해 보세요. 예상치 못한 것을 만들 수도 있습니다! 행복한 코딩을 기원하며, 텍스트가 항상 올바른 방향으로 흐르기를 바랍니다!

Credits: Image by storyset