diff options
Diffstat (limited to 'files/ko/conflicting/learn/css/building_blocks/index.html')
-rw-r--r-- | files/ko/conflicting/learn/css/building_blocks/index.html | 331 |
1 files changed, 331 insertions, 0 deletions
diff --git a/files/ko/conflicting/learn/css/building_blocks/index.html b/files/ko/conflicting/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..cc6b499241 --- /dev/null +++ b/files/ko/conflicting/learn/css/building_blocks/index.html @@ -0,0 +1,331 @@ +--- +title: 상자 +slug: Web/CSS/시작하기/상자 +translation_of: Learn/CSS/Building_blocks +translation_of_original: Web/Guide/CSS/Getting_started/Boxes +--- +<p>{{ CSSTutorialTOC() }}</p> + +<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> + +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 11번째 장; 여기서는 CSS를 통해 element들이 보여질때 page의 공간을 어떻게 배치하는지에 대해 알아본다. 예제 documnet에서 각 element의 여백 조절과 꾸미기에 대해 배워 보자.</p> + +<h2 class="clearLeft" id="정보_상자">정보: 상자</h2> + +<p>Element를 브라우저에서 표시할때 그 Element는 공간을 자치 한다. 차지하는 공간에는 4가지 요소가 있다.</p> + +<p>가운데는, element의 내용물을 표시가는 공간이며, 주변은 안쪽 여백이 있고, 그 주변에 경계가 있으며, 다른 element와의 간격이 있다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #eee;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>옅은 회색은 레이아웃의 구성을 보여준다.</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #fff; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #fff;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #999;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서는 위와 같이 보여준다.</em></p> + </td> + </tr> + </tbody> +</table> + +<p>안쪽 여백, 경계 그리고 바깥 여백은 element에 대해 각각 top, right, bottom, left의 크기를 가진다. 이것들은 크기가 0이 될 수도 있다.</p> + +<h3 id="색상입히기">색상입히기</h3> + +<p>안쪽 여백 색상은 element의 배경과 항상 동일하게 유지된다. 배경색을 바꾼다면 element경과 안쪽 여백 색이 바뀌는 것을 확인 할 수 있을 것이다. 바깥 여백은 항상 투명하다.</p> + +<table> + <tbody> + <tr> + <td style="width: 22em;"> + <div style="background-color: #eee; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;">margin</p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;">border</p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;">padding</p> + + <div style="background-color: #ded;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>element는 녹색 배경색이다..</em></p> + </td> + <td> + <div style="background-color: #fff; padding: 0px 2em 2em 2em; width: 16em;"> + <p style="text-align: center; margin: 0px;"> </p> + + <p style="text-align: center; margin: 0px 0px -.75em 0px;"> </p> + + <div style="background-color: #efe; padding: 0px 2em 2em 2em; border: 4px solid #fd9;"> + <p style="text-align: center;"> </p> + + <div style="background-color: #efe;"> + <p style="text-align: center; padding: 0px; margin: 0px; font-size: 200%; font-weight: bold; color: #898;">element</p> + </div> + </div> + </div> + + <p><em>브라우저에서 보면 위와 같다.</em></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="경계">경계</h3> + +<p>라인이나 상자를 통해 element의 경계를 치장 할 수 있다.</p> + +<p>경계를 설정 하려면 {{ cssxref("border") }}속성을 이용하라. 두께(보통 표시 화면의 픽셀 두께), 스타일, 색상등을 설정 하라.</p> + +<p>스타일은 아래와 같다.</p> + +<table style="margin-left: 2em;"> + <tbody> + <tr> + <td style="width: 6em;"> + <div style="border: 2px solid #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>solid</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dotted #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dotted</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px dashed #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>dashed</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px double #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>double</code></div> + </td> + </tr> + <tr> + <td style="width: 6em;"> + <div style="border: 2px inset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>inset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 2px outset #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>outset</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px ridge #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>ridge</code></div> + </td> + <td style="width: 6em;"> + <div style="border: 4px groove #4a4; margin: .5em; padding: .5em; width: 5em; text-align: center;"><code>groove</code></div> + </td> + </tr> + </tbody> +</table> + +<p>스타일을 none이라 hidden으로 설정하면 경계가 사라진다. 다른 방법으로는 경계 색상을 투명으로 설정하여 레이아웃을 변경하지 않고도 경계를 보이지 않게 할 수도 있다.</p> + +<p>경계를 각각 별개로 설정하기 위해서는{{ cssxref("border-top") }}, {{ cssxref("border-right") }}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}등으로 할 수 있다. 각 top, right, bottom, left는 개별적으로 설정이 가능하다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래 규칙은 헤더 element의 윗쪽 경계와 배경색에 대한 속성을 지정 한다.</p> + +<pre class="brush:css">h3 { + border-top: 4px solid #7c7; /* mid green */ + background-color: #efe; /* pale green */ + color: #050; /* dark green */ + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p style="font-size: 133%; font-weight: bold; background-color: #efe; border-top: 4px solid #7c7; color: #050; padding-right: 6em;">Stylish heading</p> + </td> + </tr> + </tbody> +</table> + +<p>아래 규칙은 이미지 주변에 회색띠를 둘러서 경계를 구분하기 편하게 하고 있다.</p> + +<pre class="brush:css">img {border: 2px solid #ccc;} +</pre> +</div> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td>Image:</td> + <td style="border: 2px solid #ccc;"><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> + +<h3 id="내외부_여백">내/외부 여백</h3> + +<p>내/외부 여백을 이용하여(margins and padding) element의 위치와 그 주변의 여백을 설정 할 수 있다.</p> + +<p>바깥 여백은 {{ cssxref("margin") }}속성을 사용하며 내부여백은 {{ cssxref("padding") }}속성을 각각 사용한다.</p> + +<p>위의 속성으로 넓이 값을 하나 선언하면 element의 4방향(top, right, bottom and left) 모두 바뀐다.</p> + +<p>넓이 값을 두개 선언하면, 첫번째 값으로는 top, bottom값이 적용되고, 두번째 값으로는 right, left값이 바뀐다.</p> + +<p>4개 값을 각각 주기 위해서는 각 값을 top, right, bottom, left의 순서로 나열 하면 된다.</p> + +<div class="tuto_example"> +<div class="tuto_type">예제</div> + +<p>아래는 p class가 remark인 단락을 빨간 경계박스로 만드는 규칙이다.</p> + +<p>안쪽 여백 값은 4픽셀으로 둘러져 있으며, 왼쪽 바깥 여백은 24픽셀이므로 들여쓰기 효과로 보여진다.</p> + +<pre class="brush:css">p.remark { + border: 2px solid red; + padding: 4px; + margin-left: 24px; + } +</pre> + +<p>결과는 아래와 같다.</p> + +<table> + <tbody> + <tr> + <td> + <p>Here is a normal paragraph.</p> + + <p style="border: 2px solid red; padding: 4px 6em 4px 4px; margin: 0px 0px 0px 24px;">Here is a remark.</p> + </td> + </tr> + </tbody> +</table> +</div> + +<div class="tuto_details"> +<div class="tuto_type">좀더 자세히</div> + +<p>내/외부 여백으로 element의 배치를 할때는 브라우저에서 제공하는 기본 값과 사용자가 정의한 값을 바탕으로 정해지므로 조금 복잡할 수도 있다.</p> + +<p>브라우저에 따라 보이는 내용이 다를 수 있다. stylesheet에 내용을 많이 추가 할 수록 브라우저 기본값보단 설정된 값을 많이 사용하므로 더욱더 비슷한 결과물을 볼수 있을 것이다.</p> + +<p>원하는 결과물을 얻기 위해서는, Document의 마크업들을 바꿔야 할지도 모른다. 다음장에서는 이에 대해 좀더 자세히 알아보자.</p> + +<p>내/외부 여백과 경계선등에 대해 좀더 자세히 알아보려면 <a href="/en/CSS/box_model" title="en/CSS/box model"><span class="external">Box model</span></a>를 참조하라.</p> +</div> + +<h2 id="액션_경계선_추가">액션: 경계선 추가</h2> + +<p><code>style2.css</code>를 열어, 각 헤더별로 윗쪽에 줄을 긋는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">h3 {border-top: 1px solid gray;} +</pre> + +<p>이 페이지 아래 도전과제를 수행한다면, 그 규칙을 변경하고, 그렇지 않다면 각 리스트 아래에 바깥 여백을 추가하는 아래 규칙을 추가 하라.</p> + +<pre class="brush:css">li { + list-style: lower-roman; + margin-bottom: 8px; + } +</pre> + +<p>결과를 보기위해 브라우저에서 새로 읽어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) 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에 하나의 규칙을 추가하여 아래처럼 바다가 연생되는 색으로 모든 경계를 두껍게 만들어 보라.</p> + +<table style="background-color: white; border: 2px outset #36b; padding: 1em;"> + <tbody> + <tr> + <td> + <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(A) The oceans</p> + + <div style="border: 12px solid #69b; padding-left: 1em;"> + <ul style=""> + <li style="margin-bottom: 8px;">Arctic</li> + <li style="margin-bottom: 8px;">Atlantic</li> + <li style="margin-bottom: 8px;">Pacific</li> + <li style="margin-bottom: 8px;">Indian</li> + <li style="margin-bottom: 8px;">Southern</li> + </ul> + </div> + + <p style="font-weight: bold; font-size: 133%; margin-top: 1em; margin-bottom: .3em; padding: .4em 4em .16em 0; border-top: 1px solid gray;">(B) Numbered paragraphs</p> + + <p><strong>. . .</strong></p> + </td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>(여기 보이는 예제와 똑같은 두께나 색상으로 바꿀 필요는 없다.)</p> +</div> + +<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Boxes" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Boxes">결과 확인.</a></p> + +<h2 id="다음에는">다음에는?</h2> + +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Layout", "배치") }}지금까지 내/외부 여백을 설정하여 Document의 배치를 수정 해 보았다. 다음 장에서는 Document의 배치를 바꾸는 다른 방법에 대해 알아보자.</p> |