[CSS3]CSS 텍스트 속성으로 텍스트 스타일링

텍스트 속성은 웹 페이지의 가독성과 시각적인 매력을 높이는 데 중요한 역할을 합니다. 이 글에서는 CSS를 사용하여 텍스트를 스타일링하고, 웹사이트의 가시성을 향상하는 방법에 대해 알아보겠습니다.

≣ 목차

• 폰트 관련 속성🅰️
• 텍스트 스타일링🖌️
• 텍스트 정렬↔
• 텍스트 장식🎀
• 줄바꿈과 단락📝
• 핵심 내용👀

폰트 관련 속성🅰️

텍스트의 폰트는 웹 페이지의 느낌과 브랜딩에 큰 영향을 미칩니다. CSS에서는 font-family, font-size, font-weight, font-style, font-variant등의 속성을 사용하여 폰트를 지정하고 크기와 굵기를 조절할 수 있습니다.

font-family

font-family 속성은 CSS에서 가장 중요한 속성 중 하나로, 웹 페이지의 텍스트에 적용할 폰트 패밀리를 지정하는 데 사용됩니다. 이 속성은 텍스트를 어떤 폰트로 표시할지를 결정할 수 있게 해 줍니다.
폰트 패밀리는 사용자 시스템에 설치된 폰트의 집합을 의미합니다. 폰트 패밀리를 지정함으로써, 브라우저는 해당 폰트가 사용자 시스템에 설치되어 있는지 확인하고, 없는 경우에는 대체할 폰트를 찾아서 사용합니다.
font-family 속성은 한 개 이상의 폰트 이름을 포함할 수 있습니다. 이때 각 폰트 이름은 쉼표로 구분하여 나열합니다. 또한, 만약 폰트 이름에 공백이 있거나, 이름이 여러 단어로 이루어져 있다면 큰따옴표(" ")로 둘러싸야합니다.

예를 들어, 다음과 같이 font-family 속성을 사용하여 폰트 패밀리를 지정할 수 있습니다.

font-family: Arial, Helvetica, sans-serif;

위의 코드에서는 브라우저가 먼저 시스템에 Arial 폰트가 설치되어 있는지 확인하고, 없는 경우에는 Helvetica 폰트로 대체합니다. 그리고 둘 다 설치되어 있지 않은 경우에는 기본 sans-serif 폰트를 사용합니다.

폰트 패밀리를 지정할 때는 사용자 환경을 고려하여 가장 보편적으로 사용되는 폰트를 앞에 나열하고, 대체할 폰트를 뒤에 나열하는 것이 좋습니다. 이렇게 함으로써 가능한 많은 사용자가 일관된 텍스트 스타일을 볼 수 있습니다.

font-size

font-size 속성은 CSS에서 텍스트의 크기를 지정하는 데 사용됩니다. 이 속성은 텍스트의 글꼴 크기를 픽셀(px), 포인트(pt), 백분율(%), em, rem 등의 단위로 지정할 수 있습니다.

단위에 관한 내용이 조금 더 알고 싶다면 css 특징인 단위에 대한 내용을 아래 포스팅을 통해 확인해 주세요👀

[CSS3]CSS의 특징: 기본 스타일 시트부터 상속까지

예를 들어, font-size 속성을 사용하여 텍스트의 크기를 16px로 지정하려면 다음과 같이 작성합니다.

font-size: 16px;

텍스트의 크기를 조절함으로써 웹 페이지의 레이아웃을 조정하거나 텍스트의 가독성을 향상할 수 있습니다. 일반적으로 웹 페이지에서는 텍스트의 기본 크기가 16px로 설정되어 있으며, 이를 기준으로 상대적인 크기를 지정하는 것이 일반적입니다.

font-weight

font-weight 속성은 CSS에서 텍스트의 두께를 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 일반적으로 normal(기본값) 또는 bold로 설정할 수 있습니다. 또한, font-weight 값을 숫자로 지정하여 더 세부적인 두께를 조절할 수도 있습니다.
가장 일반적으로 사용되는 값은 normal과 bold입니다. normal은 보통 평범한 두께를 가진 텍스트를 지정하고, bold는 굵은 두께의 텍스트를 지정합니다.

예를 들어, 다음과 같이 font-weight 속성을 사용하여 텍스트를 굵게 지정할 수 있습니다.

font-weight: bold;

또는 숫자 값으로도 지정할 수 있습니다. 숫자 값은 100부터 900까지의 범위를 가집니다. 값이 높을수록 텍스트는 더 굵게 표시됩니다. 일반적으로는 100, 200, 300, 400, 500, 600, 700, 800, 900 중에서 선택할 수 있습니다.

