Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등

1. 소주제: 굵기 (Font Weight)

Font Weight는 글자의 두께를 나타내는 속성입니다. 글자에 적용되는 굵기는 일반적으로 다양한 값으로 지정할 수 있습니다. 일반적인 굵기 값은 숫자로 표현되며, 글꼴에 따라 지원되는 굵기 값의 범위가 다를 수 있습니다. 이제 몇 가지 주요 굵기 값에 대해 알아보겠습니다.

1.1 Normal

font-weight: normal

Normal 값은 글자에 기본 굵기를 적용합니다. 대부분의 글꼴에서는 기본 굵기인 400이 적용됩니다.

1.2 Bold

font-weight: bold

Bold 값은 글자를 굵게 표시합니다. 대부분의 글꼴에서는 기본 굵기인 700이 적용됩니다. Bold 속성을 사용하면 글자가 더욱 강조되고 눈에 띄게 표시됩니다.

1.3 Bolder

font-weight: bolder

Bolder 값은 부모 요소보다 더 굵게 표시됩니다. 이 값은 상속 구조에서 상위 요소보다 더 강조할 때 유용합니다. 부모 요소의 굵기에 따라 다르게 표시될 수 있습니다.

1.4 Lighter

font-weight: lighter

Lighter 값은 부모 요소보다 더 얇게 표시됩니다. 상속 구조에서 상위 요소보다 더 가벼운 굵기로 지정할 때 사용됩니다. 부모 요소의 굵기에 따라 다르게 표시될 수 있습니다.

1.5 숫자 값

font-weight: 100, 200, ..., 900

숫자 값을 사용하여 특정 굵기 값을 직접 지정할 수도 있습니다. 값이 높을수록 글자는 더 굵게 표시됩니다. 그러나 모든 숫자 값이 일관되게 지원되지 않을 수 있으므로 글꼴에 따라 다를 수 있습니다.

위의 소주제에서는 글자 굵기 지정에 대해 다양한 방법과 값에 대해 알아보았습니다. Font Weight 속성을 사용하여 글자의 두께를 조정함으로써 텍스트를 더욱 강조하고 시각적으로 눈에 띄게 표시할 수 있습니다.

2. 소주제: 기울기 (Font Style)

Font Style은 글자에 적용되는 기울기를 나타내는 속성입니다. 기울기를 사용하면 글자를 경사로운 스타일로 표시할 수 있습니다. 주요한 기울기 값과 함께 이를 표현하는 방법을 살펴보겠습니다.

2.1 Normal

font-style: normal

Normal 값은 글자에 추가적인 기울기를 적용하지 않습니다. 일반적으로 기울기가 없는 상태를 나타냅니다.

2.2 Italic

font-style: italic

Italic 값은 글자를 이텔릭체로 표시합니다. 이텔릭체로 표시되는 글꼴은 기울어진 스타일로 텍스트를 강조하는 데 사용됩니다.

2.3 Oblique

font-style: oblique

Oblique 값은 글자를 경사로운 스타일로 표현합니다. 이는 Italic과 유사하지만 글꼴에 이텔릭체가 없는 경우에도 적용할 수 있습니다.

위에서 설명한 소주제에서는 글자에 적용할 수 있는 기울기를 다양하게 알아보았습니다. Font Style 속성을 사용하여 텍스트를 일반 스타일에서 조금 더 특별한 스타일로 변환할 수 있습니다. 이를 통해 글자의 의미나 강조를 전달할 수 있으며, 다양한 글꼴 스타일을 활용할 수 있습니다.

3. 소주제: 밑줄 (Underline)

밑줄은 글자 아래에 수평선을 그어 글자를 강조하는 속성입니다. 텍스트를 읽는 독자들에게 특정 단어나 구절에 더 많은 주의를 끌기 위해 사용될 수 있습니다. 이제 밑줄을 지정하는 방법과 사용 시 주의할 점에 대해 알아보겠습니다.

3.1 텍스트에 밑줄 추가하기

