문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== CSS Font Shorthand ======
<WRAP left notice 80%>
  * description : CSS Font Property 
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-03-08
</WRAP>
<WRAP clear></WRAP>
\\
\\
=====Source of the article==== 
  * [[https://www.w3schools.com/css/css_font_shorthand.asp|CSS Font Property]]
\\
\\
======CSS Font Property======
코드를 줄이기 위해, 하나의 속성에서 모든 개별 폰트 속성을 지정하는 것도 가능합니다.\\
\\
''font''속성은 하기의 속성들에 대한 shorthand 속성입니다.\\
  * ''font-style''
  * ''font-variant''
  * ''font-weight''
  * ''font-size/line-height''
  * ''font-family''
**Note:**\\
''font-size''와 ''font-family''값이 필요합니다. 다른 값 중 하나가 없는 경우, 기본 값이 사용됩니다.\\
====예제====
하나의 선언에서 여러 개의 폰트 속성들을 설정하기 위해 ''font''속성을 사용합니다.\\
<code html>
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>

<h1>The font Property</h1>

<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>

<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>

</body>
</html>
</code>
\\
\\
=====All CSS Font Properties=====
^ Property      ^ Description                        ^
| font          | 하나의 선언에서 모든 폰트 속성들을 설정합니다.         |
| font-family   | 텍스트를 위한 폰트 집합을 지정합니다.              |
| font-size     | 텍스트의 폰트 크기를 지정합니다.                 |
| font-style    | 텍스트의 폰트 스타일을 지정합니다                 |
| font-variant  | 텍스트가 small-caps 폰트로 표시 여부를 지정합니다.  |
| font-weight   | 한 폰트의 굵기를 지정합니다.                   |

  
{{tag>오션, CSS font property }}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구