diff options
Diffstat (limited to 'files/ko/web/css/시작하기/배치/index.html')
| -rw-r--r-- | files/ko/web/css/시작하기/배치/index.html | 369 |
1 files changed, 369 insertions, 0 deletions
diff --git a/files/ko/web/css/시작하기/배치/index.html b/files/ko/web/css/시작하기/배치/index.html new file mode 100644 index 0000000000..0b39699419 --- /dev/null +++ b/files/ko/web/css/시작하기/배치/index.html @@ -0,0 +1,369 @@ +--- +title: 배치 +slug: Web/CSS/시작하기/배치 +translation_of: Learn/CSS/CSS_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]"><h3>Numbered paragraphs</h3> +<div id="numbered"> + <p>Lorem ipsum</p> + <p>Dolor sit</p> + <p>Amet consectetuer</p> + <p>Magna aliquam</p> + <p>Autem veleum</p> +</div> +</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"><div id="parent-div"> + <p id="forward">/</p> + <p id="back">\</p> +</div> +</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의 아래쪽 </body> 바로 위에 아래 태그를 추가하라</code>.</p> + +<pre class="brush:html"><img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin"> +</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> |