밑줄을 적용하기 위해 특정 요소에 text-decoration 속성을 사용합니다. text-decoration의 값을 underline으로 지정하면 해당 텍스트에 밑줄이 추가됩니다.

**HTML:**
<span style="text-decoration: underline;">밑줄이 있는 텍스트</span>

**CSS:**
span {
  text-decoration: underline;
}

3.2 다양한 밑줄 스타일

밑줄 속성에는 다양한 스타일을 적용할 수 있습니다. text-decoration 속성의 underline 값 대신 다음과 같은 값을 사용하여 원하는 스타일을 지정할 수 있습니다.

• text-decoration: solid; : 실선 스타일의 밑줄
• text-decoration: dotted; : 점선 스타일의 밑줄
• text-decoration: dashed; : 파선 스타일의 밑줄
• text-decoration: double; : 이중선 스타일의 밑줄

**HTML:**
<span style="text-decoration: dotted;">점선 밑줄</span>
<span style="text-decoration: dashed;">파선 밑줄</span>
<span style="text-decoration: double;">이중선 밑줄</span>

**CSS:**
span {
  text-decoration: dotted;  /* or dashed or double */
}

3.3 밑줄 제거하기

특정 요소에 적용된 밑줄을 제거하려면 text-decoration 속성에 none 값을 사용하면 됩니다.

**HTML:**
<span style="text-decoration: underline;">밑줄이 있는 텍스트</span>

**CSS:**
span {
  text-decoration: none;
}

위의 소주제에서는 텍스트에 밑줄을 추가하는 방법과 다양한 밑줄 스타일을 적용하는 방법에 대해 알아보았습니다. text-decoration 속성을 사용하면 텍스트에 밑줄을 추가하거나 제거하여 텍스트의 시각적 효과를 조절할 수 있습니다.

4. 소주제: 취소선 (Strikethrough)

취소선은 글자 위에 수평선을 그어 글자를 지운 효과를 주는 속성입니다. 이는 특정 텍스트가 유효하지 않거나 취소되었음을 표현하기 위해 사용될 수 있습니다. 취소선을 지정하는 방법과 주의할 점에 대해 알아보겠습니다.

4.1 텍스트에 취소선 추가하기

취소선을 추가하기 위해서는 텍스트에 text-decoration 속성을 사용합니다. text-decoration의 값으로 line-through를 지정하면 해당 텍스트에 취소선이 추가됩니다.

**HTML:**
<span style="text-decoration: line-through;">취소된 텍스트</span>

**CSS:**
span {
  text-decoration: line-through;
}

4.2 취소선 스타일 변경하기

취소선의 스타일을 변경하기 위해 text-decoration 속성의 다른 값들을 사용할 수 있습니다. 예를 들어, 점선 스타일의 취소선을 원한다면 text-decoration 속성의 값으로 line-through dotted을 지정합니다.

**HTML:**
<span style="text-decoration: line-through dotted;">점선 취소선</span>

**CSS:**
span {
  text-decoration: line-through dotted;
}

다른 취소선 스타일을 사용하고 싶다면 text-decoration 속성의 다른 값들을 조합하여 원하는 결과를 얻을 수 있습니다.

4.3 취소선 제거하기

취소선을 제거하기 위해서는 text-decoration 속성에 none 값을 사용합니다.

**HTML:**
<span style="text-decoration: line-through;">취소된 텍스트</span>

**CSS:**
span {
  text-decoration: none;
}

위에서 소개한 소주제에서는 텍스트에 취소선을 추가하는 방법과 취소선의 스타일을 변경하는 방법에 대해 알아보았습니다. text-decoration 속성을 이용하여 취소선을 추가하거나 제거함으로써 텍스트의 시각적인 효과를 조절할 수 있습니다.

5. 소주제: 기타 Font 스타일

텍스트에는 다양한 폰트 스타일을 적용할 수 있습니다. 이 소주제에서는 텍스트의 모양과 스타일을 변경할 수 있는 몇 가지 기타 Font 스타일에 대해 알아보겠습니다.

5.1 글꼴 설정하기

