Layout

  • 리비전 슬러그: CSS/Getting_Started/Layout
  • 리비전 제목: Layout
  • 리비전 아이디: 120875
  • 제작일시:
  • 만든이: Ioseph
  • 현재 리비전인가요? 아니오
  • 댓글

리비전 내용

이 페이지는 문서의 레이아웃(layout)을 조정하는 몇가지 방법들을 기술합니다.

샘플 문서의 레이아웃을 변경합니다.

Information: Layout

정보: 레이아웃(Layout)

CSS를 사용해서 문서의 레이아웃을 바꾸는 다양한 시각적 효과를 지정할 수 있습니다. 레이아웃을 지정하는 몇가지 테크닉(techniques)은 고급기술이며, 이 기초 입문서의 범위를 벗어납니다.

다양한 브라우저에서 비슷하게 보이는 레이아웃을 디자인할 때, 스타일 시트는 브라우저의 디폴트(default) 스타일 시트및 레이아웃 엔진(engine)과 복잡할 수도 있는 방식으로 상호작용합니다.

이 페이지는 시도해볼 수 있는 간단한 몇가지 테크닉을 기술합니다.

문서 구조

문서의 레이아웃을 콘트롤하고 싶으시면 문서의 구조를 변경해야 할 수도 있습니다.

문서의 마크업(markup)언어는 구조를 생성시키는데 일반적인 목적을 가진 택들을 포함하고 있을 수 있습니다. 예를들면, HTML에서 구조를 생성하기 위해서 DIV 택을 사용할 수 있습니다.

Example
샘플 문서에서 두번째 헤딩(second heading)아래에 있는 숫자로 나열된 단락들은 자신들의 콘테이너(container)를 가지고 있지 않습니다.

선별자 안에 지정하고 있는 엘리먼트가 없기때문에 스타일 시트는 이들 단락주위에 보더를 그릴 수 없습니다.

이러한 구조적 문제를 고치기 위해서, 단락주위에 DIV 택을 더할 수 있습니다. 이 택은 고유하기 때문에 id 속성으로 분간될 수 있습니다.

<H3 class="numbered">Numbered paragraphs</H3>
<DIV id="numbered">
<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>
</DIV>

이제 스타일 시트는 규칙하나를 사용해서 리스트 모두에 보더를 지정할 수 있습니다:

ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
  }

결과는 이렇게 보입니다:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

크기 유닛(Units)

지금 까지 이 입문서에서 크기는 픽셀로 (px) 지정했습니다. 이 유닛은 컴퓨터 화면 같은 디스플레이 장치에 대한 몇가지 경우들에 적합합니다. 그러나 사용자가 폰트 크기를 변경하면, 레이아웃이 잘 못 될 수 있습니다.

For many purposes it is better to specify sizes as a percentage or in ems (em). An em is nominally the size of the current font (the width of a letter m). When the user changes the font size, your layout adjusts automatically.

많은 경우에 크기를 백분율(percentage)이나 ems (em) 로 지정하는 것이 보다 낫습니다. em은 명목상으로 현재 사용중인 폰트의 크기 입니다 (문자 m의 폭). 사용자가 폰트 크기를 변경하면 레이우웃은 자동적으로 그에 맞게 조정됩니다.

Example
이 텍스트의 왼쪽 보더는 픽셀로 지정된 크기를 가지고 있습니다.

오른쪽 보더는 ems로 지정된 크기를 가지고 있습니다.

브라우저에서, 폰트를 변경해서 오른쪽 보더는 조정이 되는 반면 왼쪽 보더는 그렇지 않다는 것을 보세요:

RESIZE ME PLEASE
More details
다른 장치에겐 다른 길이 유닛(length unit)이 적합합니다.

이 입문서의 뒷 페이지에 이에 관한 더 많은 정보가 있습니다.

값과 유닛에 관한 전체 설명을 원하시면, CSS 규약의 Values을 보세요.

텍스트 레이아웃

