Css font - 편집 역사

Devcafe: /* CSS 폰트 관련 주요 속성 정리 */

2025-06-30T16:04:30Z

CSS 폰트 관련 주요 속성 정리

← 이전 판		2025년 7월 1일 (화) 01:04 판
3번째 줄:		3번째 줄:
	== CSS 폰트 관련 주요 속성 정리 ==		== CSS 폰트 관련 주요 속성 정리 ==

	; font-family		=== font-family ===
	: 글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다.		: 글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다.
	: 예) <code>font-family: '맑은 고딕', Malgun Gothic, Arial, sans-serif;</code>		: 예) <code>font-family: '맑은 고딕', Malgun Gothic, Arial, sans-serif;</code>

	; font-size		=== font-size ===

	: 글자의 크기를 지정합니다. px, em, %, rem 등 다양한 단위를 사용할 수 있습니다.		: 글자의 크기를 지정합니다. px, em, %, rem 등 다양한 단위를 사용할 수 있습니다.
	: 예) <code>font-size: 16px;</code> <code>font-size: 1.2em;</code>		: 예) <code>font-size: 16px;</code> <code>font-size: 1.2em;</code>

	; font-weight		=== font-weight ===
	: 글자의 굵기를 지정합니다. normal, bold, 100~900의 숫자 값 등으로 표기할 수 있습니다.		: 글자의 굵기를 지정합니다. normal, bold, 100~900의 숫자 값 등으로 표기할 수 있습니다.
	: 예) <code>font-weight: bold;</code> <code>font-weight: 700;</code>		: 예) <code>font-weight: bold;</code> <code>font-weight: 700;</code>

	; font-style		=== font-style ===
	: 글자의 스타일을 지정합니다. 일반적으로 normal(기본), italic(이탤릭체), oblique(기울임체) 등이 있습니다.		: 글자의 스타일을 지정합니다. 일반적으로 normal(기본), italic(이탤릭체), oblique(기울임체) 등이 있습니다.
	: 예) <code>font-style: italic;</code>		: 예) <code>font-style: italic;</code>

	; font-variant		=== font-variant ===
	: 글자의 변형을 지정합니다. 주로 <code>small-caps</code>를 사용해 소문자를 작은 대문자로 변환할 때 사용합니다.		: 글자의 변형을 지정합니다. 주로 <code>small-caps</code>를 사용해 소문자를 작은 대문자로 변환할 때 사용합니다.
	: 예) <code>font-variant: small-caps;</code>		: 예) <code>font-variant: small-caps;</code>

	; font-stretch		=== font-stretch ===
	: 글꼴의 가로 너비를 늘이거나 줄입니다. normal, condensed, expanded 등 다양한 값이 있습니다.		: 글꼴의 가로 너비를 늘이거나 줄입니다. normal, condensed, expanded 등 다양한 값이 있습니다.
	: 예) <code>font-stretch: condensed;</code>		: 예) <code>font-stretch: condensed;</code>

	; line-height		=== line-height ===
	: 줄 간격(행간)을 조정합니다. 숫자, 퍼센트, 단위(px, em 등)로 지정할 수 있습니다.		: 줄 간격(행간)을 조정합니다. 숫자, 퍼센트, 단위(px, em 등)로 지정할 수 있습니다.
	: 예) <code>line-height: 1.5;</code> <code>line-height: 24px;</code>		: 예) <code>line-height: 1.5;</code> <code>line-height: 24px;</code>

	; font		=== font ===
	: 위의 여러 속성을 한 줄로 요약해서 지정할 수 있는 단축 속성입니다.		: 위의 여러 속성을 한 줄로 요약해서 지정할 수 있는 단축 속성입니다.
	: 예) <code>font: italic bold 16px/1.5 'Malgun Gothic', Arial, sans-serif;</code>		: 예) <code>font: italic bold 16px/1.5 'Malgun Gothic', Arial, sans-serif;</code>




	== CSS 길이 및 폰트 크기 단위 설명 ==		== CSS 길이 및 폰트 크기 단위 설명 ==

Devcafe: /* font-size 의 em 단위의 의미 */

2025-06-30T16:02:19Z

font-size 의 em 단위의 의미

@@ 35번째 줄: / 35번째 줄: @@
 : 예) <code>font: italic bold 16px/1.5 'Malgun Gothic', Arial, sans-serif;</code>
 == font-size 의 em 단위의 의미 ==
 ; 의미
 : em은 CSS에서 폰트 크기를 지정할 때 사용하는 상대적인 단위입니다. 현재 요소의 폰트 크기를 기준으로 배수로 크기를 지정합니다.
@@ 52번째 줄: / 58번째 줄: @@
 : em 단위는 상속의 영향을 받으므로, 여러 단계로 중첩되면 누적되어 계산될 수 있습니다.
 : 상대적인 크기를 지정하는 데 유용하며, 글자 크기, 여백(margin/padding) 등 다양한 속성에서 사용됩니다.

