diff options
Diffstat (limited to 'files/ko/conflicting/learn/css/styling_text')
| -rw-r--r-- | files/ko/conflicting/learn/css/styling_text/fundamentals/index.html | 150 | ||||
| -rw-r--r-- | files/ko/conflicting/learn/css/styling_text/styling_lists/index.html | 245 |
2 files changed, 395 insertions, 0 deletions
diff --git a/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..8866132472 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,150 @@ +--- +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 > Text Size > Increase</strong> (or <strong>View > Zoom > 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> diff --git a/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..0e0e215006 --- /dev/null +++ b/files/ko/conflicting/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,245 @@ +--- +title: 리스트 +slug: Web/CSS/시작하기/리스트 +translation_of: Learn/CSS/Styling_text/Styling_lists +translation_of_original: Web/Guide/CSS/Getting_started/Lists +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Content", "내용물") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 10번째 장; 이번 장에서는 CSS에서 리스트를 어떻게 보여줄 것인지 설정하는 법에 대해 알아보자. 리스트를 포함하는 새로운 예제 Document를 생성하고, 리스트 스타일을 위한 새로운 stylesheet도 생성하라.</p> +<h2 class="clearLeft" id="정보_리스트">정보: 리스트</h2> +<p><a href="/en-US/docs/CSS/Getting_Started/Content" title="/en-US/docs/CSS/Getting_Started/Content">지난 섹션</a>에서 도전과제를 해결했다면, 어떤 elememt 앞에 리스트 아이템처럼 보여지는 내용물을 추가 하는 법을 보았을 것이다.</p> +<p>CSS는 리스트를 위한 특별한 속성을 제공한다. 이는 무엇보다도 사용하기 편리한 방법이다.</p> +<p>리스트 속성을 지정 하려면, {{ cssxref("list-style") }} 속성을 통해 마커 타입을 지정하라.</p> +<p>CSS에 있는 설렉터 규칙은 리스트 아이템 element를 선택 할 수도 있고(예를 들면, {{ HTMLElement("li") }}) 부모 리스트 element도 선택 가능하다. (예를 들면 {{ HTMLElement ("ul") }}) 리스트 element도 스타일을 상속 받는다.</p> +<h3 id="무순서_리스트">무순서 리스트</h3> +<p><em>무순서</em> 리스트에서는, 각 리스트 아이템들이 같은 방식으로 mark된다.</p> +<p>CSS는 세가지 방법의 마커가 있다. 브라우저에서는 다음과 같이 보여진다.</p> +<ul style="padding-left: 2em;"> + <li style="list-style-type: disc;"><code>disc</code></li> + <li style="list-style-type: circle;"><code>circle</code></li> + <li style="list-style-type: square;"><code>square</code></li> +</ul> +<p>다른 이미지도 URL로 설정 가능하다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>아래 규칙은 서로 다른 class의 리스트 아이템에 서로 다른 마커를 사용하고 있다.</p> + <pre class="brush:css">li.open {list-style: circle;} +li.closed {list-style: disc;} +</pre> + <p>When these classes are used in a list, they distinguish between open and closed items (for example, in a to-do list):</p> + <pre class="brush:css"><ul> + <li class="open">Lorem ipsum</li> + <li class="closed">Dolor sit</li> + <li class="closed">Amet consectetuer</li> + <li class="open">Magna aliquam</li> + <li class="closed">Autem veleum</li> +</ul> +</pre> + <p>위 코드는 아래처럼 보여질 것이다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul style="padding-right: 6em;"> + <li style="list-style-type: circle;">Lorem ipsum</li> + <li style="list-style-type: disc;">Dolor sit</li> + <li style="list-style-type: disc;">Amet consectetuer</li> + <li style="list-style-type: circle;">Magna aliquam</li> + <li style="list-style-type: disc;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<h3 id="순차_리스트">순차 리스트</h3> +<p>순차리스트는 각 리스트 아이템이 순차적으로 순서가 표시된 마커와 보여진다.</p> +<p>{{ cssxref("list-style") }}속성으로 마커 타입을 설정 하라.</p> +<ul style="padding-left: 2em;"> + <li style=""><code>decimal</code></li> + <li style=""><code>lower-roman</code></li> + <li style=""><code>upper-roman</code></li> + <li style=""><code>lower-latin</code></li> + <li style=""><code>upper-latin</code></li> +</ul> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 예제에서는 'info' class의 {{ HTMLElement("ol") }} elements에서, 아이템들이 대문자 순차 마커로 표시된다.</p> + <pre class="brush:css">ol.info {list-style: upper-latin;} +</pre> + <p>아래 리스트 내의 {{ HTMLElement("li") }} element는 위의 스타일을 상속한다.</p> + <table style="border: 2px outset #36b; padding: 1em; background-color: white;"> + <tbody> + <tr> + <td> + <ul> + <li style="padding-right: 6em; list-style-type: upper-latin;">Lorem ipsum</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Dolor sit</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Amet consectetuer</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Magna aliquam</li> + <li style="padding-right: 6em; list-style-type: upper-latin;">Autem veleum</li> + </ul> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>{{ cssxref("list-style") }}속성은 약어이다. 다소 복잡한 stylesheet에서는 속성과 그 값을 분리해서 사용하기를 원할 수 있다. 이 분리된 속성을 연결하는 방법이나 CSS에서 리스트에 더 자세한 설정법을 알려면{{ cssxref("list-style") }} 참조 페이지를 확인하라.</p> + <p>만약 HTML같은 관습적인 태그 비순차 리스트 아이템({{ HTMLElement("ul") }})와 순차 리스트 아이템({{ HTMLElement("ol") }})를 제공하는 마크업 언어를 사용한다면, 그 태그를 써서 쉽게 연습 해 볼 수 있다. 어쨌던 CSS써서 {{ HTMLElement("ul") }}를 순차 표시 할수 있고 {{ HTMLElement("ol") }} 를 통해 비순차를 원한다면 표시 할 수도 있다.</p> + <p>브라우저마다 리스트 스타일을 보여주는 자체 방식이 있다. Stylesheet로 모든 브라우저에서 동일하게 보여지는 것을 기대하지는 마라.</p> +</div> +<h3 id="카운터">카운터</h3> +<div style="border: 1px solid red; padding: 6px; margin: 0 0 .5em -6px; width: 100%;"> + <p><strong>참고: </strong> 일부 브라우저는 카운터를 지원하지 않는다. <a class="external" href="http://www.quirksmode.org/" title="http://www.quirksmode.org/">Quirks Mode site의 </a><a class="external" href="http://www.quirksmode.org/css/contents.html" title="http://www.quirksmode.org/css/contents.html">CSS 내용물과 브라우저 호환성</a> 페이지에 브라우저 호환 차트와 CSS의 다른 기능에 대한 호환성을 확인 할 수 있다. 이 사이트 <a href="/en/CSS_Reference" title="https://developer.mozilla.org/en/CSS_Reference">CSS 참조Reference</a>의 individual page(?)에는 브라우저 호환성 테이블도 확인 할 수 있다.</p> +</div> +<p>리스트 아이템 나열 뿐 아니라 Element를 순위매김 하기 위해 카운터를 사용할 수 있다. 예를 들어, documents내에서 머릿말니아 단락의 순서를 표시 하고 싶을때 사용 가능하다.</p> +<p>순위 매김을 사용하려면 카운터에 이름을 할당하여 사용하면 된다.</p> +<p>element에 순위메김 추가를 시작하기 전에 {{ cssxref("counter-reset") }}속성으로 초기화 하고 사용하고자 하는 카운터 이름을 쓰라. 카운터를 사용하는 elements의 부모에다 초기화 과정을 적용하는 것이 좋다. 그러나, 리스트 아이템 시작하기 전 어느 element에서든 초기화를 사용해도 된다.</p> +<p>카운터가 증가하는 각 element에서, {{ cssxref("counter-increment") }} 속성을 사용하여 증가 하고 증가 하고자 하는 이름도 표시하라.</p> +<p>카운터를 표시하기 위해서는 {{ cssxref(":before") }}나 {{ cssxref(":after") }} 설렉터를 써서 <code>content속성을 사용하여라.</code>(이전 페이지에서, <strong><a href="/en/CSS/Getting_Started/Content" title="en/CSS/Getting_Started/Content">Content</a></strong>사용에 대해 참고하라).</p> +<p><code>content</code> 속성 값에 <code>counter()카운터 이름과 함께 사용하라.</code> 선택적으로 타입도 명시 가능하다. 타입은 위에서 언급한 <strong>Ordered lists</strong> 섹션에 나온것과 같다.</p> +<p>보통 카운터를 표시하는 element도 하나씩 카운터 값이 증가 한다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 class가 'numbered'인 모든 {{ HTMLElement("h3") }} element의 카운터를 초기화 한다.</p> + <pre class="brush:css">h3.numbered {counter-reset: mynum;} +</pre> + <p> </p> + <p>이 아래 규칙은 모든 'numbered' class의 {{ HTMLELement("p") }} element에 카운터 값을 표시하고 그 값을 증가 시킨다.</p> + <pre class="brush:css">p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold;} +</pre> + <p>결과는 아래와 같다.</p> + <table style="border: 2px outset #36b; padding: .5em 6em .5em 1em; background-color: white;"> + <tbody> + <tr> + <td><strong>Heading</strong><br> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> + </table> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>카운터가 지원되지 않는 브라우저에서는 카운터를 사용 할 수 없다.</p> + <p>카운터가 사용 가능하다면 카운터로 리스트아이템에서 지원 되는 것처럼 별도로 다른 내용물에 순위매김을 사용 할 수 있다. 예를 들면 위에서 처럼, 카운터는 굵은 글씨로 그외 아이템은 정상 글씨로 가능하다.</p> + <p>좀더 다양한 방법으로 카운터를 사용 할 수 있는데 —예를 들면, 형식적인 Document의 순서 섹션, 머릿말, 보조 머릿말과 단락등에서 사용 가능하다. 자세한 사항은 CSS사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a> 를 확인 하라.</p> +</div> +<h2 id="액션_화려한_리스트">액션: 화려한 리스트</h2> +<p><code>새로이 doc2.html</code>파일을 만들어라. 아래 코드를 복사하라.</p> +<pre class="brush:html;"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <title>Sample document 2</title> + <link rel="stylesheet" href="style2.css"> + </head> + <body> + + <h3 id="oceans">The oceans</h3> + <ul> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + + <h3 class="numbered">Numbered paragraphs</h3> + <p class="numbered">Lorem ipsum</p> + <p class="numbered">Dolor sit</p> + <p class="numbered">Amet consectetuer</p> + <p class="numbered">Magna aliquam</p> + <p class="numbered">Autem veleum</p> + + </body> +</html> +</pre> +<p><code>style2.css</code>를 만들어 아래 내용을 복사하라.</p> +<pre class="brush:css;">/* numbered paragraphs */ +h3.numbered {counter-reset: mynum;} + +p.numbered:before { + content: counter(mynum) ": "; + counter-increment: mynum; + font-weight: bold; +} +</pre> +<p>배치와 주석이 맘에 들지 않으면 마음대로 변경하라.</p> +<p>브라우저에서 열어보라. 만약 브라우저가 카운터를 지원 한다면 아래 예제와 같이 보일 것이다. 브라우저가 지원하지 않는다면 숫자는 보이지 않을 것이다. (콜론도 보이지 않을 것이다.)</p> +<table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">Numbered paragraphs</p> + <p><strong>1: </strong>Lorem ipsum</p> + <p><strong>2: </strong>Dolor sit</p> + <p><strong>3: </strong>Amet consectetuer</p> + <p><strong>4: </strong>Magna aliquam</p> + <p><strong>5: </strong>Autem veleum</p> + </td> + </tr> + </tbody> +</table> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <p>예제 stylesheet에 대양 표시 앞에 로마숫자로 i에서 v까지 나타나도록 추가 해 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p> + <ul style=""> + <li>Arctic</li> + <li>Atlantic</li> + <li>Pacific</li> + <li>Indian</li> + <li>Southern</li> + </ul> + </td> + </tr> + </tbody> + </table> + <p> </p> + <p>예제 stylesheet를 아래와 같이 대문자가 단락앞에 나오도록 만들어 보라.</p> + <table style="border: 2px outset #36b; padding: 0 6em 1em 1em; background-color: white;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p> + <p><strong>. . .</strong></p> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p> + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> + </table> +</div> +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Lists" title="en/CSS/Getting started/Challenge solutions#Lists">정답 확인.</a></p> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자") }}브라우저에서 예제 Document를 표시할때, element를 페이지에 element 주변으로 공간을 만든다. 다음장에서는 CSS가 어떻게 element아래쪽에 놓인 박스 모양과 동작하는지 설명한다(<a href="/en/CSS/Getting_Started/Boxes" title="en/CSS/Getting_Started/Boxes">boxes</a>.xm).</p> |