두가지 속성이 엘리먼트의 내용물이 어떻게 정렬되는 지를 지정합니다. 이 속성들을 간단한 레이아웃 조정하는 데 사용할 수 있습니다:

  • text-align
내용물을 정렬합니다. 다음 값들중의 하나를 사용하세요:left, right, center, justify
  • text-indent
지정하는 만큼의 값으로 내용물을 들여씁니다.

이 속성들은 실제 텍스트 뿐만이 아니라 엘리먼트의 모든 유사-텍스트(text-like) 내용물에도 적용됩니다. 이 속성들은 엘리먼트의 자녀들에도 상속되므로, 예상치 못한 결과를 피하기 위해선 명시적으로 자녀들에서 이속성들을 꺼놓아야만 할 수도 있다는 점을 기억해 두세요.

Example
헤딩(heading)을 가운데 정렬하려면:
h3 {
  border-top: 1px solid gray;
  text-align: center;
  }

이런 결과가 나옵니다:

(A) The oceans

HTML문서에선 헤딩아래에 나오는 내용물은 헤딩에 구조적으로 포함되어있지(contained) 않습니다. 따라서 이와 같이 헤딩을 정렬할때, 헤딩 아래에 있는 택은 그 스타일을 상속받지 않습니다.

플로트(Floats)

float 속성은 엘리먼트를 왼쪽또는 오른쪽으로 강제로 옮김니다. 이 속성은 위치와 크기를 콘트롤하는 간단한 방법입니다.

문서 내용물의 나머지는 보통 옮겨진(floated) 엘리먼트 주위로 흐르는 식으로 배열 됩니다. float속성을 다른 엘리먼트들에 사용해서 플로트 엘리먼트(floats)들을 피하도록 조정할 수 있습니다.

Example
샘플 문서에서, 리스트가 뻗어나가 윈도우 횡으로 뻗어나갑니다. 리스트를 왼쪽으로 플로트(float)해서 이를 막을 수 있습니다.

또한, 헤딩(heading)을 제자리에 유지하기위해서, 헤딩 왼쪽에 플로트를 피하도록 지정해야만 합니다.

ul, #numbered {float: left;}
h3 {clear: left;}

The result looks like:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

(보더가 텍스트와 너무 근접해 있는 상자들의 오른편에 약간의 패딩이 필요합니다.)

위치지정(Positioning)

position 속성과 다음의 값들중의 하나를 지정함으로써 4가지 방식으로 어떤 엘리먼트의 위치를 지정할 수 있습니다.

이들은 고급 속성들입니다. 이들을 간단한 방식으로 사용할 수 있습니다&mdash 그래서 이 기본 입문서에도 언급이 되는 것입니다. 그러나 이들 속성을 복잡한 레이아웃을 위해 샤용하는 것은 어렵습니다.

  • relative
엘리먼트 위치를 보통 위치에 상대적으로 이동시킵니다.
지정된 값만큼 이동시킬때 이 속성을 사용하세요. 때론 같은 엘리먼트의 마진을 사용해서 같은 효과를 얻을 수 있습니다.
  • fixed
엘리먼트의 위치를 고정시킴니다.
문서 윈도우에 상대적인 엘리먼트 위치를 지정합니다. 문서의 나머지 부분이 스크롤(scroll)되더라도, 엘리먼트는 고정된 채로 남아있습니다.
  • absolute
엘리먼트의 위치를 부모엘리먼트에 상대적으로 고정시킴니다.
relative, fixed 또는 absolute 로 위치가 지정된 부모엘리먼트에 대해서 허용됩니다.
어떤 이동치(shift)도 지정하지 않은 채로 position: relative;를 지정해 줌으로써 어떤 부모 엘리먼트든 (허용이)적합하게 만들어 줄수 있습니다.
  • static
디폴트(defalult)값 입니다. 명시적으로 위치지정을 꺼야한다면 이 값을 사용하세요.

position 속성 (static 제외한) 값에 더해서, 엘리먼트가 어디에 나타나가를 원하는 지, 그리고 또 그 크기를 지정하기 위해서 다음의 속성들 중의 하나 혹은 그 이상을 지정하세요: top, right, bottom, left, width, height.

