wiki:css:css_note:css_fonts

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:css:css_note:css_fonts [2021/03/08 17:31]
emblim98
+++ wiki:css:css_note:css_fonts [2023/01/13 18:44] (현재)
@@ 줄 167: / 줄 167: @@
 \\
 \\
-======CSS Font Size======
+======CSS Font Size (폰트 크기)======
 ''font-size''속성은 텍스트의 크기를 설정합니다.\\
 \\
@@ 줄 209: / 줄 209: @@
 \\
 \\
-======Set Font Size With EM======
+======Set Font Size With Em (em단위로 폰트 크기 설정하기)======
+사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.\\
+\\
+em의 기본 크기는 16px입니다.\\
+\\
+pixels/16=em 공식을 사용하여 픽셀에서 em으로 사이즈를 계산할 수 있습니다.\\
+====예제====
+<code css>
+h1 {
+  font-size: 2.5em;  /* 40px/16=2.5em */
+}
+h2 {
+  font-size: 1.875em;  /* 30px/16=1.875em */
+}
+p {
+  font-size: 0.875em;  /* 14px/16=0.875em */
+}
+</code>
+\\
+상기 예제에서, em단위의 텍스트 크기는 픽셀 단위의 이전 예제와 동일합니다. 하지만, em 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.\\
+\\
+하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트는 더 크게 만들어졌을 때 보다 더 커지고, 더 작게 만들어졌을 때 보다 더 작아집니다.\\
+\\
+======Use a Combination of Percent and Em (percent와 em 단위 혼용 사용하기)======
+모든 브라우저에서 작동하는 해결책은 <body>요소에서 백분율로 기본 폰트 크기를 설정하고 em단위를 사용하는 것입니다.\\
+====예제====
+<code html>
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+  font-size: 100%;
+}
+h1 {
+  font-size: 2.5em;
+}
+h2 {
+  font-size: 1.875em;
+}
+p {
+  font-size: 0.875em;
+}
+</style>
+</head>
+<body>
+<h1>This is heading 1</h1>
+<h2>This is heading 2</h2>
+<p>This is a paragraph.</p>
+<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
+</body>
+</html>
+</code>
+\\
+상기 예제는 모든 브라우저에서 동일한 텍스트 크기를 보여주고, 모든 브라우저상에서 텍스트를 zoom하거나 크기를 조절하는 것을 확인할 수 있습니다.\\
+\\
+\\
+======Responsive Font Size (반응형 폰트 크기)======
+텍스트 크기는 ''vw (viewport width)''단위로 설정할 수 있습니다.\\
+이렇게 하면 텍스트 크기는 브라우저 창의 크기를 따릅니다.\\
+====예제====
+<code css>
+<h1 style="font-size:10vw">Hello World</h1>
+</code>
+\\
+**Note:**\\
+**Viewport는 브라우저 창의 크기입니다. 1vw = 1% of viewport width. viewport가 50cm 너비이면, 1vw는 0.5cm입니다.**

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_fonts.1615192307.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)