Post

CSS) 문자 관련 스타일

Posted Updated
Preview Image
By parksohyunnn 28 min read

문자 관련 스타일

문자 관련 스타일이란?

CSS에서 “문자 관련 스타일”은 텍스트 요소의 모양, 크기, 색상 및 간격 등을 조정하는 데 사용되는 스타일 속성들을 의미합니다. 이러한 스타일은 웹 페이지의 텍스트 내용을 더 읽기 쉽고 시각적으로 매력적으로 만들기 위해 사용됩니다.
주요 문자 관련 스타일 속성에는 다음과 같은 것들이 있습니다.

  • color:트 색상을 지정합니다.
  • font-family 텍스트에 사용할 폰트를 지정합니다.
  • font-size텍스트의 크기를 지정합니다.
  • font-weight: 텍스트의 굵기를 지정합니다.
  • font-style텍스트의 스타일(기울임꼴 등)을 지정합니다.
  • text-align텍스트의 정렬 방향을 지정합니다(왼쪽, 가운데, 오른쪽 등).
  • line-height 텍스트 줄 간격을 지정합니다.
  • text-decoration: 텍스트의 장식(밑줄, 취소선 등)을 지정합니다.
  • letter-spacing: 글자 간격을 조정하여 텍스트의 간격을 조절합니다.
  • word-spacing: 단어 간격을 조정하여 단어 사이의 간격을 조절합니다.
  • text-transform: 텍스트 변형(대문자, 소문자 등)을 지정합니다.
  • white-space: 공백 문자 처리를 지정합니다(줄 바꿈, 자동 줄 바꿈, 공백 처리 등).

01. font-family

CSS의 font-family 속성은 웹 페이지에서 사용할 폰트의 이름을 지정하는 데 사용됩니다. 이 속성은 텍스트가 표시되는데 사용되는 기본 폰트나 대체 폰트를 지정할 수 있습니다. 웹 브라우저는 지정된 폰트가 시스템에 설치되어 있는지 확인하고, 없는 경우 대체 폰트를 사용합니다.

font-family 속성에는 사용하려는 폰트의 이름을 지정합니다. 이 때 여러 폰트 이름을 지정할 수 있으며, 브라우저는 처음에 지정된 폰트부터 사용 가능한 폰트인지 확인합니다. 만약 사용자의 시스템에 첫 번째 폰트가 없는 경우, 두 번째 폰트로 대체되며 이런 식으로 계속됩니다.

일반적으로, font-family 속성은 다음과 같은 형식을 가집니다.

1
2
3

body {
  font-family: Arial, Helvetica, sans-serif;
}
  • 이 예제에서는 웹 페이지의 전체 본문 텍스트에 대해 세 가지 폰트를 지정했습니다.
  • 먼저 시스템에 Arial 폰트가 설치되어 있는지 확인하고, 설치되어 있지 않은 경우 Helvetica를 대체 폰트로 사용합니다.

  • 그런 다음, Helvetica도 시스템에 설치되어 있지 않은 경우에는 sans-serif를 기본 대체 폰트로 사용합니다.

  • 이렇게 함으로써 웹 페이지는 사용자의 시스템에 따라 최적의 폰트를 사용하게 되며, 일관된 텍스트 스타일을 유지할 수 있습니다.
  • 만약 지정된 모든 폰트가 사용자의 시스템에 없다면, 브라우저는 기본적으로 설정된 폰트를 사용합니다.

02. font-size, 단위의 고찰

CSS의 font-size 속성은 HTML 요소에 적용되는 텍스트의 크기를 정의하는 데 사용됩니다. 이 속성을 사용하여 텍스트의 크기를 픽셀, 백분율, em 단위 등으로 지정할 수 있습니다.

1
2
3
4