Example
두개의 엘리먼트를 서로의 위쪽에 위치시키기 위해서, 그 엘리먼트가 들어있는 문서에 부모 콘테이너(container)를 만드세요:
<DIV id="parent-div">
<P id="forward">/</P>
<P id="back">\</P>
</DIV>

스타일 시트에서 부모의 위치를 relative로 만드세요. 어떤 실제 이동치를 지정할 필요는 없습니다. 자녀의 위치를 absolute로 만드세요:

#parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

#forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

#forward {
  color: blue;
  }

#back {
  color: red;
  }

결과는 다음과 같은데, 뒤슬래시(backslash)가 앞슬래쉬(forward slash) 위쪽에 나옵니다:

/

\

More details
위치지정에 대한 모든 내용은 CSS 규약의 2개의 복잡한 장(chapter)에 걸쳐 나옵니다:Visual formatting model 그리고Visual formatting model details.

여러 브라우저들에서 작동하는 스타일 시트를 디자인하고 계시면, 브라우저가 표준을 해석하는 방식에 대한 차이들에 대한 설명과 특정 브라우저의 벅(bugs)에 대해서도 고려할 필요가 있습니다.

액션: 레이아웃(layout) 지정하기

샘플 문서와 스타일 시트를 위의 문서 구조 그리고 플로트 섹션의 예제들을 사용해서 변경하세요.

플로트 예제에서 패딩(padding)을 더해서 텍스트를 오른쪽 보더에서 0.5em 만큼 분리시키세요.

Challenge
샘플 문서를 거의 끝부분의 </BODY> 바로 앞에 다음의 택을 더해서 변경하세요.
<IMG id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">

이 입문서의 앞부분에서 다음 이미지 파일을 다운로드하시지 않았다먼 지금 다운로드하세요:

Image:Yellow-pin.png

문서의 어디에 이미지가 나타날 지 예상해 보세요. 그뒤 브라우저를 리프레쉬(refresh)해서 맞았는지 확인하세요.

스타일 시트에 이미지가 문서 오른쪽 상단에 고정시키는 규칙 하나를 추가하세요.

브라우저를 리프레쉬하고 윈도우를 작게 만드세요. 문서를 스크롤 할 때도 이미지가 오른쪽 상단에 머물러 있는 지 확인하세요:

(A) The oceans

  • Arctic
  • Atlantic
  • Pacific
  • Indian
  • Southern

(B) Numbered paragraphs

1: Lorem ipsum

2: Dolor sit

3: Amet consectetuer

4: Magna aliquam

5: Autem veleum

 

Yellow map pin

그럼 다음은?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

이 기본 CSS 입문서의 모든 토픽을 거의 다 커버하셨습니다. 다음 페이지에서는 CSS규칙의 보다 고급 선별자들과 표(table)을 스타일 하는 몇가지 특정한 방법들을 기술합니다: Tables

{{ wiki.languages( { "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pl": "pl/CSS/Na_pocz\u0105tek/Uk\u0142ad" } ) }}

리비전 소스