2025년 6월 30일 (월) 15:54에 Devcafe님의 편집

2025-06-30T15:54:51Z

← 이전 판		2025년 7월 1일 (화) 00:54 판
1번째 줄:		1번째 줄:
	~~네, 요청하신 내용을 미디어위키 양식으로 아래와 같이 정리해 드리겠습니다.~~

	== css font 속성 ==		== css font 속성 ==
	~~네, CSS에서 글꼴(font)과 관련된 주요 속성들을 미디어위키 양식으로 정리해 드리겠습니다.~~

	~~---~~

	== CSS 폰트 관련 주요 속성 정리 ==		== CSS 폰트 관련 주요 속성 정리 ==

Devcafe: 새 문서: 네, 요청하신 내용을 미디어위키 양식으로 아래와 같이 정리해 드리겠습니다. == css font 속성 == 네, CSS에서 글꼴(font)과 관련된 주요 속성들을 미디어위키 양식으로 정리해 드리겠습니다. --- == CSS 폰트 관련 주요 속성 정리 == ; font-family : 글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다. : 예) `font-family: '맑은 고딕', Malgun Gothic...`


2025-06-30T15:53:28Z
새 문서: 네, 요청하신 내용을 미디어위키 양식으로 아래와 같이 정리해 드리겠습니다.  == css font 속성 == 네, CSS에서 글꼴(font)과 관련된 주요 속성들을 미디어위키 양식으로 정리해 드리겠습니다.  ---  == CSS 폰트 관련 주요 속성 정리 ==  ; font-family : 글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다. : 예) <code>font-family: '맑은 고딕', Malgun Gothic...
새 문서
네, 요청하신 내용을 미디어위키 양식으로 아래와 같이 정리해 드리겠습니다.



== css font 속성 ==

네, CSS에서 글꼴(font)과 관련된 주요 속성들을 미디어위키 양식으로 정리해 드리겠습니다.



---



== CSS 폰트 관련 주요 속성 정리 ==



; font-family

: 글꼴의 종류를 지정합니다. 여러 개를 쉼표로 구분해서 우선순위를 줄 수 있습니다.

: 예) <code>font-family: '맑은 고딕', Malgun Gothic, Arial, sans-serif;</code>



; font-size

: 글자의 크기를 지정합니다. px, em, %, rem 등 다양한 단위를 사용할 수 있습니다.

: 예) <code>font-size: 16px;</code> <code>font-size: 1.2em;</code>



; font-weight

: 글자의 굵기를 지정합니다. normal, bold, 100~900의 숫자 값 등으로 표기할 수 있습니다.

: 예) <code>font-weight: bold;</code> <code>font-weight: 700;</code>



; font-style

: 글자의 스타일을 지정합니다. 일반적으로 normal(기본), italic(이탤릭체), oblique(기울임체) 등이 있습니다.

: 예) <code>font-style: italic;</code>



; font-variant

: 글자의 변형을 지정합니다. 주로 <code>small-caps</code>를 사용해 소문자를 작은 대문자로 변환할 때 사용합니다.

: 예) <code>font-variant: small-caps;</code>



; font-stretch

: 글꼴의 가로 너비를 늘이거나 줄입니다. normal, condensed, expanded 등 다양한 값이 있습니다.

: 예) <code>font-stretch: condensed;</code>



; line-height

: 줄 간격(행간)을 조정합니다. 숫자, 퍼센트, 단위(px, em 등)로 지정할 수 있습니다.

: 예) <code>line-height: 1.5;</code> <code>line-height: 24px;</code>



; font

: 위의 여러 속성을 한 줄로 요약해서 지정할 수 있는 단축 속성입니다.

: 예) <code>font: italic bold 16px/1.5 'Malgun Gothic', Arial, sans-serif;</code>





== font-size 의 em 단위의 의미 ==



; 의미

: em은 CSS에서 폰트 크기를 지정할 때 사용하는 상대적인 단위입니다. 현재 요소의 폰트 크기를 기준으로 배수로 크기를 지정합니다.

: 예를 들어, <code>font-size: 1.35em</code>이라고 하면, 이 요소의 폰트 크기는 상위 요소 혹은 본문의 폰트 크기에 1.35를 곱한 값이 됩니다.



; 예시

: 상위 요소의 <code>font-size</code>가 16px일 때,

  <pre>

font-size: 1.35em;

  </pre>

: 라고 지정하면, 16px × 1.35 = '''21.6px'''이 됩니다.



; 추가 설명

: em 단위는 상속의 영향을 받으므로, 여러 단계로 중첩되면 누적되어 계산될 수 있습니다.

: 상대적인 크기를 지정하는 데 유용하며, 글자 크기, 여백(margin/padding) 등 다양한 속성에서 사용됩니다.