font-weight: 700; /* 굵은 텍스트 */

font-weight 속성을 사용하여 텍스트의 두께를 조절함으로써 디자인의 의도를 더욱 명확하게 전달하고, 사용자의 시선을 끌어 더 중요하거나 강조할 요소를 강조할 수 있습니다.

font-style

font-style 속성은 CSS에서 텍스트의 스타일을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 기울임 꼴(이탤릭체)로 표시하거나 일반 폰트 스타일로 유지할 수 있습니다.

가장 일반적으로 사용되는 값은 normal(기본값)과 italic입니다. normal 값은 텍스트를 일반적인 폰트 스타일로 표시하고, italic 값은 텍스트를 기울임 꼴(이탤릭체)로 표시합니다.

예를 들어, 다음과 같이 font-style 속성을 사용하여 텍스트를 기울임 꼴로 지정할 수 있습니다.

font-style: italic;

텍스트를 이탤릭체로 표시하는 것은 일반 텍스트와 구분되도록 하거나 강조하는 데 도움이 됩니다. 특히 인용구나 특정 용어를 강조할 때 사용될 수 있습니다.

font-variant

font-variant 속성은 CSS에서 텍스트의 변형을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 대문자 변환하거나 소문자로 변환하고, 일부 글자를 작은 대문자로 변환하는 등의 변형을 지정할 수 있습니다.

가장 일반적으로 사용되는 값은 normal(기본값)과 small-caps입니다. normal 값은 텍스트를 일반적인 소문자로 표시하고, small-caps 값은 텍스트를 작은 대문자로 표시합니다.

예를 들어, 다음과 같이 font-variant 속성을 사용하여 텍스트를 작은 대문자로 지정할 수 있습니다.

font-variant: small-caps;

작은 대문자는 일반적인 대문자보다 더 작은 크기로 표시되며, 주변 소문자와 일관성 있게 표시됩니다. 이는 특정 용어나 제목을 강조하는 데 사용될 수 있습니다.

텍스트 스타일링🖌️

텍스트의 색상, 간격, 그림자 등을 조절하여 웹 페이지의 시각적인 매력을 높일 수 있습니다. color, letter-spacing, text-shadow 등의 속성을 활용하여 텍스트를 스타일링할 수 있습니다.

color

color 속성은 텍스트의 색상을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 다양한 색으로 표시할 수 있습니다. 색상은 여러 형식으로 지정할 수 있으며, 흔히 사용되는 형식은 색상 이름(예: "red", "blue"), HEX 코드(예: "#FF0000", "#0000FF"), RGB 값(예: "rgb(255, 0, 0)", "rgb(0, 0, 255)") 등이 있습니다.
색상 표기법에 관한 내용이 조금 더 알고 싶다면 아래 포스팅을 통해 확인해 주세요👀

[CSS3]CSS의 특징: 기본 스타일 시트부터 상속까지

예를 들어, 다음과 같이 color 속성을 사용하여 텍스트의 색상을 빨간색으로 지정할 수 있습니다.

color: red;

letter-spacing

letter-spacing 속성은 텍스트 간의 간격(자간)을 지정하는 데 사용됩니다. 이 속성을 사용하여 각 문자 사이의 간격을 조절할 수 있습니다. 양수 값은 간격을 넓히고, 음수 값은 간격을 좁힙니다.

예를 들어, 다음과 같이 letter-spacing 속성을 사용하여 텍스트 간의 간격을 2px로 늘릴 수 있습니다.

letter-spacing: 2px;

text-shadow

text-shadow 속성은 텍스트에 그림자 효과를 추가하는 데 사용됩니다. 이 속성을 사용하여 텍스트 주위에 그림자를 생성하여 텍스트를 더 돋보이게 만들 수 있습니다.
이 속성은 다음과 같은 값으로 구성됩니다. 수평 위치(offset-x), 수직 위치(offset-y), 흐림 정도(blur-radius), 그림자의 색상(color).

예를 들어, 다음과 같이 text-shadow 속성을 사용하여 텍스트에 회색 그림자를 추가할 수 있습니다.

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

위의 코드에서 2px 2px는 그림자의 수평 및 수직 위치를 나타내고, 4px는 그림자의 흐림 정도를 나타내며, rgba(0, 0, 0, 0.5)는 그림자의 색상을 나타냅니다.

텍스트 정렬↔