<p>이 페이지는 문서의 레이아웃(layout)을 조정하는 몇가지 방법들을 기술합니다.
</p><p>샘플 문서의 레이아웃을 변경합니다.
</p>
<h3 name="Information:_Layout"> Information: Layout </h3>
<h3 name=".EC.A0.95.EB.B3.B4:_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.28Layout.29"> 정보: 레이아웃(Layout) </h3>
<p>CSS를 사용해서 문서의 레이아웃을 바꾸는 다양한 시각적 효과를 지정할 수 있습니다.
레이아웃을 지정하는 몇가지 테크닉(techniques)은 고급기술이며, 이 기초 입문서의 범위를 벗어납니다.
</p><p>다양한 브라우저에서 비슷하게 보이는 레이아웃을 디자인할 때, 스타일 시트는 브라우저의 디폴트(default) 스타일 시트및 레이아웃 엔진(engine)과 복잡할 수도 있는 방식으로 상호작용합니다.
</p><p>이 페이지는 시도해볼 수 있는 간단한 몇가지 테크닉을 기술합니다.
</p>
<h4 name=".EB.AC.B8.EC.84.9C_.EA.B5.AC.EC.A1.B0"> 문서 구조 </h4>
<p>문서의 레이아웃을 콘트롤하고 싶으시면 문서의 구조를 변경해야 할 수도 있습니다.
</p><p>문서의 마크업(markup)언어는 구조를 생성시키는데 일반적인 목적을 가진 택들을 포함하고 있을 수 있습니다.
예를들면, HTML에서 구조를 생성하기 위해서  <code>DIV</code> 택을 사용할 수 있습니다. 
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> 샘플 문서에서 두번째 헤딩(second heading)아래에 있는 숫자로 나열된 단락들은 자신들의 콘테이너(container)를 가지고 있지 않습니다.
<p>선별자 안에 지정하고 있는 엘리먼트가 없기때문에 스타일 시트는 이들 단락주위에 보더를 그릴 수 없습니다.
</p><p>이러한 구조적 문제를 고치기 위해서, 단락주위에 <code>DIV</code> 택을 더할 수 있습니다.
이 택은 고유하기 때문에 <code>id</code> 속성으로 분간될 수 있습니다.
</p>
<div style="width:40em;color:gray;">
<pre class="eval">&lt;H3 class="numbered"&gt;Numbered paragraphs&lt;/H3&gt;
<strong style="color:black;">&lt;DIV id="numbered"&gt;</strong>
&lt;P class="numbered"&gt;Lorem ipsum&lt;/P&gt;
&lt;P class="numbered"&gt;Dolor sit&lt;/P&gt;
&lt;P class="numbered"&gt;Amet consectetuer&lt;/P&gt;
&lt;P class="numbered"&gt;Magna aliquam&lt;/P&gt;
&lt;P class="numbered"&gt;Autem veleum&lt;/P&gt;
<strong style="color:black;">&lt;/DIV&gt;</strong>
</pre>
</div>
<p>이제 스타일 시트는 규칙하나를 사용해서 리스트 모두에 보더를 지정할 수 있습니다:
</p>
<div style="width:30em;">
<pre class="eval">ul, #numbered {
  border: 1em solid #69b;
  padding-right:1em;
  }
