path: root/files/ko/web/css/시작하기/상자/index.html

---
title: 상자
slug: Web/CSS/시작하기/상자
translation_of: Learn/CSS/Building_blocks
---
<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>