path: root/files/ko/web/css/시작하기/배치/index.html

---
title: 배치
slug: Web/CSS/시작하기/배치
translation_of: Learn/CSS/CSS_layout
translation_of_original: Web/Guide/CSS/Getting_started/Layout
---
<p>{{ CSSTutorialTOC() }}</p>

<div class="warning"><strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/19)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div>

<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Boxes", "상자")}}<a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 12번째 장; 여기서는 Document의 배치를 정하는 몇몇 방법에 대해 알아본다. 예제 document를 좀 바꿔 보자.</p>

<h2 class="clearLeft" id="정보_배치">정보: 배치</h2>

<p>Document의 배치를 바꾸기 위해 CSS는 다양한 방법을 제공한다. 어떤 고급 기술은 여기 초급안내서의 범주를 훨씬 넘어서는 고급 기술이다.</p>

<p>여러 브라우저에서의 결과물이 비슷하게 나오게 하기 위해, stylesheet값은 브라우저의 기본 stylesheet값과 배치값을 사용한다. 이 주제 또한 여기서의 초급과정보다 더 고급 과정이다.</p>

<p>여기서는 간단한 기술에 대해 연습 해 보자.</p>

<h3 id="Document_구조">Document 구조</h3>

<p>만약 Document의 배치를 변경하려 한다면 이떤 경우에는 document 구조를 바꿔야 할지 모른다.</p>

<p>document의 마크업 언어는 구조 생성을 위한 용도의 일반적인 태그를 가지고 있다. 예를 들면 HTML에서 구조를 생성 하기 위해 {{ HTMLElement("div") }} element를 사용 할 수 있다.</p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>예제 Document에서 <u>Numbered paragraphs</u>가 표시된 단락은 컨테이너 구조가 아니다.</p>

<p>따라서 이 단락 주변에는 설렉터에서 이 element에 대해 정의 한 것이 없으므로 경계 박스를 그릴 수 없다.</p>

<p>이 구조적 문제를 해결 하기 위해, {{ HTMLElement("div") }}태그를 단락 주변에 추가 하라. 이 태그는 유일한 것이어서 id속성으로 구분 될 수 있다.</p>

<pre class="brush:html;highlight:[2,8]">&lt;h3&gt;Numbered paragraphs&lt;/h3&gt;
&lt;div id="numbered"&gt;
  &lt;p&gt;Lorem ipsum&lt;/p&gt;
  &lt;p&gt;Dolor sit&lt;/p&gt;
  &lt;p&gt;Amet consectetuer&lt;/p&gt;
  &lt;p&gt;Magna aliquam&lt;/p&gt;
  &lt;p&gt;Autem veleum&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>이제 예제 stylesheet 에 두 리스트에 주변의 경계 표시를 위한 규칙 하나를 아래와 같이 추가 하자.</p>

<pre class="brush:css">ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
}
</pre>

<p>아래와 같은 형식으로 출력된다.</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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; margin-bottom: 16px; padding: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <div style="border: 12px solid #69b; margin-bottom: 8px; padding: 0px 12em 0px .5em;">
    <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>
    </div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<h3 id="크기_단위">크기 단위</h3>

<p>지금까지 이 안내서에서는 크기를 픽셀(px)단위로 표시 해왔다. 컴퓨터 화면과 같은 출력장치에서는 어느 정도 적절한 표시 방법이다. 그러나, 사용자가 글씨 크기를 바꿔 버리면 화면 출력은 이상하게 엉켜버릴 수 있다.</p>

<p>다양한 용도를 위해 크기는 백분위(%)값이나, 고정넓이폰트 값(em)으료 표시하는 것이 더 좋은 방법이다.  고정 넓이 폰트 값(em)은 현재 사용되는 글씨체중 'm'에 해당하는 넓이를 기준으로 하고 있다.(영문에서는 'm'이 가장 넓은 폰트이다). 사용자가 글씨 크기를 바꾸면 배치는 자동적으로 맞추어 질 것이다.</p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>아래 텍스트의 왼쪽에 있는 경계는 픽셀로 크기를 지정 했다.</p>

<p>오른쪽은 고정 넓이 폰트값(aka ems)으로 지정 했다.</p>

<p>브라우저에서 글씨 크기를 변경하고 확인 해보면 오른쪽은 적당한 크기를 유지하지만, 왼쪽은 그렇지 않다는 것을 확인 할 수 있을 것이다.</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <div style="">RESIZE ME PLEASE</div>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">좀더 자세히</div>

<p>다른 기기에서는 다른 단위가 적절할 수 있다.</p>

<p>이 안내서 나중 페이지에 이에 대해 좀더 자세히 알아 보도록 하자.</p>

<p>변수 값과 단위에 대해 상세하게 확인 하고 싶다면 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a> 부분을 참고 하라.</p>
</div>

<h3 id="텍스트_배치">텍스트 배치</h3>

<p>element 내용물을 배치하는데는 두가지 속성이 있다. 이 두가지를 통해 간단하게 배치/정열을 조절 할 수 있다.</p>