/* 기본구문 */
selector {
  font-size: value;
}
  • selector: 스타일을 적용할 HTML 요소를 선택하는 CSS 선택자입니다.
  • value: 텍스트의 크기를 지정하는 값입니다.

  • value에는 다양한 유형의 값을 사용할 수 있습니다. 주로 사용되는 값들은 다음과 같습니다:

  • 픽셀(px): 절대적인 크기로, 화면에 표시되는 픽셀 수를 나타냅니다. 예를 들어, font-size: 16px;는 텍스트를 16픽셀 크기로 표시합니다.

  • 백분율(%): 상위 요소의 크기에 대한 백분율로, 부모 요소의 크기에 대한 상대적인 크기를 지정합니다. 예를 들어, font-size: 120%;는 부모 요소의 크기에 비해 120% 크기로 텍스트를 표시합니다.

  • em 단위: 상대적인 크기로, 현재 요소에 대한 폰트 크기의 배수를 나타냅니다. 예를 들어, font-size: 1.2em;는 현재 요소의 폰트 크기의 1.2배 크기로 텍스트를 표시합니다.

  • 상대적인 키움 크기(rem): 루트 요소(일반적으로 <html> 요소)에 대한 상대적인 크기로, 브라우저의 기본 폰트 크기를 기준으로 합니다.

03. font-weight

CSS의 font-weight 속성은 텍스트의 두께를 지정하는 데 사용됩니다. 이 속성은 폰트가 제공하는 다양한 두께 중 하나를 선택하여 텍스트를 굵게 표시하거나 가벼운 스타일로 나타낼 수 있습니다.

font-weight 속성은 다음과 같은 값들을 사용할 수 있습니다:

  • normal: 평범한 두께입니다. 보통은 400과 같은 숫자 값으로도 표현됩니다.
  • bold: 굵은 두께입니다. 보통은 700과 같은 숫자 값으로도 표현됩니다.
  • lighter: 부모 요소보다 더 가벼운 두께를 설정합니다.
  • bolder: 부모 요소보다 더 굵은 두께를 설정합니다.
  • 숫자 값 (100부터 900까지): 폰트의 상대적인 두께를 설정합니다. 100은 가장 가벼운 것을 의미하고, 900은 가장 굵은 - 것을 의미합니다.
1
2
3
4

/* 기본구문 */
h1 {
  font-weight: bold;
}

04. font-style

CSS의 font-style 속성은 텍스트의 스타일을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 기울이거나 보통 스타일로 표시할 수 있습니다.

font-style 속성은 다음과 같은 값들을 가질 수 있습니다

  • normal: 기본 폰트 스타일을 사용합니다.
  • italic: 이탤릭체 스타일을 적용합니다.
  • oblique: 텍스트를 경사로운 각도로 기울입니다. italic과 유사하지만 일부 폰트에서는 차이가 있을 수 있습니다.
  • 일반적으로, 웹 브라우저는 해당 폰트가 이탤릭체를 지원하는 경우 italic을 사용하고, 그렇지 않은 경우 oblique을 사용합니다. ````css parent_element child_element {

}

1
2
3
4
5

- 예를 들어, 다음의 CSS 코드는 h1 태그에 이탤릭체 스타일을 적용합니다.
````css
p {
  font-style: oblique;
}

p 태그에 경사로운 기울임 스타일을 적용할 수도 있습니다.

05. font-variant

CSS의 font-variant 속성은 텍스트의 변형을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 대문자, 소문자, 또는 첫 글자 대문자로 표시할 수 있습니다.

font-variant 속성은 다음과 같은 값들을 가질 수 있습니다.

  • normal: 기본 폰트 변형을 사용합니다.
  • small-caps: 모든 문자를 작은 대문자로 변환합니다. 그러나, 실제로 작은 대문자가 없는 글꼴의 경우 일반 대문자로 표시됩니다.
  • initial: 기본값을 사용합니다.
  • inherit: 부모 요소에서 상속된 값을 사용합니다.
1
2
3

p {
  font-variant: small-caps;
}
  • 예를 들어, 다음의 CSS 코드는 p 태그에 작은 대문자 스타일을 적용합니다.
  • 이렇게 함으로써 해당 요소의 텍스트가 작은 대문자로 표시됩니다.
  • 하지만 폰트에 작은 대문자가 없는 경우에는 일반 대문자로 표시됩니다.

06. line-height

