diff options
Diffstat (limited to 'files/ko/conflicting/learn/css/css_layout/index.html')
| -rw-r--r-- | files/ko/conflicting/learn/css/css_layout/index.html | 371 |
1 files changed, 0 insertions, 371 deletions
diff --git a/files/ko/conflicting/learn/css/css_layout/index.html b/files/ko/conflicting/learn/css/css_layout/index.html deleted file mode 100644 index 1b3c4a73ca..0000000000 --- a/files/ko/conflicting/learn/css/css_layout/index.html +++ /dev/null @@ -1,371 +0,0 @@ ---- -title: 배치 -slug: conflicting/Learn/CSS/CSS_layout -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout -original_slug: Web/CSS/시작하기/배치 ---- -<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> |