</pre>
</div>
<p>결과는 이렇게 보입니다:
</p>
<table style="border:2px outset #36b; padding:1em; width:30em;background-color:white;">
<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="list-style:lower-roman;">
<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><b>1: </b>Lorem ipsum</p>
<p><b>2: </b>Dolor sit</p>
<p><b>3: </b>Amet consectetuer</p>
<p><b>4: </b>Magna aliquam</p>
<p><b>5: </b>Autem veleum</p>
</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<h4 name=".ED.81.AC.EA.B8.B0_.EC.9C.A0.EB.8B.9B.28Units.29"> 크기 유닛(Units) </h4>
<p>지금 까지 이 입문서에서 크기는 픽셀로 (<code>px</code>) 지정했습니다.
이 유닛은 컴퓨터 화면 같은 디스플레이 장치에 대한 몇가지 경우들에 적합합니다.
그러나 사용자가 폰트 크기를 변경하면, 레이아웃이 잘 못 될 수 있습니다.
</p><p>For many purposes it is better to specify sizes as a percentage or in ems (<code>em</code>).
An em is nominally the size of the current font (the width of a letter m).
When the user changes the font size, your layout adjusts automatically.
</p><p>많은 경우에 크기를 백분율(percentage)이나 ems (<code>em</code>) 로 지정하는 것이 보다 낫습니다.
em은 명목상으로 현재 사용중인 폰트의 크기 입니다 (문자 m의 폭).
사용자가 폰트 크기를 변경하면 레이우웃은 자동적으로 그에 맞게 조정됩니다.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> 이 텍스트의 왼쪽 보더는 픽셀로 지정된 크기를 가지고 있습니다.
<p>오른쪽 보더는 ems로 지정된 크기를 가지고 있습니다.
</p><p>브라우저에서, 폰트를 변경해서 오른쪽 보더는 조정이 되는 반면 왼쪽 보더는 그렇지 않다는 것을 보세요:
</p>
<table style="border:2px outset #36b; padding:1em;background-color:white;">
<tbody><tr>
<td><div style="font-size;10px;float:left; padding:.25em; border:10px solid #7ac;border-width:0px 1em 0px 12px;">RESIZE ME PLEASE</div>
</td></tr></tbody></table>
</td></tr></tbody></table>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details
</caption><tbody><tr>
<td> 다른 장치에겐 다른 길이 유닛(length unit)이 적합합니다.
<p>이 입문서의 뒷 페이지에 이에 관한 더 많은 정보가 있습니다.
</p><p>값과 유닛에 관한 전체 설명을 원하시면, CSS 규약의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#values">Values</a>을 보세요.
</p>
</td></tr></tbody></table>
<h4 name=".ED.85.8D.EC.8A.A4.ED.8A.B8_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83"> 텍스트 레이아웃 </h4>
<p>두가지 속성이 엘리먼트의 내용물이 어떻게 정렬되는 지를 지정합니다.
이 속성들을 간단한 레이아웃 조정하는 데 사용할 수 있습니다:
</p>
<ul><li><code>text-align</code>
</li></ul>
<dl><dd>내용물을 정렬합니다. 다음 값들중의 하나를 사용하세요:<code>left</code>, <code>right</code>, <code>center</code>, <code>justify</code>
</dd></dl>
<ul><li><code>text-indent</code>
</li></ul>
<dl><dd>지정하는 만큼의 값으로 내용물을 들여씁니다.
</dd></dl>
<p>이 속성들은 실제 텍스트 뿐만이 아니라 엘리먼트의 모든 유사-텍스트(text-like) 내용물에도 적용됩니다.
이 속성들은 엘리먼트의 자녀들에도 상속되므로, 예상치 못한 결과를 피하기 위해선 명시적으로 자녀들에서 이속성들을 꺼놓아야만 할 수도 있다는 점을 기억해 두세요.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> 헤딩(heading)을 가운데 정렬하려면:
<div style="width:30em;">
<pre class="eval">h3 {
  border-top: 1px solid gray;
  text-align: center;
  }
