CSS - 텍스트

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 CSS 텍스트 속성의 fascinлеr한 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리는 것을 기대하고 있어요. 기억하세요, 자전거 타는 것을 배우는 것처럼, CSS를 마스터하려면 연습이 필요하지만, 저 promise이乐趣이 될 거예요!

CSS 텍스트 - 텍스트 색상

색다를 이야기부터 시작해볼까요! CSS에서는 color 속성을 사용하여 텍스트의 색상을 쉽게 변경할 수 있습니다. 마치 텍스트에 마법의 도화지를 가지고 있는 것처럼!

p {
color: blue;
}

이 간단한 줄이 모든 문단 텍스트를 파란색으로 만듭니다. 하지만 기다려 주세요, 더 있습니다! 색상 이름, HEX 코드, 또는 RGB 값을 사용할 수 있습니다:

h1 {
color: #FF5733; /* 활황색의 HEX 코드 */
}

span {
color: rgb(50, 205, 50); /* 라임 그린의 RGB 값 */
}

CSS 텍스트 - 텍스트 정렬

다음으로, 텍스트 정렬에 대해 이야기해 보겠습니다. 책장에 책을 정리하는 것처럼 - 왼쪽, 오른쪽, 또는 중앙에 정렬할 수 있습니다.

.left-align {
text-align: left;
}

.right-align {
text-align: right;
}

.center-align {
text-align: center;
}

.justify-align {
text-align: justify;
}

justify 값은 특히 흥미롭습니다. 텍스트를 줄 전체에 균일하게 퍼뜨려 신문이 칼럼을 정렬하는 것처럼 합니다.

CSS 텍스트 - 수직 정렬

수직 정렬은 조금 더 복잡하지만, 걱정 마세요! 이 속성은 대부분 인라인 또는 테이블 셀 요소에서 사용됩니다.

img {
vertical-align: middle;
}

td {
vertical-align: top;
}

이 속성은 top, middle, bottom, sub, super, 그리고 심지어 특정 길이 값도 취할 수 있습니다!

CSS 텍스트 - 방향

우리의 글로벌 마을에서는 종종 오른쪽에서 왼쪽으로 읽는 언어를 다루게 됩니다. 이때 direction 속성이 유용하게 사용됩니다:

.arabic-text {
direction: rtl; /* 오른쪽에서 왼쪽으로 */
}

.english-text {
direction: ltr; /* 왼쪽에서 오른쪽으로 */
}

CSS 텍스트 - 텍스트 장식

텍스트에 약간의 매력을 더하고 싶으신가요? 텍스트 장식이 당신의 친구입니다! 텍스트에 보석을 추가하는 것처럼입니다.

.underline {
text-decoration: underline;
}

.overline {
text-decoration: overline;
}

.line-through {
text-decoration: line-through;
}

.no-decoration {
text-decoration: none;
}

Pro tip: 링크의 기본 하단줄을 제거하려면 text-decoration: none;을 사용하세요!

CSS 텍스트 - 텍스트 장식 건너뛰기

이 속성은 텍스트 장식을 적용할 때 건너뛰어야 할 텍스트의 부분을 결정합니다.

p {
text-decoration: underline;
text-decoration-skip: spaces;
}

이렇게 하면 텍스트를 하단줄로 칠하지만 공백을 건너뛰어 더 정돈된 외관을 만듭니다.

CSS 텍스트 - 텍스트 장식 인크 skip

이건 재미있는 것입니다! 텍스트 장식이 "인크" 위에 그려질지 아니면 아래에 그려질지 결정합니다.

p {
text-decoration: underline;
text-decoration-skip-ink: auto;
}

auto 값으로 브라우저가 지능적으로 'g' 또는 'y'와 같은 글자의 내림이를 건너뛰도록 합니다.

CSS 텍스트 - 텍스트 변환

대문자로 소리치고 싶다면, 또는 소문자로 속삭이고 싶다면? 텍스트 변환은 당신의 가이드입니다!

.uppercase {
text-transform: uppercase;
}

.lowercase {
text-transform: lowercase;
}

.capitalize {
text-transform: capitalize;
}

capitalize 값은 특히 멋질 것입니다 - 각 단어의 첫 글자를 대문자로 변환합니다.

CSS 텍스트 - 텍스트 강조

텍스트 강조는 텍스트에 강조 마크를 추가할 수 있습니다. 텍스트에 작은 점이나 원을 추가하는 것처럼입니다.

