aboutsummaryrefslogtreecommitdiff
path: root/files/ko/web/css/시작하기/텍스트_스타일/index.html
diff options
context:
space:
mode:
Diffstat (limited to 'files/ko/web/css/시작하기/텍스트_스타일/index.html')
-rw-r--r--files/ko/web/css/시작하기/텍스트_스타일/index.html150
1 files changed, 0 insertions, 150 deletions
diff --git a/files/ko/web/css/시작하기/텍스트_스타일/index.html b/files/ko/web/css/시작하기/텍스트_스타일/index.html
deleted file mode 100644
index 8866132472..0000000000
--- a/files/ko/web/css/시작하기/텍스트_스타일/index.html
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: 텍스트 스타일
-slug: Web/CSS/시작하기/텍스트_스타일
-translation_of: Learn/CSS/Styling_text/Fundamentals
-translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>
-
-<p>{{previousPage("/en-US/docs/CSS/Getting_Started/Readable_CSS", "알기 쉬운 CSS")}}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기 </a>안내서 7번째 장; 여기서는 텍스트 스타일에 대해 좀더 많은 예를 살펴 보자. 예제 Stylesheet를 다른 글씨체로 바꿔 보자.</span></p>
-
-<h2 class="clearLeft" id="정보_텍스트_스타일">정보: 텍스트 스타일</h2>
-
-<p>CSS는 몇가지 텍스트 스타일에 대한 속성이 있다.</p>
-
-<p>여러가지에 대해 한번에 편리하게 사용할 수 있는 {{ cssxref("font") }}라는 속성에 대해 알아보자. 예를 들면</p>
-
-<ul>
- <li>굵게, 기울기, 작은 대문자체</li>
- <li>크기</li>
- <li>라인 높이</li>
- <li>글씨체</li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type">예제</div>
-
-<pre class="brush:css">p {font: italic 75%/125% "Comic Sans MS", cursive;}
-</pre>
-
-<p>위의 규칙은 모든 단락내용을 italic폰트로 설정 하는 등의 다양한 설정을 한다.</p>
-
-<p>폰트 크기를 부모 element의 단락 크기의 3/4크기로 하고 라인 크기를 보통보다 좀 큰 125%크기로 한다.</p>
-
-<p>글자체는 Comic Sans MS이다. 하지만 이 글씨체가 유효하지 않다면 브라우저는 기본 글씨체인 손글씨체를 사용 할 것이다.</p>
-
-<p>이 규칙에는 굵기와 작은 대문자 속성을 무력화 하는 오류를 포함하고 있다.</p>
-</div>
-
-<h3 id="글씨체">글씨체</h3>
-
-<p>보통 Document에서 가용한 글씨체에는 어떤 것이 있는지 알고 작성할 수는 없다. 대체 가능한 글씨체를 같이 설정 해 주는 것도 좋은 방법이다.</p>
-
-<p>맨 마지막에는 기본 글씨체<code>(serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> or <code>monospace</code>)를 추가 설정 해 주는 것이 좋다.</p>
-
-<p>만약 document에서 지원 하지 않는 글씨체라면 브라우저가 다른 글씨체로 대체 할 것이다. 예를 들면, Document내에는 설정된 글씨체에서 지원 되지 않는 특수 문자를 포함 하는 경우 같은 것을 말한다. 브라우저는 자동적으로 다른 글씨체에서 위의 특수문자를 지원 한다면 그 글씨체를 사용하여 표시 할 것이다.</p>
-
-<p>글씨체를 설정 하기 위해서는 {{ cssxref("font-family") }}속성을 사용 하라.</p>
-
-<h3 id="글씨_크기">글씨 크기</h3>
-
-<p>브라우저는 보여지고 있는 페이지의 기본 글씨체의 크기와 텍스트의 크기를 바꿀 수 있어서 사용자에 맞는 것을 사용 할 수 있게 해준다.</p>
-
-<p><code>폰트 크기는 small, medium, large등 정해진 사이즈도 사용할 수 있다</code>. 또한 부모 글씨체 크기와 비교된(smaller, larger, 150%, 1.5 em) 값으로 설정 가능하다. 'em'은 'm'자의 폭을 말한다. 따라서 부모 element보다 1.5배 크기의 글씨크기를 말한다.</p>
-
-<p><code>14px</code> (14 pixels)와 같이 표시장치나 출력장치의 실체 크기로 지정 할 수도 있다. 이 경우는 크기를 바꿀수 없으므로 시각장애인들에게 불편할 수 있다. 이런 경우를 위해서는 document의 최 상위 element에서부터 정해진 크기 값중 하나인 'medium'으로 해 놓으면 하위 element는 그와 비교해 상대적인 값으로 크기를 설정 할 수 있다.</p>
-
-<p>글씨 크기를 설정 하려면 {{ cssxref("font-size") }}를 사용하라.</p>
-
-<h3 id="줄_높이">줄 높이</h3>
-
-<p>Line height는 줄간 높이를 말한다. 단락이 여러줄로 구성되었다면 보통보다 큰(larger-than-normal) 간격이 특히 작은 글씨라면 읽기 편하다.</p>
-
-<p>줄 높이 설정은 {{ cssxref("line-height") }}속성을 사용하라.</p>
-
-<h3 id="장식(Decoration)">장식(Decoration)</h3>
-
-<p>별도의 {{ cssxref("text-decoration") }} 속성으로 밑줄, 취소선 같은 다른 스타일 설정 할 수 있다. 설정된 장식(Decoration)속성을 없애기 위해서 값을 none을 쓸 수 있다.</p>
-
-<h3 id="다른_속성">다른 속성</h3>
-
-<p>기울기 속성 {{ cssxref("font-style") }}<code>: italic;</code><br>
- 굵은 속성 <code>{{ cssxref("font-weight") }}: bold;</code><br>
- 작은 대문자 <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
-
-<p>위의 속성을 해제하려면 <code>normal</code> 또는 <code>inherit</code>로 설정하라.</p>
-
-<div class="tuto_details">
-<div class="tuto_type">좀더 자세히</div>
-
-<p>텍스트 스타일은 다양한 방법으로 설정 가능하다.</p>
-
-<p>예를 들면, 위에 언급한 속성들에 다른 사용 가능한 값들이 더 있다.</p>
-
-<p>복잡한 stylesheet에서는, 원치 않는 오류(설정 값이 다르게 나타나는 오류) 방지를 위해 약칭 <code>font 속성 사용을 피하라.</code></p>
-
-<p>글씨체에 관한 모든 속성을 보려면, CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a>부분을 보라. 다양한 텍스트 효과를 위해서는 <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a> 부분을 참고 하라.</p>
-
-<p>사용자 시스템 환경에 설치된 폰트 외에 다른 폰트를 설정하려면 <a href="/en/css/@font-face" title="https://developer.mozilla.org/en/css/@font-face">@font-face</a>로 온라인에 있는 폰트 설정 할 수 있다. 이를 위해서는 브라우저에서 해당 규칙을 지원해야 한다.</p>
-</div>
-
-<h2 id="액션_글씨체_설정">액션: 글씨체 설정</h2>
-
-<p>간단한 document에서는, {{ HTMLElement("body") }} element의 글씨체를 설정 할 수 있으며, 그 이후에서는 이 속성을 상속한다.</p>
-
-<ol>
- <li>예제 CSS 편집 해 보자.</li>
- <li>예제의 Document에 아래 규칙을 추가 하라. CSS파일의 위쪽은 논리적인 곳(?)이다. 하지만 어디에 추가하든 그 속성은 적용 될 것이다.
- <pre class="eval">body {font: 16px "Comic Sans MS", cursive;}
-</pre>
- </li>
- <li>주석을 탭이나 공백과 함께 잘 배치해 보라.</li>
- <li>저장하고 브라우저를 다시 읽어보라. 해당 기기에 italic 스타일이 지원되지 않는 Comic Sans MS나 손글씨체 글씨체가 있다면 브라우저는 다음 예제의 첫출과 같이 italic이 지원되는 다른 글씨체로 바꿔서 보여 줄 것이다.
- <table style="border: 2px outset #36b; padding: 1em;">
- <tbody>
- <tr>
- <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
- </tr>
- </tbody>
- </table>
- </li>
- <li>브라우저 메뉴에서 <strong>View &gt; Text Size &gt; Increase</strong> (or <strong>View &gt; Zoom &gt; Zoom In</strong>)을 선택 해 보라. 위에 16 pixels로 스타일 속성을 주었더라도, 화면에는 그 글씨 크기가 바뀔 것이다.</li>
-</ol>
-
-<div class="tuto_example">
-<div class="tuto_type">도전</div>
-
-<p>다른것은 그대로 두고, 단어 앞 첫 글자 6개만 기본 sarif글씨체로 바꾸고 브라우저 기본 사이즈의 2배 크기로 변경 해 보라.</p>
-
-<table>
- <tbody>
- <tr>
- <td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
- </tr>
- </tbody>
-</table>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>Add the following style declaration to the <code>strong</code> rule:</p>
-
-<pre class="brush: css"> font: 200% serif;
-</pre>
-If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
-
-<p> </p>
-<a class="hideAnswer" href="#challenge">Hide solution</a></div>
-<a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인</a></div>
-
-<h2 id="다음에는">다음에는?</h2>
-
-<p>{{nextPage("/en-US/docs/CSS/Getting_Started/Color", "색상")}}이미 예제에서 몇가지 색상을 사용 해 왔다. <a href="/en-US/docs/CSS/Getting_Started/Color" title="/en-US/docs/CSS/Getting_Started/Color">다음 장에서는</a> 기본 색생과 다른 색상 표현 법에 대해 알아본다.</p>