<dl>
 <dt>{{ cssxref("text-align") }}</dt>
 <dd>이 <code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>값로 할당하여 정열 할 수 있다.</dd>
 <dt>{{ cssxref("text-indent") }}</dt>
 <dd>들여쓰기를 위해 적당한 값을 명시하여 사용 한다.</dd>
</dl>

<p>이 두 속성은 실제 텍스트 외에도 모든 텍스트 같은(text-like) element에도 영향을 미친다. 속성들은 부모로부터 자식까지 상송되므로, 자식 element에서 부모로 부터 받지 않으려는 속성에 대해서 정확하게 제거 하는 규칙을 추가 하지 않는다면 원하는 결과를 얻지 못할지 모른다.</p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>헤더를 가운데 정렬하려면</p>

<pre class="brush:css">h3 {
  border-top: 1px solid gray;
  text-align: center;
}
</pre>

<p>결과는 아래와 같다.</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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; text-align: center;">(A) The oceans</p>
   </td>
  </tr>
 </tbody>
</table>

<p>HTML document에서, 헤더 아래쪽에 보여지는 내용물(content)는 헤더에서 구조적으로 포함된 사항이 아니다. 그러므로 이와 같은 헤더를 정렬하려면 헤더 아래쪽 테그는 그 스타일을 상속 받아서는 안된다.</p>
</div>

<h3 id="부유(Floats)">부유(Floats)</h3>

<p>{{ cssxref("float") }}속성은 element를 강제로 왼쪽 혹은 오른쪽으로 정렬시킨다. 이것이 element의 위치와 크기를 조정하는 가장 간단한 방법이다.</p>

<p>나머지 document의 내용물(content)는 부유 속성의 element 주변으로 떠있게 된다. {{ cssxref("clear") }} 속성을 통해서 element들을 부유 element로 부터 떨어져 고정 위치하도록 한다.</p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>예제 document에서 리스트는 윈도우의 크기에 맞게 늘어난다. 이를 방지하기 위해서는 부유속성으로 왼쪽으로 정렬되도록 하면 된다.</p>

<p>아래 예로 헤더를 왼쪽 한곳에 고정 시키려면 clear속성과 left를 함께 선언 해 주어야 한다.</p>

<pre class="brush:css">ul, #numbered {float: left;}
h3 {clear: left;}
</pre>
</div>

<p>The result looks like:</p>

<table style="background-color: white; border: 2px outset #36b; padding: 1em; width: 30em;">
 <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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding-left: 1em;">
    <ul style="">
     <li>Arctic</li>
     <li>Atlantic</li>
     <li>Pacific</li>
     <li>Indian</li>
     <li>Southern</li>
    </ul>
    </div>

    <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

    <div style="float: left; border: 12px solid #69b; margin-bottom: 8px; padding-left: .5em;">
    <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>
    </div>
   </td>
  </tr>
 </tbody>
</table>

<p>(텍스트가 경계선에 바짝 붙어 있다면 박스의 오른편에 약간의 내부 여백 필요할듯 하다.)</p>

<h3 id="위치잡기">위치잡기</h3>

<p>{{ cssxref("position") }}속성에 아래 4가지 방법으로 값을 선언하여 위치를 잡을 수 있다.</p>

<p>더 많은 속성이 있지만 아래와 같은 간단한 방법으로(여기서는 초급 안내서이므로) 위치를 조정 할 수 있다. 그러나 아래 방법을 조합해서 쓴다면 다소 어려워 질 것이다.</p>

<dl>
 <dt><code>relative</code></dt>
 <dd>element의 위치는 상대적으로 정해진다. 어느 정도 값을 지정 함으로 element를 위치 시킬 수 있다. element의 바깥 여백값을 설정함으로 이와 동일한 설정 효과를 볼 수도 있다.</dd>
 <dt><code>fixed</code></dt>
 <dd>고정 위치 설정법. document window에서의 상대적 위치를 지정하는 방법이다. document의 나머지 부분이 스크롤 되어야 할지라도 해당 element는 고정 값을 가진다.</dd>
 <dt><code>absolute</code></dt>
 <dd>부모 element의 위치에 상대적으로 위치가 고정된다. 그 부모 element는 위치 지정 방법이 <code>relative</code>, <code>fixed</code> or <code>absolute</code> 중 하나이어야 한다. element의 위치 속성을 releative로 설정 한다면 방향 표시를 하지 않더라도 어떠한 속성을 가진 부모 element에도 잘 동작 할 것이다.</dd>
 <dt><code>static</code></dt>
 <dd>기본 설정 값이다. 명확하게 상속받은 위치 지정을 해제하려면 이 값으로 선언 해야 한다.</dd>
</dl>

<p>이 위치 지정 속성과 함께(<code>static은 제외</code>) 방향(<code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>), 높이(<code>width)</code>, 넓이(<code>height) 크기(size)도 같이 지정 해야 한다.</code></p>

<div class="tuto_example">
<div class="tuto_type">예제</div>

<p>아래 두 element의 Top정렬을 동일한 위치에 설정 하려면 예제 Document의 두 element에 부모 container를 만들어라.</p>

