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

사용자 도구

사이트 도구

현재 위치: start » wiki » css » css_note » css_fonts
wiki:css:css_note:css_fonts

차이

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

차이 보기로 링크

양쪽 이전 판 이전 판
다음 판 		이전 판
wiki:css:css_note:css_fonts [2021/03/08 18:30]
emblim98 		wiki:css:css_note:css_fonts [2023/01/13 18:44] (현재)
줄 167: 줄 167:
 \\ \\
 \\ \\
-======CSS Font Size======+======CSS Font Size (폰트 크기)======
 ''font-size''속성은 텍스트의 크기를 설정합니다.\\ ''font-size''속성은 텍스트의 크기를 설정합니다.\\
 \\ \\
줄 209: 줄 209:
 \\ \\
 \\ \\
-======Set Font Size With Em====== +======Set Font Size With Em (em단위로 폰트 크기 설정하기)======
-사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.\\ +
-\\ +
-1em의 기본 크기는 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 단위를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.\\ +
-\\ +
-하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트, size, Google, Pairings, Shorthand +
- +
-======CSS Font Fallbacks====== +
-5개의 범용 글꼴 집합(Serif, Sans-serif, Monospace, Cursive, Fantasy)으로 구성되고 일반적으로 사용되는 fallback 폰트를\\  +
-[[https://www.w3schools.com/css/css_font_fallbacks.asp|CSS Font Fallbacks]]에서 참조하세요.\\ +
-\\ +
-\\ +
-======CSS Font Style===== +
-''font-style''속성은 이탤릭체의 텍스트를 지정하는 것에 주로 사용됩니다.\\ +
-\\ +
-''font-style''속성은 하기의 세 가지 값을 가집니다.\\ +
-  * normal - 텍스트가 정상적으로 표시됩니다. +
-  * italic - 텍스트가 이탤릭체로 표시됩니다.  +
-  * oblique - 텍스트가 기울어져 있습니다. (oblique는 이탤릭과 매우 유사하지만, 지원이 적습니다.) +
-====예제==== +
-<code css> +
-p.normal { +
-  font-style: normal; +
-} +
- +
-p.italic { +
-  font-style: italic; +
-} +
- +
-p.oblique { +
-  font-style: oblique; +
-} +
-</code> +
-\\ +
-\\ +
-=====Font Weight===== +
-''font-weight''속성은 폰트의 두께 (weight)를 지정합니다.\\ +
-====예제==== +
-<code css> +
-p.normal { +
-  font-weight: normal; +
-} +
- +
-p.thick { +
-  font-weight: bold; +
-} +
-</code> +
-\\ +
-\\ +
-=====Font Variant (폰트 변형)===== +
-''font-variant''속성은 텍스트가 'small-caps (소대문자(小大文字)) 폰트'로 표시되는 여부를 지정합니다.\\ +
-\\ +
-small-caps 폰트에서, 모든 소문자들은 대문자로 변환됩니다. 하지만, 변환된 대문자들은 기존 텍스트의 대문자보다 더 작은 폰트 크기로 보여집니다.\\ +
-====예제==== +
-<code css> +
-p.normal { +
-  font-variant: normal; +
-{ +
- +
-p.small { +
-  font-variant: small-caps; +
-} +
-</code> +
-\\ +
-\\ +
-======CSS Font Size====== +
-''font-size''속성은 텍스트의 크기를 설정합니다.\\ +
-\\ +
-웹 디자인에서 텍스트 크기를 조절할 수 있는 것은 중요합니다. 하지만, 문단을 제목처럼 보이게 만들거나, 제목을 문단처럼 보이도록 만들기 위해 폰트 크기 조정을 사용하지 말아야 합니다. \\ +
-\\ +
-항상 - 제목에는 <h1>~<h6>, 그리고 문장에는 <p>와 같은 - 적합한 HTML 태그를 사용합니다. \\ +
-\\ +
-폰트 크기 값은 absolute size 또는 relative size가 될 수 있습니다.\\ +
-\\ +
-**Absolute size:**\\ +
-  * 텍스트를 지정 크기로 설정합니다. +
-  * 사용자가 모든 브라우저에서 텍스크 크기를 변경하도록 허용하지 않습니다.(접근성 이유로 좋지 않습니다) +
-  * 출력의 물리적 크기를 알고 있는 경우에 유용합니다. +
-\\ +
-**Relative size:**\\ +
-  * 주위 요소들에 대한 상대적인 크기로 설정합니다.  +
-  * 사용자가 브라우저에서 텍스트 크기를 변경하도록 허용합니다. +
-\\ +
-**Note:**\\ +
-폰트 크기를 지정하지 않는 경우, 문장(단락)과 같은 일반 텍스트의 기본 크기는 16px(=1em)입니다.\\ +
-\\ +
-\\ +
-======Set Font Size With Pixels (픽셀로 폰트 크기 설정)====== +
-텍스트 크기를 픽셀로 설정하면, 텍스트 크기룰 완전히 제어할 수 있습니다.\\ +
-====예제==== +
-<code css> +
-h1 { +
-  font-size: 40px; +
-} +
- +
-h2 { +
-  font-size: 30px; +
-} +
- +
-p { +
-  font-size: 14px; +
-} +
-</code> +
-\\ +
-**Tip: 픽셀 단위 사용 시 줌 툴 (zoom tool)을 사용하여 전체 웹 페이지 크기를 조정할 수 있습니다.** +
-\\ +
-\\ +
-======Set Font Size With Em======+
 사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.\\ 사용자가 브라우저 메뉴에서 텍스트 크기 조절을 허용하기 위해, 개발자들이 픽셀 대신에 em단위를 사용합니다.\\
 \\ \\
줄 359: 줄 234:
 하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트는 더 크게 만들어졌을 때 보다 더 커지고, 더 작게 만들어졌을 때 보다 더 작아집니다.\\ 하지만, 인터넷 익스플로러의 이전 버번에서는 여전히 문제가 있습니다. 텍스트는 더 크게 만들어졌을 때 보다 더 커지고, 더 작게 만들어졌을 때 보다 더 작아집니다.\\
 \\ \\
-======Use a Combination of Percent and Em======+======Use a Combination of Percent and Em (percent와 em 단위 혼용 사용하기)======
 모든 브라우저에서 작동하는 해결책은 <body>요소에서 백분율로 기본 폰트 크기를 설정하고 em단위를 사용하는 것입니다.\\ 모든 브라우저에서 작동하는 해결책은 <body>요소에서 백분율로 기본 폰트 크기를 설정하고 em단위를 사용하는 것입니다.\\
 ====예제==== ====예제====
줄 396: 줄 271:
 \\ \\
 상기 예제는 모든 브라우저에서 동일한 텍스트 크기를 보여주고, 모든 브라우저상에서 텍스트를 zoom하거나 크기를 조절하는 것을 확인할 수 있습니다.\\ 상기 예제는 모든 브라우저에서 동일한 텍스트 크기를 보여주고, 모든 브라우저상에서 텍스트를 zoom하거나 크기를 조절하는 것을 확인할 수 있습니다.\\
 +\\
 \\ \\
 ======Responsive Font Size (반응형 폰트 크기)====== ======Responsive Font Size (반응형 폰트 크기)======
줄 405: 줄 281:
 </code> </code>
 \\ \\
-**Note:\\**+**Note:**\\
 **Viewport는 브라우저 창의 크기입니다. 1vw = 1% of viewport width. viewport가 50cm 너비이면, 1vw는 0.5cm입니다.** **Viewport는 브라우저 창의 크기입니다. 1vw = 1% of viewport width. viewport가 50cm 너비이면, 1vw는 0.5cm입니다.**
  
/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_fonts.1615195804.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)

문서 도구

별도로 명시하지 않을 경우, 이 위키의 내용은 다음 라이선스에 따라 사용할 수 있습니다: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki