diff options
Diffstat (limited to 'files/ko/web/css/font')
| -rw-r--r-- | files/ko/web/css/font/index.html | 345 |
1 files changed, 345 insertions, 0 deletions
diff --git a/files/ko/web/css/font/index.html b/files/ko/web/css/font/index.html new file mode 100644 index 0000000000..209669ed77 --- /dev/null +++ b/files/ko/web/css/font/index.html @@ -0,0 +1,345 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference +translation_of: Web/CSS/font +--- +<div>{{CSSRef}}</div> + +<p><strong><code>font</code></strong> CSS 속성은 {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, {{cssxref("font-family")}}의 <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>입니다. 요소의 글꼴을 시스템 폰트로 설정할 수도 있습니다.</p> + +<div>{{EmbedInteractiveExample("pages/css/font.html")}}</div> + + + +<p>다른 단축 속성과 마찬가지로, 생략한 속성은 초기값으로 설정하며 이 과정에서 다른 속성으로 설정한 값을 덮어 쓸 수도 있습니다. <code>font</code> 속성으로 설정할 수 없는 {{cssxref("font-stretch")}}, {{ cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}}의 값도 초기값으로 돌아갑니다.</p> + +<h2 id="구문">구문</h2> + +<p><code>font</code> 속성은 하나의 키워드를 지정해 시스템 폰트를 사용하도록 설정할 수도 있고, 여러 글꼴 관련 속성의 단축 속성으로도 사용할 수 있습니다.</p> + +<p><code>font</code>를 시스템 폰트 키워드로 사용하려면 <code>{{anch("caption")}}</code>, <code>{{anch("icon")}}</code>, <code>{{anch("menu")}}</code>, <code>{{anch("message-box")}}</code>, <code>{{anch("small-caption")}}</code>, <code>{{anch("status-bar")}}</code> 중 하나를 사용해야 합니다.</p> + +<p><code>font</code>를 단축 속성으로 사용하려면,</p> + +<ul> + <li>다음 속성의 값을 포함해야 합니다. + <ul> + <li>{{cssxref("<font-size>")}}</li> + <li>{{cssxref("<font-family>")}}</li> + </ul> + </li> + <li>다음 속성의 값을 포함할 수 있습니다. + <ul> + <li>{{cssxref("<font-style>")}}</li> + <li>{{cssxref("<font-variant>")}}</li> + <li>{{cssxref("<font-weight>")}}</li> + <li>{{cssxref("<line-height>")}}</li> + </ul> + </li> + <li><code>font-style</code>, <code>font-variant</code>, <code>font-weight</code>는 <code>font-size</code>의 앞에 와야 합니다.</li> + <li><code>font-variant</code>는 CSS 2.1에서 정의한 <code>normal</code>과 <code>small-caps</code>만 사용할 수 있습니다.</li> + <li><code>line-height</code>는 <code>font-size</code> 바로 다음에 와야 하며 "/"로 구분해야 합니다. 예: "<code>16px/3</code>"</li> + <li><code>font-family</code>는 마지막 값이어야 합니다.</li> +</ul> + +<h3 id="값">값</h3> + +<dl> + <dt id="<'font-style'>"><code><'font-style'></code></dt> + <dd>{{cssxref("font-style")}} 참고</dd> + <dt id="<'font-variant'>"><code><'font-variant'></code></dt> + <dd>{{cssxref("font-variant")}} 참고</dd> + <dt id="<'font-weight'>"><code><'font-weight'></code></dt> + <dd>{{cssxref("font-weight")}} 참고</dd> + <dt id="<'font-stretch'>"><code><'font-stretch'></code></dt> + <dd>{{cssxref("font-stretch")}} 참고</dd> + <dt id="<'font-size'>"><code><'font-size'></code></dt> + <dd>{{cssxref("font-size")}} 참고</dd> + <dt id="<'line-height'>"><code><'line-height'></code></dt> + <dd>{{cssxref("line-height")}} 참고</dd> + <dt id="<'font-family'>"><code><'font-family'></code></dt> + <dd>{{cssxref("font-family")}} 참고</dd> +</dl> + +<h4 id="시스템_폰트_키워드">시스템 폰트 키워드</h4> + +<dl> + <dt id="caption"><code>caption</code></dt> + <dd>버튼, 드랍다운 메뉴 등 설명이 붙은 컨트롤에 사용하는 시스템 폰트.</dd> + <dt id="icon"><code>icon</code></dt> + <dd>아이콘 이름에 사용하는 시스템 폰트.</dd> + <dt id="menu"><code>menu</code></dt> + <dd>드랍다운 메뉴, 메뉴 리스트 등 메뉴에서 사용하는 시스템 폰트.</dd> + <dt id="message-box"><code>message-box</code></dt> + <dd>다이얼로그 창에 사용하는 폰트.</dd> + <dt id="small-caption"><code>small-caption</code></dt> + <dd>소형 컨트롤에 사용하는 시스템 폰트.</dd> + <dt id="status-bar"><code>status-bar</code></dt> + <dd>창의 상태표시줄에 사용하는 시스템 폰트.</dd> + <dt>추가 시스템 폰트 키워드</dt> + <dd>각 브라우저마다 더 많은 키워드를 접두사와 함께 구현하고 있습니다. Gecko는 <code>-moz-window</code>, <code>-moz-document</code>, <code>-moz-desktop</code>, <code>-moz-info</code>, <code>-moz-dialog</code>, <code>-moz-button</code>, <code>-moz-pull-down-menu</code>, <code>-moz-list</code>, <code>-moz-field</code>를 가지고 있습니다.</dd> +</dl> + +<h3 id="형식_구문">형식 구문</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예제">예제</h2> + +<pre class="brush: css">/* 글씨 크기 12픽셀, 줄 높이 14픽셀, 글꼴 sans-serif */ +p { font: 12px/14px sans-serif } + +/* 글씨 크기 부모 또는 기본값(부모가 없을 경우)의 80%, 글꼴 sans-serif */ +p { font: 80% sans-serif } + +/* 글씨 굵기 굵게, 스타일 기울이기, 글씨 크기 크게, 글꼴 serif */ +p { font: bold italic large serif } + +/* 창의 상태표시줄과 같은 글꼴 사용 */ +p { font: status-bar } +</pre> + +<p id="HTML_Content" style="display: none;">HTML Content</p> + +<pre class="brush: html" style="display: none;"><p> + Change the radio buttons below to see the generated shorthand and it's effect. +</p> +<form action="createShortHand()"> + <div class="cf"> + <div class="setPropCont"> + font-style<br/> + <input type="radio" id="font-style-none" name="font_style" checked="" value="" onchange="setCss()"> <label for="font-style-none">none</label><br/> + <input type="radio" id="font-style-normal" name="font_style" value="normal" onchange="setCss()"> <label for="font-style-normal">normal</label><br/> + <input type="radio" id="font-style-italic" name="font_style" value="italic" onchange="setCss()"> <label for="font-style-italic">italic</label><br/> + <input type="radio" id="font-style-oblique" name="font_style" value="oblique" onchange="setCss()"> <label for="font-style-oblique">oblique</label> + </div> + + <div class="setPropCont"> + font-variant<br> + <input type="radio" id="font-variant-none" name="font_variant" checked="" value=" " onchange="setCss()"> <label for="font-variant-none">none</label><br/> + <input type="radio" id="font-variant-normal" name="font_variant" value="normal" onchange="setCss()"> <label for="font-variant-normal">normal</label><br/> + <input type="radio" id="font-variant-small-caps" name="font_variant" value="small-caps" onchange="setCss()"> <label for="font-variant-small-caps">small-caps</label> + </div> + + <div class="setPropCont"> + font-weight<br/> + <input type="radio" id="font-weight-none" name="font_weight" value="" onchange="setCss()"> <label for="font-weight-none">none</label><br/> + <input type="radio" id="font-weight-normal" checked="" name="font_weight" value="400" onchange="setCss()"> <label for="font-weight-normal">normal</label><br/> + <input type="radio" id="font-weight-bold" name="font_weight" value="700" onchange="setCss()"> <label for="font-weight-bold">bold</label> + </div> + + <div class="setPropCont"> + font-size<br/> + <input type="radio" id="font-size-12px" name="font_size" value="12px" onchange="setCss()"> <label for="font-size-12px">12px</label><br/> + <input type="radio" id="font-size-16px" name="font_size" value="16px" checked="" onchange="setCss()"> <label for="font-size-16px">16px</label><br/> + <input type="radio" id="font-size-24px" name="font_size" value="24px" onchange="setCss()"> <label for="font-size-24px">24px</label> + </div> + + <div class="setPropCont"> + line-height<br/> + <input type="radio" id="line-height-none" name="line_height" checked="" value="" onchange="setCss()"> <label for="line-height-none">none</label><br/> + <input type="radio" id="line-height-1.2" name="line_height" value="/1.2" onchange="setCss()"> <label for="line-height-1.2">1.2</label><br/> + <input type="radio" id="line-height-3" name="line_height" value="/3" onchange="setCss()"> <label for="line-height-3">3</label> + </div><br/> + + <div class="setPropCont fontfamily"> + font-family<br/> + <input type="radio" id="font-family-courier" name="font_family" checked="" value="courier" onchange="setCss(5,'courier')"> <label for="font-family-courier">courier</label><br/> <input type="radio" id="font-family-serif" name="font_family" value="serif" onchange="setCss()"> <label for="font-family-serif">serif</label><br /> + <input type="radio" id="font-family-sans-serif" name="font_family" value="sans-serif" onchange="setCss()"> <label for="font-family-sans-serif">sans-serif</label><br /> <input type="radio" id="font-family-arial" name="font_family" value="arial" onchange="setCss()"> <label for="font-family-arial">Arial</label><br /> + <input type="radio" id="font-family-monospace" name="font_family" value="monospace" onchange="setCss()"> <label for="font-family-monospace">monospace</label><br /> <input type="radio" id="font-family-cursive" name="font_family" value="cursive" onchange="setCss()"> <label for="font-family-cursive">cursive</label><br /> + <input type="radio" id="font-family-fantasy" name="font_family" value="fantasy" onchange="setCss()"> <label for="font-family-fantasy">fantasy</label><br /> <input type="radio" id="font-family-system-ui" name="font_family" value="system-ui" onchange="setCss()"> <label for="font-family-system-ui">system-ui</label><br /> + </div> + </div> + + <div class="cf propInputs"> + <div class="propInputCont tar"> + font : + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_style"><br/> + font-style <br/> + optional + + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_variant"> <br/> + font-variant <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_font_weight"> <br/> + font-weight <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_size"> <br/> + font-size <br/> + mandatory + </div> + <div class="propInputCont"> + <input type="text" class="curCss" id="input_line_height"> <br/> + line-height <br/> + optional + </div> + <div class="propInputCont"> + <input type="text" class="curCss mandatory" id="input_font_family"> <br/> + font-family <br/> + mandatory + </div> + </div> +</form> + +<div class="fontShortHand"> + This is some sample text. +</div> +<br/><br/><br/><br/><br/><br/> +</pre> + +<p id="CSS_Content" style="display: none;">CSS Content</p> + +<pre class="brush: css" style="display: none;">body, input { + font: 14px arial; + overflow: hidden; +} + +.propInputCont { + float: left; + text-align: center; + margin-right: 5px; + width: 80px; +} + +.setPropCont { + float: left; + margin-right: 5px; + width: 120px; +} + +.propInputs, .setPropCont { + margin-bottom: 1em; +} + +.curCss { + border: none; + border-bottom: 1px solid black; + text-align: center; + width: 80px; +} + +.mandatory { + border-bottom-color: red; +} + +.cf:before, +.cf:after { + content: " "; + display: table; +} + +.cf:after { + clear: both; +} + +.tar { + width: 40px; + text-align: right; +} +.fontfamily { + display: inline-block; +}</pre> + +<p id="JavaScript_Content" style="display: none;">JavaScript Content</p> + +<pre class="brush: js" style="display: none;">var textAreas = document.getElementsByClassName("curCss"), + shortText = "", + getCheckedValue, + setCss, + getProperties, + injectCss; + +getProperties = function () { + shortText = + getCheckedValue("font_style") + " " + + getCheckedValue("font_variant") + " " + + getCheckedValue("font_weight") + " " + + getCheckedValue("font_size") + + getCheckedValue("line_height") + " " + + getCheckedValue("font_family"); + + return shortText; +} + +getCheckedValue = function(radio_name) { + oRadio = document.forms[0].elements[radio_name]; + for (var i = 0; i < oRadio.length; i++) { + if(oRadio[i].checked) { + var propInput = "input_" + radio_name, + curElemName = "input_" + radio_name, + curElem = document.getElementById(curElemName); + curElem.value = oRadio[i].value; + + return oRadio[i].value; + } + } +} + +setCss = function () { + getProperties(); + injectCss(shortText); +} + +injectCss = function(cssFragment) { + old = document.body.getElementsByTagName("style"); + if (old.length > 1) { + old[1].parentElement.removeChild(old[1]); + } + css = document.createElement("style"); + css.innerHTML = ".fontShortHand{font: " + cssFragment + "}"; + document.body.appendChild(css); +} + +setCss();</pre> + +<p>{{ EmbedLiveSample('예제','100%', '380px')}}</p> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Fonts', '#font-prop', 'font')}}</td> + <td>{{ Spec2('CSS3 Fonts')}}</td> + <td>Added support for <code>font-stretch</code> values.</td> + </tr> + <tr> + <td>{{ SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}</td> + <td>{{ Spec2('CSS2.1')}}</td> + <td>Added support for keywords.</td> + </tr> + <tr> + <td>{{ SpecName('CSS1', '#font', 'font')}}</td> + <td>{{ Spec2('CSS1')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<p>{{cssinfo}}</p> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + + + +<p>{{Compat("css.properties.font")}}</p> |