initial commit

1 files changed, 283 insertions, 0 deletions

diff --git a/files/ko/web/css/font-weight/index.html b/files/ko/web/css/font-weight/index.html
new file mode 100644
index 0000000000..bc3ff93c1c
--- /dev/null
+++ b/files/ko/web/css/font-weight/index.html
@@ -0,0 +1,283 @@
+---
+title: font-weight
+slug: Web/CSS/font-weight
+translation_of: Web/CSS/font-weight
+---
+<div>{{CSSRef}}</div>
+
+<h2 id="요약">요약</h2>
+
+<p><strong><code>font-weight</code></strong> <a href="/en-US/docs/CSS" title="CSS">CSS</a> 속성은 폰트(font)의 가중치(weight)나 굵기(boldness)를 명시한다. 몇몇 폰트들은 <code>normal</code> 나 <code>bold</code> 일 때만 가능하다. </p>
+
+<p>{{cssinfo}}</p>
+
+<h2 id="구문">구문</h2>
+
+<pre class="brush:css">font-weight: normal;
+font-weight: bold;
+
+/* Relative to the parent */
+font-weight: lighter;
+font-weight: bolder;
+
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;
+font-weight: 800;
+font-weight: 900;
+
+/* Global values */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+</pre>
+
+<h3 id="값">값</h3>
+
+<dl>
+ <dt><code>normal</code></dt>
+ <dd>보통 폰트 가중치. <code>400</code> 과 같음.</dd>
+ <dt><code>bold</code></dt>
+ <dd>굵은 폰트 가중치. <code>700</code> 과 같음.</dd>
+ <dt><code>lighter</code></dt>
+ <dd>(가능한 폰트 가중치 중) 부모 요소(element) 보다 얇은 폰트 가중치.</dd>
+ <dt><code>bolder</code></dt>
+ <dd>(가능한 폰트 가중치 중) 부모 요소 보다 굵은 폰트 가중치.</dd>
+ <dt><code>100</code>, <code>200</code>, <code>300</code>, <code>400</code>, <code>500</code>, <code>600</code>, <code>700</code>, <code>800</code>, <code>900</code></dt>
+ <dd>normal 과 bold 이외를 제공하는 폰트를 위한 숫자형 폰트 가중치.</dd>
+</dl>
+
+<h3 id="대비책(Fallback)">대비책(Fallback)</h3>
+
+<p>만약 정확히 주어진 가중치를 사용할 수없다면, 실제로 렌더링 되는 가중치를 결정하기 위해 다음과 같은 경험적 접근이 적용된다:</p>
+
+<ul>
+ <li>만약 <code>500</code> 초과의 가중치가 주어지면, 가능한 굵은(darker) 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 얇은(lighter) 가중치 중 가장 가까운 것).</li>
+ <li>만약 <code>400</code> 미만의 가중치가 주어지면, 가능한 얇은 가중치 중 가장 가까운 것이 사용된다 (만약 없다면, 굵은 가중치 중 가장 가까운 것).</li>
+ <li>만약 가중치가 <code>400</code> 이 주어지면, <code>500</code> 이 사용된다. 만약 <code>500</code> 이 불가능하면, <code>500</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li>
+ <li>만약 가중치가 <code>500</code> 이 주어지면, <code>400</code> 이 사용된다. 만약 <code>400</code> 이 불가능하면, <code>400</code> 미만의 폰트 가중치를 위한 경험적 접근이 사용된다.</li>
+</ul>
+
+<p>이것은 <code>normal</code> 과 <code>bold</code> 만 지원하는 폰트일 경우, 100-500 은 normal, 600-900 은 bold 임을 의미한다.</p>
+
+<h3 id="상대적_가중치의_의미">상대적 가중치의 의미</h3>
+
+<p><code>lighter</code> 나 <code>bolder</code> 가 주어진 경우, 요소의 절대적인 가중치를 계산하기 위해 다음 차트가 사용된다:</p>
+
+<table>
+ <thead>
+  <tr>
+   <th>상속된 값</th>
+   <th><code>bolder</code></th>
+   <th><code>lighter</code></th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <th>100</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>200</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>300</th>
+   <td>400</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>400</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>500</th>
+   <td>700</td>
+   <td>100</td>
+  </tr>
+  <tr>
+   <th>600</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>700</th>
+   <td>900</td>
+   <td>400</td>
+  </tr>
+  <tr>
+   <th>800</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+  <tr>
+   <th>900</th>
+   <td>900</td>
+   <td>700</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="일반적인_가중치_이름_매핑">일반적인 가중치 이름 매핑</h3>
+
+<p>100~900 의 가중치 값들은 다음의 일반적인 두께 이름으로 대응된다:</p>
+
+<dl>
+ <dt><code>100</code></dt>
+ <dd>Thin (Hairline)</dd>
+ <dt><code>200</code></dt>
+ <dd>Extra Light (Ultra Light)</dd>
+ <dt><code>300</code></dt>
+ <dd>Light</dd>
+ <dt><code>400</code></dt>
+ <dd>Normal</dd>
+ <dt><code>500</code></dt>
+ <dd>Medium</dd>
+ <dt><code>600</code></dt>
+ <dd>Semi Bold (Demi Bold)</dd>
+ <dt><code>700</code></dt>
+ <dd>Bold</dd>
+ <dt><code>800</code></dt>
+ <dd>Extra Bold (Ultra Bold)</dd>
+ <dt><code>900</code></dt>
+ <dd>Black (Heavy)</dd>
+</dl>
+
+<h3 id="보간">보간</h3>
+
+<p><code>font-weight</code> 값은 100 단위로 보간된다. 보간은 실수 공간에서 이루어지며 100의 배수에 가까운 값으로 어림한다. 100의 배수 중간의 값들은 양의 무한대 방향의 가까운 값으로 어림한다.</p>
+
+<h3 id="형식_구문">형식 구문</h3>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<h2 id="Examples" name="Examples">예제</h2>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;p&gt;
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, 'and what is the use of a book,' thought Alice 'without pictures or
+  conversations?'
+&lt;/p&gt;
+
+&lt;div&gt;I'm heavy&lt;br/&gt;
+  &lt;span&gt;I'm lighter&lt;/span&gt;
+&lt;/div&gt;
+</pre>
+
+<h3 id="CSS">CSS</h3>
+
+<pre class="brush:css">/* Set paragraph text to be bold. */
+p {
+  font-weight: bold;
+}
+
+/* Set div text to two steps darker than
+   normal but less than a standard bold. */
+div {
+ font-weight: 600;
+}
+
+/* Sets text enclosed within span tag
+   to be one step lighter than the parent. */
+span {
+  font-weight: lighter;
+}</pre>
+
+<h3 id="결과">결과</h3>
+
+<p>{{EmbedLiveSample("Examples","400","300")}}</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-weight-prop', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Fonts')}}</td>
+   <td>변경사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'font-weight')}}</td>
+   <td>{{Spec2('CSS3 Transitions')}}</td>
+   <td><code>font-weight</code> 이 animatable 로 정의됨</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS2.1')}}</td>
+   <td>변경사항 없음</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
+   <td>{{Spec2('CSS1')}}</td>
+   <td>초기 정의</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="브라우저_호환성">브라우저 호환성</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.0</td>
+   <td>{{CompatGeckoDesktop(1.0)}}</td>
+   <td>3.0</td>
+   <td>3.5</td>
+   <td>1.3</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>1.0</td>
+   <td>{{CompatGeckoMobile(1.0)}}</td>
+   <td>6.0</td>
+   <td>6.0</td>
+   <td>3.1</td>
+  </tr>
+ </tbody>
+</table>
+</div>