</pre>
</div>
<p>이런 결과가 나옵니다:
</p>
<table style="border:2px outset #36b; padding:1em; width:30em;background-color:white;">
<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문서에선 헤딩아래에 나오는 내용물은 헤딩에 구조적으로 포함되어있지(contained) 않습니다.
따라서 이와 같이 헤딩을 정렬할때, 헤딩 아래에 있는 택은 그 스타일을 상속받지 않습니다. 
</p>
</td></tr></tbody></table>
<h4 name=".ED.94.8C.EB.A1.9C.ED.8A.B8.28Floats.29"> 플로트(Floats) </h4>
<p><code>float</code> 속성은 엘리먼트를 왼쪽또는 오른쪽으로 강제로 옮김니다.
이 속성은 위치와 크기를 콘트롤하는 간단한 방법입니다.
</p><p>문서 내용물의 나머지는 보통 옮겨진(floated) 엘리먼트 주위로 흐르는 식으로 배열 됩니다.
<code>float</code>속성을 다른 엘리먼트들에 사용해서 플로트 엘리먼트(floats)들을 피하도록 조정할 수 있습니다. 
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> 샘플 문서에서, 리스트가 뻗어나가 윈도우 횡으로 뻗어나갑니다. 리스트를 왼쪽으로 플로트(float)해서 이를 막을 수 있습니다.
<p>또한, 헤딩(heading)을 제자리에 유지하기위해서, 헤딩 왼쪽에 플로트를 피하도록 지정해야만 합니다.
</p>
<div style="width:30em;">
<pre class="eval">ul, #numbered {float: left;}
h3 {clear: left;}
</pre>
</div>
<p>The result looks like:
</p>
<table style="border:2px outset #36b; padding:1em; width:30em;background-color:white;">
<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="list-style:lower-roman;">
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
</div>
<p style="clear:left; 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><b>1: </b>Lorem ipsum</p>
<p><b>2: </b>Dolor sit</p>
<p><b>3: </b>Amet consectetuer</p>
<p><b>4: </b>Magna aliquam</p>
<p><b>5: </b>Autem veleum</p>
</div>
</td></tr></tbody></table>
<p>(보더가 텍스트와 너무 근접해 있는 상자들의 오른편에 약간의 패딩이 필요합니다.)
</p>
</td></tr></tbody></table>
<h4 name=".EC.9C.84.EC.B9.98.EC.A7.80.EC.A0.95.28Positioning.29"> 위치지정(Positioning) </h4>
<p><code>position</code> 속성과 다음의 값들중의 하나를 지정함으로써 4가지 방식으로 어떤 엘리먼트의 위치를 지정할 수 있습니다.
</p><p>이들은 고급 속성들입니다.
이들을 간단한 방식으로 사용할 수 있습니다&amp;mdash 그래서 이 기본 입문서에도 언급이 되는 것입니다.
그러나 이들 속성을 복잡한 레이아웃을 위해 샤용하는 것은 어렵습니다.
</p>
<ul><li><code>relative</code>
</li></ul>
<dl><dd>엘리먼트 위치를 보통 위치에 상대적으로 이동시킵니다.
</dd><dd>지정된 값만큼 이동시킬때 이 속성을 사용하세요. 때론 같은 엘리먼트의 마진을 사용해서 같은 효과를 얻을 수 있습니다.
</dd></dl>
<ul><li><code>fixed</code>
</li></ul>
<dl><dd>엘리먼트의 위치를 고정시킴니다.
</dd><dd>문서 윈도우에 상대적인 엘리먼트 위치를 지정합니다. 문서의 나머지 부분이 스크롤(scroll)되더라도, 엘리먼트는 고정된 채로 남아있습니다.
</dd></dl>
<ul><li><code>absolute</code>
</li></ul>
<dl><dd>엘리먼트의 위치를 부모엘리먼트에 상대적으로 고정시킴니다.
</dd><dd><code>relative</code>, <code>fixed</code> 또는 <code>absolute</code> 로 위치가 지정된 부모엘리먼트에 대해서 허용됩니다. 
</dd></dl>
<dl><dd>어떤 이동치(shift)도 지정하지 않은 채로 <code>position: relative;</code>를 지정해 줌으로써 어떤 부모 엘리먼트든 (허용이)적합하게 만들어 줄수 있습니다.
</dd></dl>
<ul><li><code>static</code>
</li></ul>
<dl><dd>디폴트(defalult)값 입니다. 명시적으로 위치지정을 꺼야한다면 이 값을 사용하세요. 
</dd></dl>
<p><code>position</code> 속성 (<code>static</code> 제외한) 값에 더해서, 엘리먼트가 어디에 나타나가를 원하는 지, 그리고 또 그 크기를 지정하기 위해서 다음의 속성들 중의 하나 혹은 그 이상을 지정하세요: <code>top</code>, <code>right</code>, <code>bottom</code>, <code>left</code>, <code>width</code>, <code>height</code>.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Example
</caption><tbody><tr>
<td> 두개의 엘리먼트를 서로의 위쪽에 위치시키기 위해서, 그 엘리먼트가 들어있는 문서에 부모 콘테이너(container)를 만드세요:
<div style="width:30em;">
<pre class="eval">&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>
</div>
<p>스타일 시트에서 부모의 위치를  <code>relative</code>로 만드세요.
어떤 실제 이동치를 지정할 필요는 없습니다.
자녀의 위치를 <code>absolute</code>로 만드세요:
</p>
<div style="width:30em;"><pre>
#parent-div {
  position: relative;
  font: bold 200% sans-serif;
  }

#forward, #back {
  position: absolute;
  margin:0px;
  top: 0px;
  left: 0px;
  }

#forward {
  color: blue;
  }