텍스트를 적절하게 정렬하는 것은 웹 페이지의 레이아웃을 개선하는 데 도움이 됩니다. CSS에서는 text-align 속성을 사용하여 텍스트를 가운데 정렬, 왼쪽 정렬, 오른쪽 정렬할 수 있습니다.

text-align

가장 일반적으로 사용되는 값은 다음과 같습니다:

• left: 텍스트를 왼쪽으로 정렬합니다. 이 값은 보통 디폴트 값입니다.
• center: 텍스트를 가운데로 정렬합니다.
• right: 텍스트를 오른쪽으로 정렬합니다.
• justify: 텍스트를 양쪽으로 정렬합니다. 텍스트가 왼쪽과 오른쪽 모두 정렬되도록 간격을 조절합니다.

예를 들어, 다음과 같이 text-align 속성을 사용하여 텍스트를 가운데 정렬할 수 있습니다.

text-align: center;

텍스트 장식🎀

텍스트에 밑줄, 취소선, 대문자 변환 등의 장식적인 요소를 추가할 수 있습니다. text-decoration, text-transform 등의 속성을 사용하여 텍스트를 장식할 수 있습니다.

text-decoration

text-decoration 속성은 텍스트의 장식(밑줄, 취소선 등)을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트에 밑줄을 추가하거나 취소선을 적용할 수 있습니다. 주요 값으로는 다음이 있습니다:

• none: 텍스트에 장식을 적용하지 않습니다.
• underline: 텍스트에 밑줄을 추가합니다.
• overline: 텍스트 위에 선을 추가합니다.
• line-through: 텍스트에 가운데에 취소선을 추가합니다.
• underline overline: 텍스트에 밑줄과 위에 선을 동시에 추가합니다.

예를 들어, 다음과 같이 text-decoration 속성을 사용하여 텍스트에 밑줄을 추가할 수 있습니다.

text-decoration: underline;

text-transform

text-transform 속성은 텍스트의 대소문자를 변환하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 대문자로 변환하거나 소문자로 변환하거나, 각 단어의 첫 글자를 대문자로 변환할 수 있습니다. 주요 값으로는 다음이 있습니다:

• none: 텍스트의 변형을 적용하지 않습니다.
• uppercase: 텍스트를 모두 대문자로 변환합니다.
• lowercase: 텍스트를 모두 소문자로 변환합니다.
• capitalize: 각 단어의 첫 글자를 대문자로 변환합니다.

예를 들어, 다음과 같이 text-transform 속성을 사용하여 텍스트를 대문자로 변환할 수 있습니다.

text-transform: uppercase;

줄 바꿈과 단락📝

텍스트의 줄 바꿈과 단락을 설정하여 텍스트의 가독성을 높일 수 있습니다. word-wrap, line-height 등의 속성을 사용하여 텍스트의 줄바꿈과 단락을 조절할 수 있습니다.

word-wrap

word-wrap 속성은 텍스트가 컨테이너를 넘어갈 때 줄 바꿈을 어떻게 처리할지를 지정하는 데 사용됩니다. 주로 긴 단어나 긴 URL 등이 컨테이너를 넘어가는 경우에 사용됩니다.

• normal: 기본값으로, 단어 단위로만 줄 바꿈이 발생합니다.
• break-word: 긴 단어나 문자열이 컨테이너를 넘어갈 때 줄 바꿈이 발생합니다.

예를 들어, 다음과 같이 word-wrap 속성을 사용하여 단어가 컨테이너를 넘어갈 때 줄 바꿈을 발생시킬 수 있습니다.

word-wrap: break-word;

line-height

line-height 속성은 텍스트 줄 간의 간격(행간)을 지정하는 데 사용됩니다. 이 속성은 한 줄의 텍스트의 높이를 결정하며, 줄 간격을 조절하여 텍스트의 가독성을 높이는 데 도움이 됩니다.

line-height 속성은 길이 값이나 비율 값을 사용하여 지정할 수 있습니다. 길이 값은 픽셀(px)이나 em 단위로 지정되며, 줄 간격을 고정된 크기로 설정합니다. 반면에 숫자 값은 여러 줄의 텍스트를 감싸는 사각형의 높이에 대한 비율을 나타내며, 글꼴 크기의 배수로 지정됩니다.

예를 들어, 다음과 같이 line-height 속성을 사용하여 텍스트 줄 사이의 간격을 조절할 수 있습니다.

line-height: 1.5;

위의 코드는 텍스트 줄 사이의 간격을 글꼴 크기의 1.5배로 설정합니다. 이렇게 함으로써 텍스트가 서로 겹치지 않고 더 읽기 쉽게 됩니다.

핵심 내용👀