CSS의 line-height 속성은 텍스트 줄간의 간격을 지정하는 데 사용됩니다. 이 속성을 사용하여 텍스트 줄 간의 간격을 조절하여 텍스트의 가독성을 향상시킬 수 있습니다.
line-height 속성은 다음과 같은 값들을 가질 수 있습니다.
단위를 포함한 길이 값 (예: 픽셀(px), em, rem)

  • 비율 값 (예: 숫자)
  • 초기 값 (예: normal)
  • 픽셀, em, rem 단위를 사용하면 특정 크기로 줄간 간격을 지정할 수 있습니다. 숫자 값을 사용하면 글꼴 크기의 몇 배로 줄간 간격을 지정할 수 있습니다.
  • 초기 값은 브라우저에 따라 다르지만 일반적으로 브라우저의 기본값을 사용합니다.
    1
2
3
4

    /* 기본구문 */
p {
line-height: 1.5;
}
  • 예를 들어, 다음의 CSS 코드는 p 태그의 줄간 간격을 1.5배로 설정합니다.

07. font

CSS의 font 속성은 폰트 관련 속성을 한 번에 지정하는 데 사용됩니다. font 속성을 사용하여 폰트의 종류, 크기, 두께, 스타일 및 줄 간격을 한 줄에 편리하게 설정할 수 있습니다.

font 속성은 다음과 같은 서브 속성들을 포함할 수 있습니다.

  • font-style: 폰트의 스타일 (예: normal, italic, oblique)
  • font-variant: 폰트의 변형 (예: normal, small-caps)
  • font-weight: 폰트의 두께 (예: normal, bold)
  • font-size: 폰트의 크기 (예: 픽셀(px), em, rem)
  • line-height: 줄 간격 (예: 픽셀(px), 비율 값)
    1
2
3
4

    /* 사용예제 */
p {
font: italic bold 16px/1.5 "Times New Roman", serif;
}
  • 예를 들어, 다음의 CSS 코드는 p 태그에 대한 폰트를 Times New Roman으로 설정하고 크기를 16픽셀로, 굵기를 굵게(bold) 하며, 이탤릭체(italic)로 스타일을 적용하고 줄 간격을 1.5배로 설정합니다.
  • 이렇게 함으로써 해당 요소의 텍스트는 Times New Roman 폰트로 16픽셀 크기로 굵게 강조되고, 이탤릭체로 표시되며, 줄 간격이 1.5배로 설정됩니다.
  • 만약 Times New Roman 폰트가 사용자의 시스템에 없는 경우에는 대체 폰트인 serif가 사용됩니다.

08. 웹폰트

CSS 웹폰트는 웹 페이지에서 특정한 폰트를 사용하기 위해 웹 서버에서 다운로드되어 사용되는 폰트 파일의 형태를 가리킵니다. 이는 사용자가 해당 폰트를 설치하지 않아도 웹 페이지에서 해당 폰트를 표시할 수 있도록 합니다.

일반적으로, 웹 브라우저는 로컬 시스템에 설치된 폰트 중에서만 사용할 수 있습니다. 그러나 CSS 웹폰트를 사용하면 웹 디자이너는 사용자의 시스템에 설치되어 있지 않은 폰트를 사용하여 웹 페이지를 디자인할 수 있습니다.

웹폰트는 여러 포맷으로 제공될 수 있으며, 주로 TrueType (TTF), OpenType (OTF), 웹 오픈 폰트 포맷 (WOFF) 등의 형식을 사용합니다. 또한 최신 브라우저에서는 WOFF2 형식을 더 효율적으로 사용하기도 합니다.

1
2
3
4
5
6
7
8
9
10

/* 사용예제 */
@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.woff2') format('woff2'), /* 최신 브라우저용 WOFF2 형식 */
       url('webfont.woff') format('woff'); /* 이전 브라우저용 WOFF 형식 */
}

body {
  font-family: 'MyWebFont', sans-serif; /* 웹폰트 사용 */
}
  • 이렇게 함으로써 웹 페이지에서 ‘MyWebFont’라는 폰트를 사용할 수 있으며, 사용자의 시스템에 해당 폰트가 없는 경우에는 대체 폰트로 sans-serif를 사용합니다.

09. color, 색상 코드 고찰

CSS에서 색상은 웹 페이지의 요소를 디자인하고 스타일링하는 데 중요한 부분입니다. 색상은 텍스트, 배경, 테두리 등과 같은 요소들의 시각적인 표현을 결정하며, 사용자 경험과 웹 페이지의 전반적인 느낌에 큰 영향을 줍니다.