#back {
  color: red;
  }
</pre></div>
<p>결과는 다음과 같은데, 뒤슬래시(backslash)가 앞슬래쉬(forward slash) 위쪽에 나옵니다:
</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="border:2px outset #36b;padding:1em;width:30em;height:5em;background-color:white;">

<tbody><tr><td></td></tr></tbody></table>
</td></tr></tbody></table>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">More details
</caption><tbody><tr>
<td> 위치지정에 대한 모든 내용은 CSS 규약의 2개의 복잡한 장(chapter)에 걸쳐 나옵니다:<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>여러 브라우저들에서 작동하는 스타일 시트를 디자인하고 계시면, 브라우저가 표준을 해석하는 방식에 대한 차이들에 대한 설명과 특정 브라우저의 벅(bugs)에 대해서도 고려할 필요가 있습니다.
</p>
</td></tr></tbody></table>
<h3 name=".EC.95.A1.EC.85.98:_.EB.A0.88.EC.9D.B4.EC.95.84.EC.9B.83.28layout.29_.EC.A7.80.EC.A0.95.ED.95.98.EA.B8.B0"> 액션: 레이아웃(layout) 지정하기 </h3>
<p>샘플 문서와 스타일 시트를 위의 <b>문서 구조</b> 그리고 <b>플로트</b> 섹션의 예제들을 사용해서 변경하세요.
</p><p><b>플로트</b> 예제에서 패딩(padding)을 더해서 텍스트를 오른쪽 보더에서 0.5em 만큼 분리시키세요.
</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;">
<caption style="font-weight:bold; text-align:left; margin-top:1em;">Challenge
</caption><tbody><tr>
<td> 샘플 문서를 거의 끝부분의 <code>&lt;/BODY&gt;</code> 바로 앞에 다음의 택을 더해서 변경하세요.
<pre>
&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" src="File:ko/Media_Gallery/Yellow-pin.png">
</td></tr></tbody></table>
<p>문서의 어디에 이미지가 나타날 지 예상해 보세요.
그뒤 브라우저를 리프레쉬(refresh)해서 맞았는지 확인하세요.
</p><p>스타일 시트에 이미지가 문서 오른쪽 상단에 고정시키는 규칙 하나를 추가하세요.
</p><p>브라우저를 리프레쉬하고 윈도우를 작게 만드세요.
문서를 스크롤 할 때도 이미지가 오른쪽 상단에 머물러 있는 지 확인하세요:
</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="list-style:lower-roman;">
<li>Arctic</li>
<li>Atlantic</li>
<li>Pacific</li>
<li>Indian</li>
<li>Southern</li>
</ul>
</div>
<p style="clear:left; 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><b>1: </b>Lorem ipsum</p>
<p><b>2: </b>Dolor sit</p>
<p><b>3: </b>Amet consectetuer</p>
<p><b>4: </b>Magna aliquam</p>
<p><b>5: </b>Autem veleum</p>
</div>
<p style="clear:left;"> </p>
<div style="position:absolute; top:2px; right:0px;"><img alt="Yellow map pin" src="File:ko/Media_Gallery/Yellow-pin.png"></div>
</div>
</div>
</td></tr></tbody></table>
<h4 name=".EA.B7.B8.EB.9F.BC_.EB.8B.A4.EC.9D.8C.EC.9D.80.3F"> 그럼 다음은? </h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="Talk:ko/CSS/Getting_Started/Layout">Discussion</a> page.
</p><p>이 기본 CSS 입문서의 모든 토픽을 거의 다 커버하셨습니다.
다음 페이지에서는 CSS규칙의 보다 고급 선별자들과 표(table)을 스타일 하는 몇가지 특정한 방법들을 기술합니다: <b><a href="ko/CSS/Getting_Started/Tables">Tables</a></b>
</p>{{ wiki.languages( { "fr": "fr/CSS/Premiers_pas/Mise_en_page", "pl": "pl/CSS/Na_pocz\u0105tek/Uk\u0142ad" } ) }}
Revert to this revision