<pre class="brush:html">&lt;div id="parent-div"&gt;
  &lt;p id="forward"&gt;/&lt;/p&gt;
  &lt;p id="back"&gt;\&lt;/p&gt;
&lt;/div&gt;
</pre>

<p>예제 stylesheet에서 부모 element의 위치 속성을 <code>relative로 하라.</code> 방향 속성까지 같이 할 필요는 없다.자식 element의 위치는 absolute로 설정하라.</p>

<pre class="brush:css">#parent-div {
  position: relative;
  font: bold 200% sans-serif;
}

#forward, #back {
  position: absolute;
  margin:0px; /* no margin around the elements */
  top: 0px; /* distance from top */
  left: 0px; /* distance from left */
}

#forward {
  color: blue;
}

#back {
  color: red;
}
</pre>

<p>결과는 아래처럼 백슬레쉬(\)와 슬레쉬(/)가 겹쳐서 위치 되도록 하였다.</p>

<div style="position: relative; left: .33em; font: bold 300% sans-serif;">
<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: blue;">/</p>

<p style="position: absolute; margin: 0px; top: 0px; left: 0px; color: red;">\</p>
</div>

<table style="background-color: white; border: 2px outset #36b; height: 5em; padding: 1em; width: 30em;">
 <tbody>
  <tr>
   <td> </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">좀더 자세히</div>

<p>위치 지정에 대한 모든 내용은 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html">Visual formatting model</a>과 <a class="external" href="http://www.w3.org/TR/CSS21/visudet.html">Visual formatting model details</a>의 두 챕터에 나와 있다.</p>

<p>다양한 브라우저에서 동작하도록 stylesheet를 설계하고자 한다면, 브라우저별로 표준을 다르게 해석하는 것과 특정 버전의 브라우저에 있는 버그에 대해서도 고려해야 한다.</p>
</div>

<h2 id="액션_배치_선언">액션: 배치 선언</h2>

<ol>
 <li><code>doc2.html와</code> <code>style2.css를 수정 하여 위에 나온</code><a href="#Document_structure" title="#Document structure"><strong>Document structure</strong></a> 와 <a href="#Floats" title="#Floats"><strong>Floats</strong></a>를 연습 해 보자.</li>
 <li><a href="#Floats" title="#Floats"><strong>Floats</strong></a>예제에서 텍스트를 오른쪽 경계와의 안쪽 여백을 0.5 em로 설정 하라.</li>
</ol>

<div class="tuto_example">
<div class="tuto_type">도전</div>

<p><code>doc2.html의 아래쪽 &lt;/body&gt; 바로 위에 아래 태그를 추가하라</code>.</p>

<pre class="brush:html">&lt;img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"&gt;
</pre>

<p>아래 이미지를 다운로드 하지 않았다면 지금 다운로드 하고, 위의 예제 파일이 있는 곳으로 저장하라.</p>

<table style="border: 2px solid #ccc;">
 <tbody>
  <tr>
   <td><img alt="Image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></td>
  </tr>
 </tbody>
</table>

<p>Document내에서 위의 이미지가 어느 위치에 표시될지 예상 해 보라. 그리고 브라우저에서 읽어들여 그 결과를 확인 해 보라.</p>

<p>Document의 오른쪽 위에 자리 잡을 수 있도록 예제 stylesheet에 규칙을 추가 해 보라.</p>

<p>브라우저에서 다시 읽어 보고 윈도우를 작게 조절 해 보라. 윈도우 크기를 조절 할때에도 Document가 Scroll될지라도 위의 이미지가 오른쪽 위에 계속 자리 하는지를 확인 해 보라.</p>

<div style="position: relative; width: 29.5em; height: 18em;">
<div style="overflow: auto; border: 2px outset #36b; padding: 1em; width: 29em; height: 16em; background-color: white;">
<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="float: left; border: 12px solid #69b; margin-bottom: 16px; padding: 0px .5em 0px 1em;">
<ul style="">
 <li>Arctic</li>
 <li>Atlantic</li>
 <li>Pacific</li>
 <li>Indian</li>
 <li>Southern</li>
</ul>
</div>

<p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em; border-top: 1px solid gray;">(B) Numbered paragraphs</p>

<div style="float: left; border: 12px solid #69b; padding: 0 .5em 0 .5em;">
<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>
</div>

<p style=""> </p>

<div style="position: absolute; top: 2px; right: 0px;"><img alt="Yellow map pin" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"></div>
</div>
</div>
</div>

<p><a href="/en/CSS/Getting_Started/Challenge_solutions#Layout" title="https://developer.mozilla.org/en/CSS/Getting_Started/Challenge_solutions#Layout">정답 확인.</a></p>

<h2 id="다음에는">다음에는?</h2>

<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Tables", "테이블") }}이제까지 CSS의 초급 안내서에 나온 주제를 다 확인 해 보았다. 다음장에서 부터는 CSS 설렉터의 고급 기술과 <a href="/en-US/docs/CSS/Getting_Started/Tables" title="/en-US/docs/CSS/Getting_Started/Tables">테이블</a>의 스타일을 설정하는 방법에 대해 알아보자.</p>