글꼴을 설정하기 위해서는 font-family 속성을 사용합니다. 이 속성은 웹 페이지에서 사용할 폰트 패밀리를 지정합니다. 여러 개의 글꼴을 지정하면 브라우저는 해당 글꼴이 사용자의 컴퓨터에 설치되어 있는지 확인하고, 설치되어 있지 않으면 다음으로 지정된 글꼴을 사용합니다.

**HTML:**
<span style="font-family: Arial, sans-serif;">Arial 글꼴</span>

**CSS:**
span {
  font-family: Arial, sans-serif;
}

위 예제에서는 Arial 글꼴을 텍스트에 적용합니다. sans-serif는 Arial이 사용자의 컴퓨터에 설치되어 있지 않을 경우, 대체로 사용되는 폰트 중 한 가지입니다.

5.2 글자 크기 조절하기

글자 크기를 조절하기 위해서는 font-size 속성을 사용합니다. 이 속성은 텍스트의 크기를 지정할 수 있습니다. 크기는 픽셀(px), 포인트(pt), 비율(rem, em) 등의 단위로 지정할 수 있습니다.

**HTML:**
<span style="font-size: 20px;">20px 크기의 텍스트</span>

**CSS:**
span {
  font-size: 20px;
}

위의 예제에서는 텍스트의 크기를 20px로 설정합니다.

5.3 글꼴 스타일 변경하기

글꼴의 스타일을 변경하기 위해서는 font-style 속성을 사용합니다. 이 속성은 텍스트에 이탤릭체를 적용하거나, 일반 글꼴로 표시할 수 있습니다.

**HTML:**
<span style="font-style: italic;">이탤릭체 텍스트</span>

**CSS:**
span {
  font-style: italic;
}

위 예제에서는 텍스트에 이탤릭체를 적용합니다.

5.4 글자 두께 조절하기

글자의 두께를 조절하기 위해서는 font-weight 속성을 사용합니다. 이 속성은 텍스트의 두께를 지정할 수 있습니다. 값으로는 숫자나 bold, normal을 사용할 수 있습니다.

**HTML:**
<span style="font-weight: bold;">굵은 텍스트</span>

**CSS:**
span {
  font-weight: bold;
}

위 예제에서는 텍스트를 굵게 표시합니다.

위 소주제에서는 글꼴, 글자 크기, 글꼴 스타일, 글자 두께 등의 기타 Font 스타일을 변경하는 방법에 대해 알아보았습니다. 이러한 속성들을 조합하여 원하는 텍스트 스타일을 만들 수 있습니다.

소주제: 기타 Font 스타일

텍스트에는 다양한 폰트 스타일을 적용할 수 있습니다. 이 소주제에서는 텍스트의 모양과 스타일을 변경할 수 있는 몇 가지 기타 Font 스타일에 대해 알아보겠습니다.

글꼴 설정하기

글꼴을 설정하기 위해서는 font-family 속성을 사용합니다. 이 속성은 웹 페이지에서 사용할 폰트 패밀리를 지정합니다. 웹 페이지에서 사용하려는 글꼴을 지정하고, 사용자의 컴퓨터에 해당 글꼴이 설치되어 있는지 확인합니다. 만약 해당 글꼴이 설치되어 있지 않으면, 대체로 사용되는 폰트 중 하나를 사용합니다. 폰트 패밀리는 쉼표로 구분하여 여러 개를 지정할 수 있습니다.

**HTML:**
<span style="font-family: Arial, sans-serif;">Arial 글꼴</span>

**CSS:**
span {
  font-family: Arial, sans-serif;
}

위 예제에서는 Arial 글꼴을 텍스트에 적용합니다. sans-serif는 Arial이 사용자의 컴퓨터에 설치되어 있지 않은 경우, 대체로 사용되는 폰트 중 하나입니다.

글자 크기 조절하기

글자 크기를 조절하기 위해서는 font-size 속성을 사용합니다. 이 속성을 사용하여 텍스트의 크기를 지정할 수 있습니다. 크기는 픽셀(px), 포인트(pt), 비율(rem, em) 등의 단위로 지정할 수 있습니다.

