텍스트 스타일링: 글꼴과 폰트 속성 - CSS를 이용한 텍스트 꾸미기 기초

CSS

텍스트 스타일링: 글꼴과 폰트 속성 - CSS를 이용한 텍스트 꾸미기 기초

DevMaster!! 2024. 8. 10. 22:34

웹 디자인에서 텍스트의 스타일링은 매우 중요한 요소입니다. 텍스트는 웹 페이지의 주요 콘텐츠를 전달하는 수단이기 때문에, 그 가독성은 사용자 경험에 큰 영향을 미칩니다. CSS를 사용하면 글꼴과 폰트 속성을 다양하게 조정하여 텍스트를 더욱 아름답고 읽기 쉽게 꾸밀 수 있습니다. 이 글에서는 CSS를 이용한 텍스트 스타일링의 기초인 글꼴 설정과 주요 폰트 속성에 대해 알아보겠습니다.

1. 글꼴 설정(Font Family)

글꼴은 텍스트의 전반적인 느낌을 결정짓는 중요한 요소입니다. CSS에서는 font-family 속성을 사용하여 텍스트에 적용할 글꼴을 지정할 수 있습니다. 글꼴은 특정 글꼴과 일반적인 글꼴 계열(Generic Font Family)로 설정할 수 있습니다.

기본적인 font-family 사용법:

body {
    font-family: "Arial", sans-serif;
}

위 예제에서는 Arial 글꼴을 사용하며, 만약 사용자의 시스템에 Arial 글꼴이 없으면, sans-serif 계열의 기본 글꼴이 적용됩니다. 항상 여러 글꼴을 쉼표로 구분하여 지정하는 것이 좋습니다. 이렇게 하면 지정한 글꼴이 없을 경우 대체 글꼴을 사용할 수 있습니다.

일반적인 글꼴 계열:

serif: 각 글자에 장식이 있는 글꼴 (예: Times New Roman)
sans-serif: 장식이 없는 깔끔한 글꼴 (예: Arial)
monospace: 모든 글자가 같은 너비를 가지는 글꼴 (예: Courier New)
cursive: 필기체 스타일의 글꼴 (예: Comic Sans MS)
fantasy: 장식적인 글꼴 (예: Impact)

2. 폰트 크기(Font Size)

font-size 속성은 텍스트의 크기를 조절하는 데 사용됩니다. 폰트 크기는 가독성에 직접적인 영향을 미치므로, 상황에 맞게 적절히 조정하는 것이 중요합니다.

기본적인 font-size 사용법:

h1 {
    font-size: 2em;
}
p {
    font-size: 16px;
}

픽셀(px): 고정된 크기를 지정할 때 사용합니다. 화면 해상도에 관계없이 동일한 크기로 표시됩니다.
em: 부모 요소의 폰트 크기에 상대적인 크기를 지정합니다. 예를 들어, 부모 요소가 16px일 때 2em은 32px로 표시됩니다.
rem: 루트 요소의 폰트 크기에 상대적인 크기를 지정합니다. 일반적으로 더 일관된 디자인을 위해 사용됩니다.
퍼센트(%): 부모 요소의 폰트 크기에 대한 백분율로 크기를 설정합니다.

3. 폰트 두께(Font Weight)

font-weight 속성은 텍스트의 두께(굵기)를 설정하는 데 사용됩니다. 이 속성을 통해 강조하고자 하는 텍스트를 쉽게 눈에 띄게 만들 수 있습니다.

기본적인 font-weight 사용법:

strong {
    font-weight: bold;
}
p.light-text {
    font-weight: 300;
}

bold: 굵은 텍스트를 의미합니다.
normal: 기본 두께의 텍스트를 의미합니다.
숫자 값: 100부터 900까지의 값을 사용하여 세밀하게 두께를 조절할 수 있습니다. 예를 들어, font-weight: 300;은 얇은 텍스트, font-weight: 700;은 굵은 텍스트를 의미합니다.

4. 폰트 스타일(Font Style)

font-style 속성은 텍스트에 기울임꼴(이탤릭체)을 적용하는 데 사용됩니다.

기본적인 font-style 사용법:

em {
    font-style: italic;
}
p {
    font-style: normal;
}

normal: 일반 텍스트(기본값)입니다.
italic: 텍스트를 이탤릭체로 표시합니다.
oblique: 텍스트를 이탤릭체처럼 보이게 하지만, 실제로는 이탤릭체가 아닌 기울임 효과입니다.

5. 텍스트 정렬(Text Alignment)

text-align 속성은 텍스트의 정렬 방법을 지정합니다. 텍스트를 좌측, 우측, 중앙, 양쪽 정렬할 수 있으며, 이는 전체적인 레이아웃에 큰 영향을 미칩니다.

기본적인 text-align 사용법:

p {
    text-align: justify;
}
h1 {
    text-align: center;
}

left: 텍스트를 왼쪽 정렬합니다(기본값).
right: 텍스트를 오른쪽 정렬합니다.
center: 텍스트를 중앙 정렬합니다.
justify: 텍스트를 양쪽 정렬하여 각 줄의 시작과 끝이 정렬되도록 합니다.

6. 텍스트 장식(Text Decoration)

text-decoration 속성은 텍스트에 밑줄, 위줄, 가운뎃줄 등을 추가할 때 사용합니다.

기본적인 text-decoration 사용법:

a {
    text-decoration: underline;
}
del {
    text-decoration: line-through;
}

underline: 텍스트에 밑줄을 그립니다.
line-through: 텍스트 중앙에 가운뎃줄을 그립니다.
overline: 텍스트 위에 줄을 그립니다.
none: 텍스트 장식을 제거합니다.

결론

CSS를 사용한 텍스트 스타일링은 웹 페이지의 시각적 매력과 가독성을 크게 향상시킬 수 있습니다. 글꼴, 크기, 두께, 스타일, 정렬 및 장식 속성을 조합하여 텍스트를 더욱 매력적으로 만들 수 있으며, 사용자 경험을 향상시키는 데 기여할 수 있습니다.

텍스트 스타일링에 대한 기본 개념을 익힌 후, 이를 실습을 통해 적용해보세요. 텍스트가 어떻게 변하는지를 직접 확인하면서, 여러분의 웹 페이지를 더욱 세련되고 읽기 쉽게 만들어보시기 바랍니다.