CSS에서 색상은 다양한 방식으로 표현될 수 있습니다.

  • 이름으로 지정하기: 미리 정의된 색상 이름을 사용하여 색상을 지정할 수 있습니다. 예를 들어, red, blue, green과 같은 색상 이름을 사용할 수 있습니다.

  • HEX 코드: 색상을 나타내는 16진수 코드로 표현할 수 있습니다. 각각의 색상은 6자리의 숫자와 알파벳(A-F)으로 표현됩니다. 예를 들어, #FF0000은 빨간색을 나타냅니다.

  • RGB 값: 색상을 빨간색(Red), 초록색(Green), 파란색(Blue)의 삼원색 조합으로 나타낼 수 있습니다. 각 색상은 0부터 255까지의 값을 가질 수 있습니다. 예를 들어, rgb(255, 0, 0)은 빨간색을 나타냅니다.

  • RGBA 값: RGB 값에 투명도(Alpha)를 추가하여 특정 요소의 투명도를 조절할 수 있습니다. 예를 들어, rgba(255, 0, 0, 0.5)은 빨간색에 50%의 투명도를 적용합니다.

  • HSL 값: 색상을 색상(Hue), 채도(Saturation), 명도(Lightness)의 세 가지 요소로 표현합니다. 이 방식은 색상을 보다 직관적으로 표현할 수 있습니다.

  • SLA 값: HSL 값에 투명도(Alpha)를 추가하여 특정 요소의 투명도를 조절할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* 사용예제 */
.element {
  background-color: red; /* 이름으로 지정 */
}
.element {
  background-color: #FF0000; /* HEX 코드로 지정 */
}
.element {
  background-color: rgb(255, 0, 0); /* RGB 값으로 지정 */
}
.element {
  background-color: rgba(255, 0, 0, 0.5); /* RGB 값에 투명도 추가 */
}
.element {
  background-color: hsl(0, 100%, 50%); /* HSL 값으로 지정 */
}
.element {
  background-color: hsla(0, 100%, 50%, 0.5); /* HSL 값에 투명도 추가 */
}
  • 이러한 다양한 방식을 통해 웹 페이지를 디자인할 때 적절한 색상을 선택하여 요소들을 시각적으로 표현할 수 있습니다.

10. letter-spacing, word-spacing

CSS의 letter-spacing 속성은 텍스트 내의 각 글자 사이의 간격을 조절하는 데 사용됩니다. 이 속성을 사용하여 글자 사이의 간격을 늘리거나 줄일 수 있으며, 텍스트의 모양을 조절하여 시각적인 효과를 줄 수 있습니다.

1
2
3
4

/* 사용예제 */
.element {
  letter-spacing: 2px;
}
  • 다음의 CSS 코드는 특정 요소 내의 텍스트의 글자 간격을 2픽셀로 늘립니다.
  • CSS의 word-spacing 속성은 마찬가지로 텍스트 내의 단어 사이의 간격을 조절하는 데 사용됩니다. 이 속성을 사용하여 단어 사이의 간격을 늘리거나 줄일 수 있으며, 텍스트의 가독성을 높이거나 시각적인 디자인 요소를 추가할 수 있습니다.
1
2
3
4

/* 사용예제 */
.element {
  letter-spacing: -1px;
}
  • 반대로, 음수 값을 사용하여 글자 사이의 간격을 줄일 수도 있습니다.
1
2
3
4

/* 사용예제 */
.element {
  word-spacing: 4px;
}
  • 다음의 CSS 코드는 특정 요소 내의 텍스트의 단어 간격을 4픽셀로 늘립니다.
1
2
3
4

/* 사용예제 */
.element {
  word-spacing: -2px;
}
  • 음수 값을 사용하여 단어 사이의 간격을 줄일 수도 있습니다.
  • 이러한 letter-spacing와 word-spacing 속성을 사용하여 텍스트 요소를 스타일링하면 텍스트의 모양과 레이아웃을 세밀하게 제어할 수 있습니다.

11. text-decoration