**HTML:**
<span style="font-size: 20px;">20px 크기의 텍스트</span>

**CSS:**
span {
  font-size: 20px;
}

위의 예제에서는 텍스트의 크기를 20px로 설정합니다.

글꼴 스타일 변경하기

글꼴의 스타일을 변경하기 위해서는 font-style 속성을 사용합니다. 텍스트에 이탤릭체를 적용하거나, 일반 글꼴로 표시할 수 있습니다.

**HTML:**
<span style="font-style: italic;">이탤릭체 텍스트</span>

**CSS:**
span {
  font-style: italic;
}

위 예제에서는 텍스트에 이탤릭체를 적용합니다.

글자 두께 조절하기

글자의 두께를 조절하기 위해서는 font-weight 속성을 사용합니다. 이 속성은 텍스트의 두께를 지정할 수 있으며, 값으로는 숫자나 bold, normal을 사용할 수 있습니다.

**HTML:**
<span style="font-weight: bold;">굵은 텍스트</span>

**CSS:**
span {
  font-weight: bold;
}

위 예제에서는 텍스트를 굵게 표시합니다.

위의 소주제에서는 글꼴, 글자 크기, 글꼴 스타일, 글자 두께 등의 기타 Font 스타일을 변경하는 방법에 대해 알아보았습니다. 이러한 속성들을 조합하여 원하는 텍스트 스타일을 만들 수 있습니다.

소주제: 기타 Font 스타일

글꼴 설정하기

글꼴을 설정하기 위해서는 font-family 속성을 사용합니다. 이 속성은 웹 페이지에서 사용할 폰트 패밀리를 지정합니다. 웹 페이지에서 사용하려는 글꼴을 지정하고, 사용자의 컴퓨터에 해당 글꼴이 설치되어 있는지 확인합니다. 만약 해당 글꼴이 설치되어 있지 않으면, 대체로 사용되는 폰트 중 하나를 사용합니다. 폰트 패밀리는 쉼표로 구분하여 여러 개를 지정할 수 있습니다.

HTML:

<span style="font-family: Arial, sans-serif;">Arial 글꼴</span>

CSS:

span {
  font-family: Arial, sans-serif;
}

위 예제에서는 Arial 글꼴을 텍스트에 적용합니다. sans-serif는 Arial이 사용자의 컴퓨터에 설치되어 있지 않은 경우, 대체로 사용되는 폰트 중 하나입니다.

글자 크기 조절하기

글자 크기를 조절하기 위해서는 font-size 속성을 사용합니다. 이 속성을 사용하여 텍스트의 크기를 지정할 수 있습니다. 크기는 픽셀(px), 포인트(pt), 비율(rem, em) 등의 단위로 지정할 수 있습니다.

HTML:

<span style="font-size: 20px;">20px 크기의 텍스트</span>

CSS:

span {
  font-size: 20px;
}

위의 예제에서는 텍스트의 크기를 20px로 설정합니다.

글꼴 스타일 변경하기

글꼴의 스타일을 변경하기 위해서는 font-style 속성을 사용합니다. 텍스트에 이탤릭체를 적용하거나, 일반 글꼴로 표시할 수 있습니다.

HTML:

<span style="font-style: italic;">이탤릭체 텍스트</span>

CSS:

span {
  font-style: italic;
}

위 예제에서는 텍스트에 이탤릭체를 적용합니다.

글자 두께 조절하기

글자의 두께를 조절하기 위해서는 font-weight 속성을 사용합니다. 이 속성은 텍스트의 두께를 지정할 수 있으며, 값으로는 숫자나 bold, normal을 사용할 수 있습니다.

HTML:

<span style="font-weight: bold;">굵은 텍스트</span>

CSS:

span {
  font-weight: bold;
}

위 예제에서는 텍스트를 굵게 표시합니다.

위의 소주제에서는 글꼴, 글자 크기, 글꼴 스타일, 글자 두께 등의 기타 Font 스타일을 변경하는 방법에 대해 알아보았습니다. 이러한 속성들을 조합하여 원하는 텍스트 스타일을 만들 수 있습니다.