.emphasis {
text-emphasis: filled;
text-emphasis-position: over right;
}

이렇게 하면 각 문자 위와 오른쪽에 채워진 원을 추가합니다.

CSS 텍스트 - 텍스트 缩進

기억하시나요, 선생님이 각段落의 첫 줄을 缩進시키라고 요청했던 것을? CSS는 자동으로 그렇게 할 수 있습니다!

p {
text-indent: 50px;
}

이렇게 하면 각 문단의 첫 줄을 50ピクセル 缩進합니다.

CSS 텍스트 - 글자 간격

글자 간격은 문자 간의 공간을 조정할 수 있습니다. 마치 글자들이 각자의 개인 공간을 가지는 것처럼!

h1 {
letter-spacing: 5px;
}

이렇게 하면 헤드라인의 각 글자 사이에 5ピクセル의 공간을 추가합니다.

CSS 텍스트 - 단어 간격

글자 간격과 유사하지만, 전체 단어에 대해 적용됩니다:

p {
word-spacing: 10px;
}

이렇게 하면 각 단어 사이에 10ピクセル의 추가 공간을 추가합니다.

CSS 텍스트 - 공백 처리

white-space 속성은 요소 내의 공백을 어떻게 처리할지 결정합니다.

.nowrap {
white-space: nowrap;
}

.pre {
white-space: pre;
}

.pre-wrap {
white-space: pre-wrap;
}

nowrap는 텍스트가 다음 줄로 넘어가지 않도록 합니다, pre는 HTML에 작성된 공백을 유지하고, pre-wrap은 공백을 유지하면서 줄 바꿈을 허용합니다.

CSS 텍스트 - 공백 축소

이 속성은 실제로 white-space 속성의 일부입니다. 공백이 어떻게 축소되는지 결정합니다.

CSS 텍스트 - 텍스트 그림자

텍스트에 깊이를 더하고 싶으신가요? 텍스트 그림자가 도와드립니다!

h1 {
text-shadow: 2px 2px 5px red;
}

이렇게 하면 빨간색 그림자를 2ピクセル 오른쪽과 아래에 5ピクセル 블러로 추가합니다.

CSS 텍스트 - 줄 나눔

line-break 속성은 단어 내에서 줄을 어떻게 나누는지 지정합니다.

p {
line-break: strict;
}

이렇게 하면 더 엄격한 줄 나눔 규칙을 적용합니다.

CSS 텍스트 - 단어 나눔

line-break와 유사하지만, 줄의 끝에 단어를 어떻게 나누는지 지정합니다:

p {
word-break: break-all;
}

이렇게 하면 단어가 어디서든 끊어질 수 있습니다.

CSS 텍스트 - 관련 속성

여기서 다루었던 모든 속성의 빠른 참조 표입니다:

속성	설명
color	텍스트 색상을 설정합니다
text-align	텍스트의 수평 정렬을 지정합니다
vertical-align	인라인 또는 테이블 셀 요소의 수직 정렬을 설정합니다
direction	텍스트의 방향/쓰기 방향을 지정합니다
text-decoration	텍스트에 추가되는 장식을 지정합니다
text-decoration-skip	텍스트 장식이 요소의 내용을 건너뛰는 부분을 지정합니다
text-decoration-skip-ink	텍스트 장식이 글자의 상승이나 내림을 건너뛰는지 결정합니다
text-transform	텍스트의 대소문자 변환을 제어합니다
text-emphasis	텍스트에 강조 마크를 추가합니다
text-indent	텍스트 블록의 첫 줄의 缩進을 설정합니다
letter-spacing	문자 사이의 공간을 조정합니다
word-spacing	단어 사이의 공간을 조정합니다
white-space	요소 내의 공백을 처리하는 방법을 지정합니다
text-shadow	텍스트에 그림자를 추가합니다
line-break	단어 내에서 줄을 나누는 방법을 지정합니다
word-break	줄의 끝에 단어를 나누는 방법을 지정합니다

이제 여러분은 텍스트를 다양한 방법으로 스타일링할 수 있는 지식을 갖추었습니다. CSS를 마스터하려면 연습이 중요합니다. 그러므로 실험을 통해 예쁜, 가독성 있는 웹 페이지를 만들어 보세요. 즐거운 코딩을 기원합니다!

Credits: Image by storyset