CSS의 text-decoration 속성은 텍스트에 장식을 추가하는 데 사용됩니다. 이 속성을 사용하여 텍스트의 밑줄, 취소선, 텍스트 위에 있는 줄 등을 추가하거나 제거할 수 있습니다.
text-decoration 속성은 다음과 같은 값들을 가질 수 있습니다.

  • none: 텍스트 장식을 없앱니다.
  • underline: 텍스트에 밑줄을 추가합니다.
  • overline: 텍스트 위에 줄을 추가합니다.
  • line-through: 텍스트에 취소선을 추가합니다.
  • blink: 텍스트를 깜박이는 효과로 표시합니다. (일부 브라우저에서는 지원되지 않을 수 있음)
    1
2
3
4

    /* 사용예제 */
p {
text-decoration: underline;
}
  • 예를 들어, 다음의 CSS 코드는 p 요소 내의 텍스트에 밑줄을 추가합니다.
1
2
3
4

/* 사용예제 */
.cancel {
  text-decoration: line-through;
}
  • 특정 클래스에만 취소선을 추가할 수도 있습니다.
  • text-decoration 속성을 사용하여 텍스트의 장식을 추가하거나 제거함으로써 웹 페이지의 텍스트를 더욱 효과적으로 스타일링할 수 있습니다.

12. text-transform

CSS의 text-transform 속성은 텍스트의 대소문자 변환을 제어하는 데 사용됩니다. 이 속성을 사용하여 텍스트를 모두 소문자로 변환하거나 대문자로 변환하거나, 각 단어의 첫 글자를 대문자로 변환하거나 등의 변환이 가능합니다.

text-transform 속성은 다음과 같은 값들을 가질 수 있습니다:

  • none: 기본값으로, 텍스트 변환을 적용하지 않습니다.
  • capitalize: 각 단어의 첫 글자를 대문자로 변환합니다.
  • uppercase: 텍스트를 모두 대문자로 변환합니다.
  • lowercase: 텍스트를 모두 소문자로 변환합니다.
  • full-width: 텍스트를 전체 폭의 문자로 변환합니다. (일본어나 중국어와 같은 언어의 폭을 조정하는 데 사용됩니다.)
    1
2
3
4

    /* 사용예제 */
span {
text-transform: uppercase;
}
  • 예를 들어, 다음의 CSS 코드는 span 요소 내의 텍스트를 모두 대문자로 변환합니다.
  • text-transform 속성을 사용하여 텍스트를 변환함으로써 텍스트의 모양을 조절하거나 표현 방식을 통일시킬 수 있습니다. 이는 예를 들어 제목의 텍스트를 모두 대문자로 표시하거나, 사용자 입력을 특정 형식에 맞게 변환하는 데 유용하게 사용될 수 있습니다.

13. text-shadow

CSS의 text-shadow 속성은 텍스트에 그림자 효과를 추가하는 데 사용됩니다. 이 속성을 사용하여 텍스트 주위에 그림자를 만들어 텍스트를 더욱 두드러지게 표현할 수 있습니다.

1
2

/* 사용예제 */
text-shadow: h-shadow v-shadow blur-radius color;
  • h-shadow: 그림자의 가로 위치를 나타내는 값입니다.
  • 양수 값은 텍스트의 오른쪽에 그림자를 만들고, 음수 값은 텍스트의 왼쪽에 그림자를 만듭니다.
  • v-shadow: 그림자의 세로 위치를 나타내는 값입니다.
  • 양수 값은 텍스트의 아래에 그림자를 만들고, 음수 값은 텍스트의 위에 그림자를 만듭니다.
  • blur-radius: 그림자의 흐림 정도를 나타내는 값입니다. 값이 클수록 그림자가 흐려집니다.
  • color: 그림자의 색상을 나타내는 값입니다.
  • 예를 들어, 다음의 CSS 코드는 h1 요소의 텍스트에 회색의 그림자를 추가합니다.
    1
2
3
4

    /* 사용예제 */
h1 {
text-shadow: 2px 2px 4px grey;
}
  • 이 코드는 텍스트의 오른쪽 아래에 2픽셀 오른쪽으로, 2픽셀 아래로 흐림 정도가 4픽셀인 회색 그림자를 만듭니다.
  • text-shadow 속성을 사용하여 텍스트에 그림자를 추가하면 텍스트가 눈에 더욱 두드러지게 보이게 되어 시각적 효과를 향상시킬 수 있습니다.
CSS
git github
This post is licensed under CC BY 4.0 by the author.

Trending Tags

git github