diff options
Diffstat (limited to 'files/ko/learn/css')
39 files changed, 11362 insertions, 0 deletions
diff --git a/files/ko/learn/css/basics/layout/index.html b/files/ko/learn/css/basics/layout/index.html new file mode 100644 index 0000000000..50cfb20039 --- /dev/null +++ b/files/ko/learn/css/basics/layout/index.html @@ -0,0 +1,408 @@ +--- +title: Introduction to CSS Layout +slug: Learn/CSS/Basics/Layout +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> + +<p class="summary"><span class="seoSummary">CSS layout is the art of using various CSS properties to alter the positioning of elements on a document in order to fit the design requirements.</span> CSS provides many layout mechanisms, the more advanced and modern techniques are so complex that they get their own articles. In this article, we will introduce the basic techniques that have been used for years.</p> + +<p>To properly layout a document with CSS, there are a few notions that one must know. The most important of these is {{Glossary("HTML")}} text flow. We will cover it in this article. Articles about other layout mechanisms will, at some point or the other, refer back to what we are discussing here.</p> + +<h2 id="The_flow">The flow</h2> + +<p>At its most basic level an HTML document is a text document structured with {{Glossary("tag","tags")}}. In such a document, the text <em>flows</em>. That means text is displayed in the reading direction (from left to right, for example, in Latin based languages like English or French) and is broken automatically - creating new lines - each time the text reaches an edge of the document.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg" style="height: auto; max-width: 450px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11955/line-break-flow.svg#large" style="height: auto; max-width: 450px;"></p> + +<p>Each {{Glossary("element","elements")}} in the document alters the flow of text in various ways:</p> + +<ul> + <li>Some elements can simply follow the text flow as if they were non-existent.</li> + <li>Some elements can force a line break at any point in the flow whether it has reached the edge of the document or not.</li> + <li>Some elements can create a new text flow for their inner content independent from the main text flow.</li> +</ul> + +<h3 id="디스플레이_요소_(Elements_display_categories)">디스플레이 요소 (Elements display categories)</h3> + +<p>CSS is used to define how an HTML element behaves within the flow and how it get in and out of that flow. The element behavior is defined using the property {{cssxref('display')}}. This property can take tons of values but let's focus on the four most important:</p> + +<dl> + <dt>none</dt> + <dd>모든 요소를 제거 합니다.</dd> + <dt>inline</dt> + <dd>줄을 바꾸지 않고, 해당 위치에서 다른 요소들과 같은 선상에 위치하려는 성질을 말합니다. </dd> + <dt>block</dt> + <dd>This value is for the element to break the text flow with a forced line break before and after it. Its content is no longer part of the global text flow and flows only within the constraints provided by the element <a href="/en-US/docs/Learn/CSS/Basics/Box_model">box model</a>.</dd> + <dt>inline-block</dt> + <dd>This value makes the element somewhat in between inline and block type display: like <code>inline</code> boxes it flows with the text normally but, like block boxes, it's content is no longer part of the global text.</dd> +</dl> + +<p>Let's see an example.</p> + +<p>HTML:</p> + +<pre class="brush: html"><p class="none"> + 1. I'm a big black cat, + <span>walking under a ladder,</span> + and I can see broken mirrors everywhere. +</p> + +<p class="inline"> + 2. I'm a big black cat, + <span>walking under a ladder,</span> + and I can see broken mirrors everywhere. +</p> + +<p class="block"> + 3. I'm a big black cat, + <span>walking under a ladder,</span> + and I can see broken mirrors everywhere. +</p> + +<p class="inline-block"> + 4. I'm a big black cat, + <span>walking under a ladder,</span> + and I can see broken mirrors everywhere. +</p> +</pre> + +<p>CSS:</p> + +<pre class="brush: css">span { + width: 5em; + background: yellow; +} + +.none span { display: none; } +.inline span { display: inline; } +.block span { display: block; } +.inline-block span { display: inline-block; }</pre> + +<p>Results:</p> + +<p>{{EmbedLiveSample('Elements_display_categories', '100%', '300px')}}</p> + +<h2 id="Altering_the_flow">Altering the flow</h2> + +<p>By setting the display property you're already altering the flow, but you can go further.</p> + +<h3 id="Text_layout">Text layout</h3> + +<p>While an HTML document is nothing more than a long text flow, CSS provides many properties to deal with simple text layout. The text layout is everything that allows changing the text line breaking rules and the way the text is positioned over the natural text line.</p> + +<p>Those properties are: {{cssxref("hyphens")}}, {{cssxref("text-align")}}, {{cssxref("text-align-last")}}, {{cssxref("text-indent")}}, {{cssxref("vertical-align")}}, {{cssxref("white-space")}}, {{cssxref("word-break")}}, and {{cssxref("word-wrap")}}.</p> + +<p>Except for <code>text-align and<font face="Open Sans, Arial, sans-serif">, </font></code><code>text-indent </code>the other properties have subtle effects on the text and <code>vertical-align</code> is often used with inline-block boxes.</p> + +<p>An example will make things clearer.</p> + +<p>HTML:</p> + +<pre class="brush: html"><p lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> +<p class="format" lang="en">WHEN Scrooge awoke, it was so dark, that looking out of bed, he could scarcely distinguish the transparent window from the opaque walls of his chamber. He was endeavouring to pierce the darkness with his ferret eyes, when the chimes of a neighbouring church struck the four quarters. So he listened for the hour. To his great astonishment the heavy bell went on from six to seven, and from seven to eight, and regularly up to twelve; then stopped. Twelve! It was past two when he went to bed. The clock was wrong. An icicle must have got into the works. Twelve! He touched the spring of his repeater, to correct this most preposterous clock. Its rapid little pulse beat twelve: and stopped.</p> +</pre> + +<p>CSS:</p> + +<pre class="brush: css">.format { + /* The first line is "pull" to a 2em distance */ + text-indent: -2em; + + /* We need to compensate the negative indent + to avoid unwanted text clipping and keep + the whole text within the boundary of its + element box */ + padding-left: 2em; + + /* The text is aligned on both edges, adjusting + spacing between words as necessary */ + text-align: justify; + + /* The last line of the block of text is centered */ + -moz-text-align-last: center; + text-align-last: center; + + /* Rather than line break between two words the line + break can occur inside words, according to the rules + defined for the text language. This makes nice word cut + with a clear hyphen dash. If you don care about word + breaking rules, you could just use word-break or + word-wrap instead */ + -webkit-hyphens: auto; + -moz-hyphens: auto; + -ms-hyphens: auto; + hyphens: auto; +}</pre> + +<div class="note"> +<p>As you might notice, some properties are written multiple times with some prefix. This is because those prefixed properties are still experimental for some browsers and it is considered best practice to use them all with the standard property at the end of the list in order to provide the best backward compatibility possible.</p> +</div> + +<p>Results:</p> + +<p>{{ EmbedLiveSample('Text_layout', '100%', '350') }}</p> + +<div class="note"> +<p>It's worth noting that the trick we used to compensate the negative text indentation is a very common trick. Any property that accepts a length also accepts negative values. By fiddling with negative values and compensating them with other properties, it's possible to produce very clever effects on the layout, especially when it applies to properties of the box model.</p> +</div> + +<h3 id="Floating">Floating</h3> + +<p>Okay, handling text is nice, but at some point what we really want is to move boxes around the document. The first way to handle that is to deal with floating boxes. Floating boxes are still attached to the global text flow, but the text will flow around. Sounds weird, so let's see an example.</p> + +<h4 id="Simple_floating">Simple floating</h4> + +<p>HTML:</p> + +<pre class="brush: html"><div> + <p class="excerpt">"Why, it isn't possible," said Scrooge, "that I can have slept through a whole day and far into another night. It isn't possible that anything has happened to the sun, and this is twelve at noon!" </p> + <p> The idea being an alarming one, he scrambled out of bed, and groped his way to the window. He was obliged to rub the frost off with the sleeve of his dressing-gown before he could see anything; and could see very little then. All he could make out was, that it was still very foggy and extremely cold, and that there was no noise of people running to and fro, and making a great stir, as there unquestionably would have been if night had beaten off bright day, and taken possession of the world. This was a great relief, because "three days after sight of this First of Exchange pay to Mr. Ebenezer Scrooge or his order," and so forth, would have become a mere United States' security if there were no days to count by.</p> +</div></pre> + +<p>CSS:</p> + +<pre class="brush: css">.excerpt { + /* A floating box will act like a block whatever + the value of display we are using */ + display: block; + + /* Our box is floating to the left, which means + it will stack on the left side of the containing + block and the text will flow on its right side. */ + float: left; + + /* It is required to set a width to a floating box. + If we don't its width will be set + automatically, which means that it will grow as much + as possible and nothing will flow around it, like an + ordinary block box */ + width: 40%; + + /* We set some margins on the right and bottom side of + the box to avoid having the text flowing around being + in direct visual contact of our floating box */ + margin: 0 1em 1em 0; + + /* We make our floating box more visible with + a simple background color */ + background: lightgrey; + + /* As we have a solid background color it's a nice idea + to push the content a little bit away from the edges + of the box */ + padding: 1em; +}</pre> + +<p>Results:</p> + +<p>{{ EmbedLiveSample('Simple_floating', '100%', '280') }}</p> + +<h4 id="Layout_with_floating">Layout with floating</h4> + +<p>This is a very simple effect to start tweaking the flow to our wishes. Now it's possible to do better and start performing some true layout. A floating box that floats in a given direction stacks horizontally, it's a very convenient way to create rows of boxes instead of natural columns: In the flow, block boxes stack in columns and floating boxes stack in rows.</p> + +<p>Once again, an example will make things clearer.</p> + +<p>HTML:</p> + +<pre class="brush: html"><div class="layout"> + <div class="row"> + <p class="cell size50">Scrooge went to bed again, and thought, and thought, and thought it over and over and over, and could make nothing of it. The more he thought, the more perplexed he was; and the more he endeavoured not to think, the more he thought.</p> + <p class="cell size50">Marley's Ghost bothered him exceedingly. Every time he resolved within himself, after mature inquiry, that it was all a dream, his mind flew back again, like a strong spring released, to its first position, and presented the same problem to be worked all through, "Was it a dream or not?"</p> + </div> + <div class="row"> + <p class="cell size100">Scrooge lay in this state until the chime had gone three quarters more, when he remembered, on a sudden, that the Ghost had warned him of a visitation when the bell tolled one. He resolved to lie awake until the hour was passed; and, considering that he could no more go to sleep than go to Heaven, this was perhaps the wisest resolution in his power.</p> + </div> + <div class="row"> + <p class="cell size33">The quarter was so long, that he was more than once convinced he must have sunk into a doze unconsciously, and missed the clock. At length it broke upon his listening ear.</p> + <p class="cell size33"> + "Ding, dong!"<br> + "A quarter past," said Scrooge, counting.<br> + "Ding, dong!"<br> + "Half-past!" said Scrooge.<br> + "Ding, dong!"<br> + "A quarter to it," said Scrooge.<br> + "Ding, dong!"<br> + "The hour itself," said Scrooge, triumphantly, "and nothing else!" + </p> + <p class="cell size33"> + He spoke before the hour bell sounded, which it now did with a deep, dull, hollow, melancholy ONE. Light flashed up in the room upon the instant, and the curtains of his bed were drawn. + </p> + </div> +</div></pre> + +<p>CSS:</p> + +<pre class="brush: css">/* This is our main layout container */ +.layout { + /* A background makes it visible */ + background: lightgrey; + + /* We add a small visual spacing to harmonize + the distance between the cells content and + and the layout border */ + padding : 0.5em; +} + +/* A floating box gets somewhat out of + the flow, so if their container is empty + it will have a zero height size and the + floating box will overflow it. To + avoid such a situation, we make sure floating + boxes are not allowed to overflow. In + that specific context, with an overflow + hidden, floating boxes won't be clipped, + the parent box will extend to avoid any + floating box overflow. */ +.row { + overflow: hidden; +} + +/* Each cell is a left floating box */ +.cell { + float : left; + + /* we add padding to our cell to create + some nice visual gutters between them */ + padding : 0.5em; + + /* Because we are adding padding, we need + to be sure that it will not impact + the box width. */ + box-sizing: border-box; + + /* As margins cannot be controlled with the + box-sizing property, we need to be sure + there is none applied to our cell. */ + margin : 0; +} + +/* Those are the sizes we can apply to our boxes */ +.size33 { width: 33%; } /* Not exactly a third, but good enough */ +.size50 { width: 50%; } /* A half */ +.size100 { width: 100%; } /* A full row */</pre> + +<p>Results:</p> + +<p>{{ EmbedLiveSample('Layout_with_floating', '100%', '520') }}</p> + +<p>Using floating boxes this way, is what many CSS frameworks do. It's a robust and well-known technique but it has limits as everything must go with the flow: it's not possible to handle boxes in arbitrary order, variable sizing can be quite tricky to achieve, and vertical centering is impossible. We encourage you to dig deeper as <a href="http://www.positioniseverything.net/articles/onetruelayout/">floating boxes has been studied for long</a> and they are among the most robust solutions for a simple layout that must be compatible with legacy browsers.</p> + +<p>If you want to better understand all the subtleties of floating boxes, we encourage you to read <em><a href="https://css-tricks.com/all-about-floats/">All about float</a></em> by Chris Coyer.</p> + +<h3 id="Positioning">Positioning</h3> + +<p>If floating boxes are still part of the flow, another mechanism exists to perform some layouts by extracting boxes out of the flow: CSS Positioning. Positioning is acheived by defining a positioning context with the {{cssxref("position")}} property and then allows boxes to be positioned using {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties.</p> + +<p>The {{cssxref("position")}} property can take on four different values:</p> + +<dl> + <dt>static</dt> + <dd>This is the default value for all elements: they are part of the flow and don't define any specific positioning context.</dd> + <dt>relative</dt> + <dd>With this value, elements are still part of the flow, but they can be visually moved around their positions with {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}}. They also define a positioning context for their children elements.</dd> + <dt>absolute</dt> + <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is defined by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the closest parent element which defines a positionning context other than <em>static</em>. If there is no parent with a positioning context, then, the 0,0 position point for the top/left corner of the box is the top/left corner of the document.</dd> + <dt>fixed</dt> + <dd>With this value, elements are pushed out of the flow and no longer influence it. The position of such blocks is define by the {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}, and {{cssxref("bottom")}} properties. The 0,0 position point for the top/left corner of the box is the top/left corner of the browser window {{Glossary("viewport")}}.</dd> +</dl> + +<p>Such positioned boxes can stack on top of each other. In that case, it's possible to change the stacking order by using the {{cssxref("z-index")}} property.</p> + +<p>Okay, let's see an example to visualize it at work.</p> + +<p>HTML:</p> + +<pre class="brush: html"><div class="relative"> + <div class="absolute-one"> + <p>Position:absolute</p></br> + <p>Top Right</p> + </div> + + <div class="absolute-two"> + <p>Position:absolute</p></br> + <p>Bottom Centre</p> + </div> + + <div class="absolute-three"> + <p>Position:static</p></br> + <p>Where it falls</p> + </div> +</div></pre> + +<p>CSS:</p> + +<pre class="brush: css">p { + text-align: centre; + color: #fff; +} + + +/* Setting the position to relative +allows any child elements to be positioned +anywhere, in <em><strong>relation</strong> to its container. */ +</em> +.relative { + position: relative; + width: 95%; + margin: 0 auto; + height: 300px; + background-color: #fff; + border: 3px solid #ADD8E6; +} + +/* Just some styles for text alignment /* +.relative div { + text-align: center; + padding: 5px; + display: block; + width: 125px; + height: 125px; + background-color: #ADD8E6; +} + +/* By setting this div to position absolute +we can position this element anywhere in relation +to the 'relative' div /* +.absolute-one { + position: absolute; + top: 0; + right: 0; +} + +/* Unlike the first div which was positioned at the +top right corner of the container div. '.absolute-two' +is positioned bottom centre. By setting both left and right +to 0, along with margin:auto. +.absolute-two { + position: absolute; + bottom: 0; + right: 0; + left: 0; + margin: auto; +} + +/* Where the div would fall naturally within it's container. +This is also useful for returning elements from a floated +position. E.g. on responsive styles. /* +.absolute-three { + position: static; +} +</pre> + +<p>Results:</p> + +<p>{{ EmbedLiveSample('Positioning', '100%', '400') }}</p> + +<p>If CSS positioning isn't really used for full layout, it is used quite often to deal with trick UX effect such as navigation layout, tooltip and such. This is something you'll see on a regular basis so we encourage you to get into it. Among various resources about it, we suggest you take a look at the article <em><a href="http://alistapart.com/article/css-positioning-101">CSS positioning 101</a></em> by Noah Stokes.</p> + +<h2 id="What's_next">What's next</h2> + +<p>The flow, the floating boxes, and CSS positioning are the basic CSS knowledge that will drive you into CSS layout. Now you are ready to use CSS to its full potential! You should now take some time looking at <a href="/en-US/docs/Learn/CSS/Howto">practical usage of CSS</a>. If you want to dig even deeper into layouts, you should definitely take a look at the other layout mechanism that exists with CSS: Table display, <a href="/en-US/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">multiple columns layout</a>, and <a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes">flexible box layout</a>.</p> + +<p>{{PreviousNext("Learn/CSS/Basics/Box_model","Learn/CSS/Howto/style_text")}}</p> + +<div class="grammarly-disable-indicator"> </div> diff --git a/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html new file mode 100644 index 0000000000..a5e2983ea7 --- /dev/null +++ b/files/ko/learn/css/building_blocks/backgrounds_and_borders/index.html @@ -0,0 +1,318 @@ +--- +title: 배경 및 테두리 +slug: Learn/CSS/Building_blocks/Backgrounds_and_borders +translation_of: Learn/CSS/Building_blocks/Backgrounds_and_borders +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</div> + +<p>이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴보겠습니다. 그라데이션 (gradients), 배경 이미지, 둥근 테두리를 추가하는 것에서 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>박스의 배경과 테두리 스타일을 지정하는 방법 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_의_스타일링_배경">CSS 의 스타일링 배경</h2> + +<p>CSS {{cssxref("background")}} 속성은 이 수업에서 만나게 될 많은 background longhand 속성의 줄임말 입니다. 스타일 시트에서 복잡한 배경 속성을 발견하면, 한 번에 많은 값을 전달할 수 있으므로 이해하기 어려울 수 있습니다.</p> + +<pre class="brush: css"><code>.box { + background: linear-gradient(105deg, rgba(255,255,255,.2) 39%, rgba(51,56,57,1) 96%) center center / 400px 200px no-repeat, + url(big-star.png) center no-repeat, rebeccapurple; +} </code> +</pre> + +<p>이 자습서의 뒷부분에서 속기 (shorthand) 작동 방식으로 돌아가지만, 먼저 개별 배경 속성을 보고, CSS 에서 배경으로 수행할 수 있는 다양한 작업을 살펴보겠습니다.</p> + +<h3 id="배경_색상">배경 색상</h3> + +<p>{{cssxref("background-color")}} 속성은 CSS 의 모든 요소에 대한 배경색을 정의합니다. 이 속성은 유효한 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> 를 허용합니다. <code>background-color</code> 는 요소의 내용 및 패딩 박스 아래로 확장됩니다.</p> + +<p>아래 예에서는 다양한 색상 값을 사용하여 박스, 제목 및 {{htmlelement("span")}} 요소에 배경색을 추가했습니다.</p> + +<p><strong>사용 가능한 <a href="/en-US/docs/Web/CSS/color_value"><color></a> 값을 사용하여, 이것들을 가지고 놀아보십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/color.html", '100%', 800)}}</p> + +<h3 id="배경_이미지">배경 이미지</h3> + +<p>{{cssxref("background-image")}} 속성을 사용하면 요소의 배경에 이미지를 표시할 수 있습니다. 아래 예에는 두 개의 박스가 있습니다 — 하나는 박스보다 큰 배경 이미지이고 다른 하나는 별 모양의 작은 이미지 입니다.</p> + +<p>이 예제는 배경 이미지에 대한 두 가지를 보여줍니다. 기본적으로 큰 이미지는 박스에 맞게 축소되지 않으므로 작은 이미지만 표시되는 반면, 작은 이미지는 박스를 채우기 위해 바둑판 식으로 배열됩니다. 이 경우 실제 이미지는 단일 별 입니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background-image.html", '100%', 800)}}</p> + +<p><strong>배경 이미지 외에 배경색을 지정하면 이미지가 색상 위에 표시됩니다. 위 예제에 <code>background-color</code> 속성을 추가하여 실제 상태를 확인하십시오.</strong></p> + +<h4 id="배경_이미지_반복_제어">배경 이미지 반복 제어</h4> + +<p>{{cssxref("background-repeat")}} 속성은 이미지의 타일링 동작을 제어하는 데 사용됩니다. 사용 가능한 값은 다음과 같습니다:</p> + +<ul> + <li><code>no-repeat</code> — 배경이 반복되지 않도록 합니다.</li> + <li><code>repeat-x</code> — 수평으로 반복합니다.</li> + <li><code>repeat-y</code> — 수직으로 반복합니다.</li> + <li><code>repeat</code> — 기본값; 양방향으로 반복합니다.</li> +</ul> + +<p><strong>아래 예에서 이러한 값을 사용해 보십시오. 값이 <code>no-repeat</code> 로 설정되어 별 하나만 표시됩니다. 다른 값 — <code>repeat-x</code> 및 <code>repeat-y</code> — 를 사용하여 그 효과가 무엇인지 확인하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/repeat.html", '100%', 800)}}</p> + +<h4 id="배경_이미지_크기_조정">배경 이미지 크기 조정</h4> + +<p>위의 예에서 배경의 요소보다 커서, 이미지가 크게 잘립니다. 이 경우 <a href="/en-US/docs/Web/CSS/length">길이</a> 나 <a href="/en-US/docs/Web/CSS/percentage">백분율</a> 값을 취할 수 있는 {{cssxref("background-size")}} 속성을 사용하여 이미지 크기를 배경 안에 맞출 수 있습니다.</p> + +<p>키워드를 사용할 수도 있습니다:</p> + +<ul> + <li><code>cover</code> — 브라우저는 이미지를 박스 면적을 완전히 덮으면서 가로 세로 비율을 유지하며 이미지를 충분히 크게 만듭니다. 이 경우 일부 이미지가 박스 외부에 있을 수 있습니다.</li> + <li><code>contain</code> — 브라우저는 이미지를 박스 안에 들어가기에 적합한 크기로 만듭니다. 이 경우 이미지의 종횡비가 박스의 종횡비와 다른 경우, 이미지의 한쪽 또는 위쪽과 아래쪽에 간격이 생길 수 있습니다.</li> +</ul> + +<p>아래 예제에서는 위 예제의 큰 이미지를 사용했으며, 박스 안에 길이 단위를 사용하여 크기를 조정했습니다. 이미지가 왜곡된 것을 볼 수 있습니다.</p> + +<p>다음을 시도해 보십시오.</p> + +<ul> + <li>배경 크기를 수정하는 데 사용되는 길이 단위를 변경 하십시오.</li> + <li>길이 단위를 제거하고 <code>background-size: cover</code> 또는 <code>background-size: contain</code> 을 사용할 때 어떻게 되는지 확인 하십시오.</li> + <li>이미지가 박스보다 작으면, <code>background-repeat</code> 의 값을 변경하여 이미지를 반복할 수 있습니다.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/size.html", '100%', 800)}}</p> + +<h4 id="배경_이미지_배치">배경 이미지 배치</h4> + +<p>{{cssxref("background-position")}} 속성을 사용하면 적용되는 박스에서 배경 이미지가 나타나는 위치를 선택할 수 있습니다. 박스의 왼쪽 상단 모서리가 <code>(0,0)</code> 이고, 박스가 가로 (<code>x</code>) 및 세로 (<code>y</code>) 축을 따라 위치하는 좌표계를 사용합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>background-position</code> 의 기본값은 <code>(0,0)</code> 입니다.</p> +</div> + +<p>가장 일반적인 <code>background-position</code> 값은 — 수평 값과 수직 값의 두 가지 개별 값을 갖습니다.</p> + +<p><code>top</code> 및 <code>right</code> ({{cssxref("background-image")}} 페이지에서 다른 키워드를 찾으십시오) 와 같은 키워드를 사용 할 수 있습니다:</p> + +<pre class="brush: css"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top center; +} </code> +</pre> + +<p>그리고 <a href="/en-US/docs/Web/CSS/length">길이</a> 및 <a href="/en-US/docs/Web/CSS/percentage">백분율</a>:</p> + +<pre class="brush: css"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: 20px 10%; +} </code> +</pre> + +<p>키워드 값을 길이 또는 백분율과 혼합할 수도 있습니다. 예를 들면:</p> + +<pre class="brush: css">.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px; +}</pre> + +<p>마지막으로, 박스의 특정 모서리로 부터의 거리를 나타내기 위해 4 값 구문을 사용할 수도 있습니다 — 이 경우 길이 단위는 앞에 오는 값과의 offset 입니다. 아래 CSS 에서 우리는 배경을 위쪽에서 20px, 오른쪽에서 10px 로 배치합니다:</p> + +<pre class="brush: css"><code>.box { + background-image: url(star.png); + background-repeat: no-repeat; + background-position: top 20px right 10px; +} </code></pre> + +<p><strong>아래 예제를 사용하여 이러한 값을 가지고 실습하면서 박스 안에서 별을 움직이십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/position.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>background-position</code> 은 {{cssxref("background-position-x")}} 및 {{cssxref("background-position-y")}} 의 줄임말로, 다른 축 위치 값을 개별적으로 설정할 수 있습니다.</p> +</div> + +<h3 id="그라데이션_Gradient_배경">그라데이션 (Gradient) 배경</h3> + +<p>배경에 사용될 때 — Gradient — 는 이미지 처럼 작동하며 {{cssxref("background-image")}} 속성을 사용하여 설정 됩니다.</p> + +<p><code><a href="/en-US/docs/Web/CSS/gradient"><gradient></a></code> 데이터 유형에 대한 MDN 페이지에서 다양한 유형의 그라디언트 및 그라디언트로 수행 할 수 있는 작업에 대한 자세한 내용을 읽을 수 있습니다. 그라디언트를 재생하는 재미있는 방법은 웹에서 사용할 수 있는 많은 CSS 그라디언트 생성기 중 <a href="https://cssgradient.io/">하나</a> 를 사용하는 것입니다. 그라디언트를 생성한 다음 이를 생성하는 소스 코드를 복사하여 붙여 넣을 수 있습니다.</p> + +<p>아래 예제에서 다른 그라디언트를 사용해 보십시오. 두 개의 박스에는 각각 전체 박스에 걸쳐 펼쳐지는 선형 그라디언트와 설정된 크기의 방사형 그라디언트가 있습니다. 따라서 반복됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/gradients.html", '100%', 800)}}</p> + +<h3 id="여러_배경_이미지">여러 배경 이미지</h3> + +<p>여러 개의 배경 이미지를 가질 수도 있습니다 — 하나의 속성 값으로 여러 개의 <code>background-image</code> 값을 지정하고, 각 이미지를 쉼표로 구분합니다.</p> + +<p>이렇게 하면 배경 이미지가 서로 겹칠 수 있습니다. 배경은 stack 맨 아래에 마지막으로 나열된 배경 이미지와 함께 쌓이고, 코드에서 그 뒤에 오는 이미지 위에 각각의 이전 이미지가 쌓입니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 그라디언트는 일반 배경 이미지와 혼합될 수 있습니다.</p> +</div> + +<p>다른 <code>background-*</code> 속성은 <code>background-image</code> 와 같은 방식으로 쉼표로 구분된 값을 가질 수도 있습니다:</p> + +<pre class="brush: css">background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png); +background-repeat: no-repeat, repeat-x, repeat; +background-position: 10px 20px, top right;</pre> + +<p>다른 속성의 각 값은 다른 속성의 같은 위치에 있는 값과 일치합니다. 예를 들어, <code>image1</code> 의 <code>background-repeat</code> 값은 <code>no-repeat</code> 입니다. 그러나, 다른 속성의 값이 다른 경우 어떻게 됩니까? 답은 더 적은 수의 값이 순환한다는 것입니다 — 위의 예에서는 4 개의 배경 이미지가 있지만 2 개의 <code>background-position</code> 값만 있습니다. 처음 두 위치 값은 처음 두 이미지에 적용되고 다시 순환됩니다 — <code>image3</code> 에는 첫 번째 위치값이 제공되고, <code>image4</code> 에는 두 번째 위치값이 제공됩니다.</p> + +<p><strong>해봅시다. 아래 예에서는 두 개의 이미지를 포함했습니다. 쌓인 순서를 설명하려면, 목록에서 어떤 배경 이미지가 먼저 나오는지 전환해 보십시오. 또는 다른 속성을 사용하여 위치, 크기 또는 반복 값을 변경하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/multiple-background-image.html", '100%', 800)}}</p> + +<h3 id="배경_첨부_attachment">배경 첨부 (attachment)</h3> + +<p>배경에 사용할 수 있는 또 다른 옵션은 내용이 스크롤될 때 스크롤하는 방법을 지정하는 것입니다. 이는 {{cssxref("background-attachment")}} 속성을 사용하여 제어되며, 다음 값을 사용할 수 있습니다:</p> + +<ul> + <li><code>scroll</code>: 페이지가 스크롤될 때 요소의 배경이 스크롤 되도록 합니다. 요소 내용이 스크롤되면, 배경이 움직이지 않습니다. 실제로 배경은 페이지에서 동일한 위치로 고정되므로, 페이지가 스크롤될 때 스크롤 됩니다.</li> + <li><code>fixed</code>: 요소의 배경을 viewport 에 고정시켜, 페이지나 요소 내용을 스크롤할 때 스크롤되지 않도록 합니다. 항상 화면에서 동일한 위치에 유지됩니다.</li> + <li><code>local</code>: 이 값은 나중에 추가 되었습니다 (Explorer 9 이상에서만 지원되지만, 다른 값은 IE4 이상에서 지원됨). 왜냐하면 <code>scroll</code> 값이 다소 혼란스럽고 많은 경우 실제로 원하는 것을 수행하지 않기 때문입니다. <code>local</code> 값은 배경을 설정된 요소로 고정하므로, 요소를 스크롤하면 배경과 함께 스크롤 됩니다.</li> +</ul> + +<p>{{cssxref("background-attachment")}} 속성은 스크롤할 내용이 있을 때만 영향을 미치므로, 세 가지 값의 차이점을 보여주는 데모를 만들었습니다 — <a href="http://mdn.github.io/learning-area/css/styling-boxes/backgrounds/background-attachment.html">background-attachment.html</a> 을 살펴보십시오 (여기에서 <a href="https://github.com/mdn/learning-area/tree/master/css/styling-boxes/backgrounds">소스 코드</a> 를 참조하십시오).</p> + +<h3 id="배경_속기_shorthand_속성_사용">배경 속기 (shorthand) 속성 사용</h3> + +<p>이 수업 시작 부분에서 언급했듯이, {{cssxref("background")}} 속성을 사용하여 지정된 배경을 자주 볼 수 있습니다. 이 속기 기능을 사용하면 모든 다른 속성을 한 번에 설정할 수 있습니다.</p> + +<p>여러 배경을 사용하는 경우, 첫 번째 배경에 대한 모든 속성을 지정한 다음, 쉼표 뒤에 다음 배경을 추가해야 합니다. 아래 예에서는 크기와 위치가 있는 그라디언트, <code>no-repeat</code> 및 이미지 위치가 있는 이미지 배경, 색상이 있습니다.</p> + +<p>배경 이미지 속기 값을 쓸 때 따라야 할 몇 가지 규칙이 있습니다. 예를 들면:</p> + +<ul> + <li><code>background-color</code> 는 마지막 쉼표 뒤에만 지정할 수 있습니다.</li> + <li><code>background-size</code> 의 값은 <code>background-position</code>, 직후에 포함되며 <code>center/80%</code> 와 같이 '/' 문자로 구분됩니다.</li> +</ul> + +<p>모든 고려 사항을 보려면 MDN 페이지의 {{cssxref("background")}} 를 살펴보십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/background.html", '100%', 800)}}</p> + +<h3 id="배경이_있는_접근성_고려_사항">배경이 있는 접근성 고려 사항</h3> + +<p>배경 이미지나 색상 위에 텍스트를 배치 할 때, 방문자가 텍스트를 읽을 수 있도록 contrast 를 충분히 유지해야 합니다. 이미지를 지정하고 해당 이미지 위에 텍스트를 배치하는 경우, 이미지가 로드되지 않은 경우 텍스트를 읽을 수 있는 <code>background-color</code> 도 지정해야 합니다.</p> + +<p>화면 판독기는 배경 이미지를 구문 분석할 수 없으므로 순전히 장식이어야 합니다. 중요한 내용은 HTML 페이지의 일부여야 하며, 배경에 포함되지 않아야 합니다.</p> + +<h2 id="테두리">테두리</h2> + +<p>박스 모델에 대해 알아볼 때, 테두리가 박스 크기에 어떤 영향을 미치는지 알아 냈습니다. 이 수업에서는 테두리를 창의적으로 사용하는 방법을 살펴봅니다. 일반적으로 CSS 를 사용하여 요소에 테두리를 추가할 때는, CSS 의 한 라인에 테두리의 색상, 너비 및 스타일을 설정하는 속기 속성을 사용합니다.</p> + +<p>{{cssxref("border")}} 를 사용하여 박스의 네 면 모두에 테두리를 설정할 수 있습니다:</p> + +<pre class="brush: css"><code>.box { + border: 1px solid black; +} </code></pre> + +<p>또는 박스의 한쪽 가장자리를 대상으로 지정할 수 있습니다. 예를 들면:</p> + +<pre class="brush: css"><code>.box { + border-top: 1px solid black; +} </code></pre> + +<p>이러한 속기의 개별 속성은 다음과 같습니다:</p> + +<pre class="brush: css"><code>.box { + border-width: 1px; + border-style: solid; + border-color: black; +} </code></pre> + +<p>그리고 longhands 는 다음과 같습니다:</p> + +<pre class="brush: css"><code>.box { + border-top-width: 1px; + border-top-style: solid; + border-top-color: black; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 위쪽, 오른쪽, 아래쪽 및 왼쪽 테두리 속성에는 문서의 쓰기 모드 (예: 왼쪽에서 오른쪽으로 또는 오른쪽에서 왼쪽으로 텍스트 또는 위에서 아래로) 와 관련된 논리적 속성이 매핑되어 있습니다. 다음 수업에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다양한 텍스트 방향 처리</a> 에 대해 다룰것입니다.</p> +</div> + +<p><strong>테두리에 사용할 수 있는 다양한 스타일이 있습니다. 아래 예에서 우리는 박스의 네 면에 다른 테두리 스타일을 사용했습니다. 테두리 스타일, 너비 및 색상으로 실습하여 테두리의 작동 방식을 확인 하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/borders.html", '100%', 800)}}</p> + +<h3 id="둥근_테두리">둥근 테두리</h3> + +<p>박스의 둥근 테두리는 {{cssxref("border-radius")}} 속성 과 박스의 각 모서리와 관련되 관련 longhands 를 사용하여 수행됩니다. 두 개의 길이 또는 백분율을 값으로 사용할 수 있습니다. 첫 번째 값은 가로 반경을 정의하고 두 번째 값은 세로 반경을 정의합니다. 많은 경우에 하나의 값만 전달하면 둘 다에 사용됩니다.</p> + +<p>예를 들어, 박스의 네 모서리를 모두 10px radius 로 만들려면:</p> + +<pre class="brush: css"><code>.box { + border-radius: 10px; +} </code></pre> + +<p>또는 오른쪽 상단 모서리의 가로 반경이 1em 이고, 세로 반경이 10% 가 되도록 하려면:</p> + +<pre class="brush: css"><code>.box { + border-top-right-radius: 1em 10%; +} </code></pre> + +<p>아래 예에서 네 모서리를 모두 설정한 다음, 오른쪽 위 모서리의 값을 변경하여 다르게 만들었습니다. 값을 사용하여 모서리를 변경할 수 있습니다. 사용 가능한 구문 옵션을 보려면 {{cssxref("border-radius")}} 의 속성 페이지를 살펴보십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/corners.html", '100%', 800)}}</p> + +<h2 id="배경과_테두리로_실습하기">배경과 테두리로 실습하기</h2> + +<p>새로운 지식을 테스트하려면 아래 예제를 시작점으로 사용하여 배경과 테두리를 사용하여 다음을 작성하십시오:</p> + +<ol> + <li>박스에 둥근 모서리가 10px 인, 5px 검은색 단색 테두리를 지정하십시오.</li> + <li>배경 이미지를 추가하고 (URL <code>balloons.jpg</code> 사용) 박스를 덮도록 크기를 조정하십시오.</li> + <li><code><h2></code> 에 반투명 검정색 배경색을 지정하고 텍스트를 흰색으로 만듭니다.</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/backgrounds-borders/task.html", '100%', 800)}}</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md">여기에서 해결책을 살펴 보기</a> 할 수 있지만 — 먼저 스스로 알아보십시오!</p> +</div> + +<h2 id="요약">요약</h2> + +<p>여기서는 많은 내용을 다루었으며, 박스에 배경이나 데두리를 추가하는 것이 상당히 많다는 것을 알 수 있습니다. 논의한 기능에 대해 더 자세히 알고 싶다면, 다른 속성 페이지를 살펴보십시오. MDN 의 각 페이지에는 지식을 가지고 실습하고 향상시키기 위한 더 많은 사용 예제가 있습니다.</p> + +<p>다음 수업에서는 문서의 쓰기 모드가 CSS 와 어떻게 상호 작용하는지 알아봅니다. 텍스트가 왼쪽에서 오른쪽으로 표시되지 않으면 어떻게 됩니까?</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html new file mode 100644 index 0000000000..5e15af3722 --- /dev/null +++ b/files/ko/learn/css/building_blocks/cascade_and_inheritance/index.html @@ -0,0 +1,337 @@ +--- +title: 계단식 및 상속 +slug: Learn/CSS/Building_blocks/Cascade_and_inheritance +translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance +--- +<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p>이 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.</p> + +<p>이 수업을 통해 작업하면 코스의 다른 부분 보다 관련성이 떨어지고 좀 더 학문적으로 보일 수 있지만, 이러한 사항을 이해하면 나중에 많은 고통을 덜 수 있습니다! 이 섹션을 주의 깊게 살펴보고 계속 진행하기 전에 개념을 이해하는지 확인하십시오.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>계단식 및 특수성 과 CSS 에서 상속이 작동하는 방식 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="규칙_충돌">규칙 충돌</h2> + +<p>CSS 는 <strong>Cascading Style Sheets</strong> 의 약자이며, CSS 라는 단어를 이해하는 데 있어 첫 번째 단어 <em>cascading</em> 은 매우 중요합니다.</p> + +<p>어느 시점에서, 당신은 프로젝트를 진행할 것이며 요소에 적용해야 할 CSS 가 작동하지 않는다는 것을 알게 될 것입니다. 일반적으로 문제는 동일한 요소에 적용할 수 있는 두 가지 규칙을 작성 했다는 것입니다. <strong>계단식 (cascade)</strong> 과 밀접하게 관련된 <strong>우선 순위 (specificity)</strong> 개념은 그러한 충돌이 있을 때 적용되는 규칙을 제어하는 메커니즘입니다. 어떤 규칙에 따라 요소를 원하는 스타일로 만들지 못할 수도 있으므로 이러한 메커니즘의 작동 방식을 이해해야 합니다.</p> + +<p><strong>상속(inheritance)</strong> 개념도 중요합니다. 기본적으로 일부 CSS 속성은 현재 요소의 부모 요소에 설정된 값을 상속하지만, 일부는 그렇지 않습니다. 또한 예상치 못한 일부 동작이 발생할 수 있습니다.</p> + +<p>우리가 다루고 있는 주요 사항을 간단히 살펴보면서 시작해 봅시다. 차례대로 살펴보고 서로 상호 작용하고 CSS 와 어떻게 상호 작용 하는지 살펴 보겠습니다. 이것은 이해하기 어려운 까다로운 개념으로 보일 수 있습니다. 그러나 CSS 작성에 대한 연습이 많을수록 작동 방식이 더 명확해 집니다.</p> + +<h3 id="계단식_cascade">계단식 (cascade)</h3> + +<p>스타일 시트 <strong>cascade</strong> — 매우 간단한 수준에서 이는 CSS 규칙의 순서가 중요하다는 것을 의미 합니다. 동일한 우선 순위를 갖는 두 규칙이 적용될 때, CSS 에서 마지막에 나오는 규칙이 사용 될 것입니다.</p> + +<p>아래 예에서는, <code>h1</code> 에 적용할 수 있는 두 가지 규칙이 있습니다. <code>h1</code> 은 파란색으로 표시됩니다 — 이러한 규칙에는 동일한 선택자가 있고 동일한 고유성을 가지므로, 소스 순서의 마지막 규칙이 우선합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p> + +<h3 id="우선_순위_Specificity">우선 순위 (Specificity)</h3> + +<p>우선 순위는 여러 규칙에 다른 선택자가 있지만, 여전히 동일한 요소에 적용될 수 있는 경우, 브라우저가 어떤 규칙을 적용할 지 결정하는 방법입니다. 기본적으로 선택자의 선택이 얼마나 구체적인지 측정합니다:</p> + +<ul> + <li>요소 선택자는 덜 구체적입니다 — 페이지에 나타나는 해당 유형의 모든 요소를 선택하므로 — 점수가 낮아집니다.</li> + <li>class 선택자는 보다 구체적입니다 — 특정 <code>class</code> 속성 값이 있는 페이지의 요소만 선택하므로 — 점수가 높아집니다.</li> +</ul> + +<p>시간 예제! 아래에는 <code>h1</code> 에 적용할 수 있는 두 가지 규칙이 다시 있습니다. 아래 <code>h1</code> 은 빨간색으로 표시 됩니다 — class 선택자는 규칙에 더 높은 우선 순위를 부여하므로 요소 선택자가 있는 규칙은 소스 순서에서 더 아래에 표시 되더라도 적용됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p> + +<p>우선 순위 점수 및 기타 사항에 대해서는 나중에 설명하겠습니다.</p> + +<h3 id="상속_Inheritance">상속 (Inheritance)</h3> + +<p>상속은 이 맥락에서 이해되어야 합니다 — 부모 요소에서 설정된 일부 CSS 속성 값은 자식 요소에 의해 상속되며, 일부는 그렇지 않습니다.</p> + +<p>예를 들어, 요소에 <code>color</code> 및 <code>font-family</code> 를 설정하면, 다른 색상 및 글꼴 값을 직접 적용하지 않는 한, 해당 요소 내부의 모든 요소에도 해당 색상 및 글꼴로 스타일이 지정됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p> + +<p>일부 속성은 상속되지 않습니다 — 예를 들어 요소에 {{cssxref("width")}} 를 50% 로 설정하면, 모든 하위 항목의 너비가 부모 너비의 50% 가 되지 않습니다. 이 경우, CSS 는 사용하기가 매우 어려울 것입니다!</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: MDN CSS 속성 참조 페이지에서 일반적으로 specifications 섹션의 맨 아래에 기술 정보 박스가 있습니다. 여기에는 해당 속성의 상속 여부를 포함하여 해당 속성에 대한 여러 데이터 요소가 나열되어 있습니다. 예를 들어, <a href="/en-US/docs/Web/CSS/color#Specifications">color 속성 Specifications 섹션</a> 을 참조 하십시오.</p> +</div> + +<h2 id="개념이_함께_작동하는_방식_이해하기">개념이 함께 작동하는 방식 이해하기</h2> + +<p>이 세 가지 개념은 어떤 CSS 가 어떤 요소에 적용되는지를 함께 제어합니다. 아래 섹션에서 우리는 그들이 어떻게 함께 작동하는지 볼 것입니다. 때로는 약간 복잡해 보일 수 있지만, CSS 에 익숙해지면 기억하기 시작하고 잊어 버린 경우, 항상 세부 정보를 찾을 수 있습니다! 숙련된 개발자 조차도 모든 세부 사항을 기억하지 못합니다.</p> + +<h2 id="상속_이해하기">상속 이해하기</h2> + +<p>상속부터 시작하겠습니다. 아래 예에서는 {{HTMLElement("ul")}} 이 있으며, 그 안에 순서가 없는 두 가지 수준의 목록이 있습니다. 외부 <code><ul></code> 에 테두리, 패딩 및 글꼴 색상을 지정했습니다.</p> + +<p>색상은 직접 자식 항목 뿐만 아니라 간접 자식 항목 (직접 자식 <code><li></code>) 및 첫 번째 중첩 목록에 있는 자식 항목에도 적용됩니다. 그런 다음 두 번째 중첩 목록에 <code>special</code> class 를 추가하고 다른 색상을 적용했습니다. 그런 다음 자식을 통해 상속됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p> + +<p>너비 (위에서 언급 한 것처럼), 마진, 패딩 및 테두리와 같은 것은 상속되지 않습니다. 만약 우리 목록의 자식들이 테두리를 물려 받았다면, 모든 단일 목록과 목록 항목은 테두리를 얻게 될 것입니다 — 아마도 우리가 원하는 효과는 아닙니다!</p> + +<p>기본적으로 상속되는 속성과 그렇지 않은 속성은 대체로 상식적입니다.</p> + +<h3 id="상속_제어하기">상속 제어하기</h3> + +<p>CSS 는 상속을 제어하기 위한 4 가지 특수 범용 속성 값을 제공합니다. 모든 CSS 속성은 이러한 값을 허용합니다.</p> + +<dl> + <dt>{{cssxref("inherit")}}</dt> + <dd>선택한 요소에 적용된 속성 값을 부모 요소의 속성 값과 동일하게 설정합니다. 사실상, 이것은 "상속에 영향을 미칩니다".</dd> + <dt>{{cssxref("initial")}}</dt> + <dd>선택한 요소에 적용된 속성 값을 브라우저의 기본 스타일 시트에서 해당 요소의 해당 속성에 설정된 값과 동일하게 설정합니다. 브라우저의 기본 스타일 시트에서 값을 설정하지 않고 속성이 자연스럽게 상속되면 속성 값이 대신 <code>inherit</code> 되도록 설정됩니다.</dd> + <dt>{{cssxref("unset")}}</dt> + <dd>속성을 natural 값으로 재설정 합니다. 즉, 속성이 자연적으로 상속되면 <code>inherit</code> 된 것처럼 작동하고 그렇지 않으면 <code>initial</code> 처럼 작동합니다.</dd> +</dl> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 브라우저 지원이 제한된 새로운 값인 {{cssxref("revert")}} 도 있습니다.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 각각에 대한 자세한 내용과 작동 방식에 대한 자세한 내용은 {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} 를 참조하십시오.</p> +</div> + +<p>우리는 링크 목록을 보고 보편적 가치가 어떻게 작용하는지 탐구할 수 있습니다. 아래의 라이브 예제를 사용하면 CSS 를 사용하여 변경 작업을 수행할 수 있습니다. 코드를 가지고 노는 것이 HTML 과 CSS 를 이해하는 가장 좋은 방법입니다.</p> + +<p>예를 들면:</p> + +<ol> + <li>두 번째 목록 항목에는 <code>my-class-1</code> class 가 적용되었습니다. 내부에 중첩된 <code><a></code> 요소의 색상을 상속하도록 설정합니다. 규칙을 제거하면 링크 색상이 어떻게 변경됩니까?</li> + <li>왜 세 번째 와 네 번째 링크가 그 색깔인지 이해합니까? 그렇치 않은 경우 위의 값에 대한 설명을 확인하십시오.</li> + <li><code><a></code> 요소에 대해 — 예를 들어 <code>a { color: red; }</code> 와 같은 새 색상을 정의하는 경우 어떤 링크가 색상이 변경됩니까?</li> +</ol> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p> + +<h3 id="모든_속성_값_재설정">모든 속성 값 재설정</h3> + +<p>CSS 속기 속성을 <code>all</code> 로 사용하면 이러한 상속 값 중 하나를 (거의) 모든 속성에 한 번에 적용할 수 있습니다. 이 값은 상속 값 (<code>inherit</code>, <code>initial</code>, <code>unset</code> 또는 <code>revert</code>) 중 하나일 수 있습니다. 스타일에 대한 변경 사항을 취소하여 새로운 변경을 시작하기 전에 알려진 시작 지점으로 돌아갈 수 있는 편리한 방법입니다.</p> + +<p>아래 예제에는 두 개의 인용문이 있습니다. 첫 번째는 인용문 자체에 스타일을 적용하고 두 번째는 <code>all</code> 값을 <code>unset</code> 하도록 인용문에 적용된 class 를 갖습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p> + +<p><code>all</code> 의 값을 사용 가능한 다른 값 중 일부로 설정하고 차이가 무엇인지 관찰하십시오.</p> + +<h2 id="계단식_cascade_이해하기">계단식 (cascade) 이해하기</h2> + +<p>이제 HTML 구조에 깊게 중첩된 단락이 본문에 적용된 CSS 와 동일한 색상인 이유를 이해하고, 소개 수업에서 문서의 어느 시점에서는 CSS 를 변경하는 방법에 대해 이해합니다 — 요소에 CSS 를 할당하거나 class 를 만들지 여부. 이제 여러 요소가 요소를 스타일링 할 수 있는 경우, CSS 에서 적용할 CSS 규칙을 어떻게 정의하는지 계단식 (cascade) 에 대해 올바르게 살펴보겠습니다.</p> + +<p>여기에는 중요도의 내림차순으로 나열된 세 가지 요소가 있습니다. 이전의 것들은 다음 것보다 우선합니다:</p> + +<ol> + <li><strong>Importance</strong></li> + <li><strong>우선 순위</strong></li> + <li><strong>소스 순서</strong></li> +</ol> + +<p>브라우저가 CSS 를 정확히 적용하는 방법을 어떻게 파악하는지 아래부터 위로 살펴보겠습니다.</p> + +<h3 id="소스_순서">소스 순서</h3> + +<p>우리는 이미 소스 순서가 계단식 (cascade) 에 어떻게 중요한지를 보았습니다. 정확히 동일한 가중치를 갖는 규칙이 두 개 이상인 경우, CSS 에서 마지막에 오는 규칙이 우선합니다. 이것을 요소 자체가 마지막 요소가 승리하고 요소를 스타일링 할 때까지 초기 요소를 덮어 쓰는 규칙에 가깝다고 생각할 수 있습니다.</p> + +<h3 id="우선_순위_Specificity_2">우선 순위 (Specificity)</h3> + +<p>소스 순서가 중요하다는 사실을 이해하면, 어느 시점에서 규칙이 스타일 시트에서 나중에 나오지만 이전의 충돌하는 규칙이 적용되는 상황이 발생합니다. 이는 이전 규칙이 더 <strong>높은 우선 순위</strong>를 갖기 때문입니다 — 보다 구체적이기 때문에, 브라우저에서 요소를 스타일해야 하는 규칙으로 선택하고 있습니다.</p> + +<p>이 수업의 앞부분에서 살펴본 것처럼, class 선택자는 요소 선택자보다 가중치가 높으므로, class 에 정의된 속성이 요소에 직접 적용된 속성보다 우선합니다.</p> + +<p>여기서 주목할 점은 선택자 및 선택한 항목에 적용되는 규칙에 대해 생각하고 있지만, 덮어 쓰는 전체 규칙이 아니라 동일한 속성일 뿐입니다.</p> + +<p>이 동작은 CSS 에서 반복을 피하는 데 도움이 됩니다. 일반적인 방법은 기본 요소의 일반 스타일을 정의한 다음, 다른 요소에 대한 class 를 작성하는 것입니다. 예를 들어, 아래 스타일 시트에서 h2 제목에 대한 일반 스타일을 정의한 다음, 일부 속성과 값만 변경하는 class 를 만들었습니다. 처음에 정의된 값은 모든 표제에 적용되며, 보다 구체적인 값은 class 가 있는 표제에 적용됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p> + +<p>이제 브라우저가 우선 순위 (specificity) 를 계산하는 방법을 살펴보겠습니다. 우리는 이미 요소 선택자가 우선 순위가 낮으며 class 가 덮어 쓸 수 있음을 알고 있습니다. 기본적으로 포인트 단위의 가치가 다른 유형의 선택자에 부여되며, 이를 합산하면 특정 선택자의 가중치가 부여되며, 이는 다른 잠재적 일치 항목에 대해 평가할 수 있습니다.</p> + +<p>선택자의 우선 순위는 4개의 다른 값 (또는 구성 요소) 을 사용하여 측정되며, 이는 4개의 열에서 Thousands, Hundreds, Tens 및 Ones<strong> </strong>개의 단일 자릿수로 간주될 수 있습니다.</p> + +<ol> + <li><strong>Thousands</strong>: 선언이 인라인 스타일인 {{htmlattrxref("style")}} 속성 안에 있으면, 열에서 1점을 얻습니다. 이러한 선언에는 선택자가 없으므로 그 우선 순위는 항상 1000 입니다.</li> + <li><strong>Hundreds</strong>: 전체 선택자에 포함된 각 ID 선택자에 대해 이 열에서 1점을 얻습니다.</li> + <li><strong>Tens</strong>: 이 선택란에서 전체 선택자 내에 포함된 각 class 선택자, 속성 선택자 또는 pseudo-class 에 대해 이 열에서 1점을 얻습니다.</li> + <li><strong>Ones</strong>: 이 항목에서 각 요소 선택자 또는 전체 선택자 내에 포함된 pseudo-element 에 대해 1점을 얻습니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 범용 선택자 (<code>*</code>), 결합자 (<code>+</code>, <code>></code>, <code>~</code>, ' ') 및 부정 pseudo-class (<code>:not</code>) 는 우선 순위에 영향을 미치지 않습니다.</p> +</div> + +<p>다음 표는 기분을 전환하기 위해 몇 가지 분리된 예를 보여줍니다. 이것들을 살펴보고 왜 그들이 우리에게 그들에게 주어진 우선 순위를 가지고 있는지 이해하도록 하십시오. 선택자는 아직 자세히 다루지 않았지만, MDN <a href="/en-US/docs/Web/CSS/CSS_Selectors">선택자 참조</a> 에서 각 선택자의 세부 정보를 찾을 수 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">선택자</th> + <th scope="col">Thousands</th> + <th scope="col">Hundreds</th> + <th scope="col">Tens</th> + <th scope="col">Ones</th> + <th scope="col">Total specificity</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>h1</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1</td> + <td>0001</td> + </tr> + <tr> + <td><code>h1 + p::first-letter</code></td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>3</td> + <td>0003</td> + </tr> + <tr> + <td><code>li > a[href*="en-US"] > .inline-warning</code></td> + <td>0</td> + <td>0</td> + <td>2</td> + <td>2</td> + <td>0022</td> + </tr> + <tr> + <td><code>#identifier</code></td> + <td>0</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0100</td> + </tr> + <tr> + <td>요소의 {{htmlattrxref("style")}} 속성 안에 규칙이 있는 선택자가 없습니다</td> + <td>1</td> + <td>0</td> + <td>0</td> + <td>0</td> + <td>1000</td> + </tr> + </tbody> +</table> + +<p>계속 진행하기 전에, 실제 사례를 살펴보겠습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p> + +<p>우선, 우리는 이 예제의 처음 7개 규칙에만 관심이 있으며, 앞으로 알 수 있듯이 각 규칙 앞에 주석에 우선 순위 값을 포함 시켰습니다.</p> + +<ul> + <li>처음 두 선택자는 링크의 배경색 스타일링을 놓고 경쟁합니다 — 두 번째 선택자는 추가 ID 선택자가 있기 때문에 이기고 배경색을 파란색으로 만듭니다: 우선 순위는 201 vs 101 입니다.</li> + <li>세 번째와 네 번째 선택자는 링크의 텍스트 색상 스타일링을 놓고 경쟁하고 있습니다 — 두 번째 선택자는 이기고 텍스트는 흰색으로 만듭니다. 왜냐하면 한 개의 요소 선택자가 더 적지만, 누락된 선택자는 10배의 가치가 있는 class 선택자로 교체되기 때문입니다. 그래서 승자의 우선 순위는 113 vs 104 입니다.</li> + <li>선택자 5–7 은 마우스를 가져 가면 링크의 테두리 스타일을 놓고 경쟁합니다. 선택자 6은 23 vs 24 의 우선 순위로 5점이 확실히 손실됩니다 — 요소 선택자가 하나 더 적습니다. 선택자 7은 5 와 6을 모두 능가합니다 — 5와 동일한 수의 자식 선택자가 있지만, 한 요소는 class 선택자로 교체되었습니다. 따라서 승자의 우선 순위는 33 vs 23 및 24 입니다.</li> +</ul> + +<ol> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 이것은 이해를 돕기위한 대략적인 예일뿐입니다. 실제로 각 선택자 유형에는 고유한 순위가 있으며, 낮은 우선 순위의 선택자로 덮어쓸 수 없습니다. 예를 들어, <em>백 만</em> 개의 <strong>class</strong> 선택자가 결합되어도 <em>하나 </em>의 <strong>id</strong> 선택자의 규칙을 겹쳐쓸 수 없습니다.</p> + +<p>우선 순위를 평가하는 보다 정확한 방법은 우선 순위를 개별적으로 최고에서 시작하여 필요할 때 최저로 평가하는 것입니다. 특정 순위 내에서 선별 점수 사이에 동점이 있을 때만 다음 수준을 평가해야 합니다. 그렇지 않으면, 낮은 우선 순위 선택자는 높은 우선 순위를 덮어쓸 수 없으므로 무시할 수 있습니다.</p> +</div> + +<h3 id="!important">!important</h3> + +<p>위의 모든 계산을 무효화하는 데 사용할 수 있는 특별한 CSS 가 있지만, 중요하게 사용해야 합니다 — <code>!important</code>. 이것은 특정 속성과 가치를 가장 구체적으로 만들어 계단식 (cascade) 의 일반적인 규칙을 무시하는 데 사용됩니다.</p> + +<p>두 개의 단락이 있고, 하나에 ID 가 있는 이 예를 살펴보십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p> + +<p>이 과정을 통해 어떤 일이 일어나고 있는지 살펴보겠습니다 — 이해하기 어려운 경우 어떤 일이 발생하는지 확인하려면 일부 속성을 제거해 보십시오:</p> + +<ol> + <li>세 번째 규칙의 {{cssxref("color")}} 및 {{cssxref("padding")}} 값이 적용되었지만, {{cssxref("background-color")}} 가 적용되었음을 알 수 있습니다. 왜죠? 소스 순서 후반의 규칙은 일반적으로 이전 규칙보다 우선하기 때문에 세 가지 모두가 반드시 적용되어야 합니다.</li> + <li>그러나, class 선택자는 요소 선택자보다 높은 우선 순위에 있기 때문에 위의 규칙이 우선합니다.</li> + <li>두 요소 모두 {{htmlattrxref("class")}} 가 <strong><code>더 우수</code></strong> 하지만, 두 번째 요소는 {{htmlattrxref("id")}} 도 <strong><code>이기고</code></strong> 있습니다. ID 는 classe 보다 우선 순위가 <em>더 높기</em> 때문에 페이지에서 각 고유 ID 를 가진 요소는 하나만 가질 수 있지만, class 는 같은 요소가 많습니다 — ID 선택자는 대상에 따라 <strong><em>매우 다릅니다</em>.</strong> 빨간색 배경색과 1 px 검은색 테두리를 두 번째 요소에 적용해야 합니다. 첫 번째 요소는 회색 배경색을 가져오고 class 에서 지정한대로 테두리가 없습니다.</li> + <li>두 번째 요소는 빨간색 배경색을 얻지만, 테두리는 없습니다. 왜일까요? 두 번째 규칙의 <code>!important</code> 선언으로 인해 — <code>border: none</code> 뒤에 이것을 포함하면 ID 가 더 높은 우선 순위에도 불구하고 이 선언이 이전 규칙의 테두리 값 보다 우선함을 의미합니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 이 <code>!important</code> 선언을 재정의하는 유일한 방법은 소스 순서에서 나중에 같은 우선 순위를 가진 선언에 또는 다른 고유한 선언에 다른 <code>!important</code> 선언을 포함시키는 것입니다.</p> +</div> + +<p><code>!important</code> 가 존재한다는 것을 아는 것이 도움이 되므로 다른 사람들의 코드에서 그것을 발견할 때 그 의미를 알 수 있습니다. <strong>그러나, 반드시 필요한 경우가 아니면 절대 사용하지 않는 것이 좋습니다. </strong><code>!important</code> 는 계단식이 정상적으로 작동하는 방식을 변경하므로, CSS 스타일 문제를 해결하기가 어렵습니다. 특히 큰 스타일 시트에서.</p> + +<p>핵심 CSS modules 을 편집할 수 없는 CMS 에서 작업할 때, 다른 방법으로는 재정의 할 수 없는 스타일을 재정의 하려는 경우에 사용할 수도 있습니다. 그러나 실제로 피할 수 있다면 사용하지 마십시오.</p> + +<h2 id="CSS_위치의_영향">CSS 위치의 영향</h2> + +<p>마지막으로, CSS 선언의 중요성은 지정된 스타일 시트에 따라 다릅니다 — 사용자가 스타일 시트를 설정하여 개발자의 스타일을 재정의할 수 있습니다. 예를 들어, 사용자가 시각 장애인일 수 있으며, 쉽게 읽을 수 있도록 방문하는 모든 웹 페이지의 글꼴 크기를 일반 크기의 두 배로 설정하려고 합니다.</p> + +<h2 id="요약하자면">요약하자면</h2> + +<p>충돌 선언은 다음 순서로 적용되며, 이후 선언은 이전 선언보다 우선합니다:</p> + +<ol> + <li>사용자 에이전트 스타일 시트의 선언 (예: 다른 스타일이 설정되지 않은 경우 사용되는 브라우저의 기본 스타일).</li> + <li>사용자 스타일 시트의 일반 선언 (사용자가 설정한 사용자 정의 스타일).</li> + <li>작성자 스타일 시트의 일반적인 선언 (웹 개발자가 설정한 스타일).</li> + <li>작성자 스타일 목록에서 중요한 선언</li> + <li>사용자 스타일 시트의 중요한 선언</li> +</ol> + +<p>웹 개발자의 스타일 시트는 사용자 스타일 시트를 재정의 하는것이 합리적이므로 디자인을 의도한대로 유지할 수 있지만, 사용자는 위에서 언급한 것처럼 웹 개발자 스타일을 재정의 해야 할 충분한 이유가 있습니다 — 이는 규칙에서 <code>important</code> 를 사용하여 달성할 수 있습니다.</p> + +<h2 id="적극적인_학습_계단식_게임입니다">적극적인 학습: 계단식 게임입니다</h2> + +<p>이 적극적인 학습에서는, 기본적으로 링크에 적용한 색상 및 배경색을 재정의하는 새로운 규칙 하나를 작성하여 실험해 보고자 합니다. {{anch("상속 제어")}} 섹션에서 살펴본 특수값 중 하나를 사용하여 실제 색상값을 사용하지 않고 배경색상을 다시 흰색으로 재설정하는 새 규칙에 선언을 작성할 수 있습니까?</p> + +<p>실수한 경우 언제든지 <em>재설정</em> 버튼을 사용하여 재설정 할 수 있습니다. 정말로 막힌다면, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">여기에서 해결책을 살펴 보십시오</a>.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p> + +<h2 id="다음은_뭐죠">다음은 뭐죠</h2> + +<p>이 기사의 대부분을 이해했다면, 잘 끝났습니다 — CSS 의 기본 메커니즘에 익숙해지기 시작했습니다. 다음으로 선택자를 자세히 살펴보겠습니다.</p> + +<p>계단식, 우선 순위 및 상속을 완전히 이해하지 못했다면, 걱정하지 마십시오! 이것은 지금까지 우리가 다루었던 가장 복잡한 내용이며, 전문 웹 개발자 조차도 까다로워하는 부분입니다. 강의를 계속 진행하면서, 이 기사를 몇 차례 다시 읽고 계속 생각하는 것이 좋습니다.</p> + +<p>스타일이 예상대로 적용되지 않는 이상한 문제가 발생하면 여기를 다시 참조 하십시오. 우선 순위 문제일 수 있습니다.</p> + +<p>{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflowing</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/debugging_css/index.html b/files/ko/learn/css/building_blocks/debugging_css/index.html new file mode 100644 index 0000000000..bf8badc26b --- /dev/null +++ b/files/ko/learn/css/building_blocks/debugging_css/index.html @@ -0,0 +1,200 @@ +--- +title: CSS 디버깅 +slug: Learn/CSS/Building_blocks/Debugging_CSS +translation_of: Learn/CSS/Building_blocks/Debugging_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</div> + +<p>때로는 CSS 를 작성할 때 CSS 가 예상한 대로 동작하지 않는 문제가 발생합니다. 아마도 특정 선택자가 요소와 일치해야 하지만, 아무일도 일어나지 않거나 박스의 크기가 예상과 다릅니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고 모든 최신 브라우저에 포함된 DevTools 가 진행 상황을 찾는 데 어떻게 도움이 되는지 보여줍니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td> + <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p> + </td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>브라우저 DevTools 의 기본 사항과 CSS 의 간단한 검사 및 편집방법 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_개발자_도구_DevTools_사용_방법">브라우저 개발자 도구 (DevTools) 사용 방법</h2> + +<p> <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구란</a> 기사는 다양한 브라우저 및 플랫폼에서 도구를 사용하는 방법을 설명하는 최신 안내서입니다. 대부분 특정 브라우저에서 개발하도록 선택할 수 있으므로, 해당 브라우저에 포함된 도구에 가장 익숙해지지만, 다른 브라우저에서 해당 도구에 액세스하는 방법을 알아야합니다. 여러 브라우저간에 다른 렌더링이 표시되는 경우 도움이됩니다.</p> + +<p>또한 DevTools 를 작성할 때 브라우저가 다른 영역에 집중하도록 선택했음을 알 수 있습니다. 예를 들어, Firefox 에는 CSS 레이아웃으로 시각적으로 작업하기위한 훌륭한 도구가 있으며, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">그리드 레이아웃</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_Flexbox_layouts">Flexbox</a> 및 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Shapes</a> 를 검사하고 편집할 수 있습니다. 그러나, 모든 브라우저마다 유사한 기본 도구가 있습니다. 예: 페이지의 요소에 적용된 속성 및 값을 검사하고 편집기에서 변경하는 데 사용됩니다.</p> + +<p>이 수업에서는 CSS 작업을 위한 Firefox DevTools 의 유용한 기능을 살펴봅니다. 이를 위해 <a href="https://mdn.github.io/css-examples/learn/inspecting/inspecting.html">예제 파일</a> 을 사용하겠습니다. 따라하고 싶다면, 새 탭에 로드하고 위에 링크된 기사에 설명된대로 DevTools 를 여십시오.</p> + +<h2 id="DOM_vs_소스_보기">DOM vs 소스 보기</h2> + +<p>새로운 사용자를 개발자 도구 (DevTools) 로 체험할 수 있는 것은 웹 페이지의 <a href="/en-US/docs/Tools/View_source">소스 보기</a> 를 보거나 서버에 넣은 HTML 파일을 볼 때 표시되는 것과 개발자 도구의 <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML 창</a>에서 볼 수 있는 것의 차이입니다. 소스 보기를 통해 볼 수 있는 것과 거의 비슷해 보이지만 몇 가지 차이점이 있습니다.</p> + +<p>렌더링 된 DOM 에서 브라우저가 잘못 작성된 HTML 를 수정했을 수 있습니다. <code><h2></code> 를 열고 <code></h3></code>, 로 닫는 등의 요소를 잘못 닫은 경우, 브라우저는 수행하려는 작업을 파악하고 DOM 의 HTML 은 <code><h2></code> 를 <code></h2></code> 로 올바르게 닫습니다. 또한 브라우저에서는 모든 HTML 를 표준화하고, DOM 은 JavaScript 로 변경한 내용도 표시합니다.</p> + +<p>소스 보기는 서버에 저장된 HTML 소스 코드입니다. 개발자 도구의 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_tree">HTML tree</a> 는 특정 시점에 브라우저가 렌더링하는 내용을 정확하게 보여주므로, 실제로 진행중인 상황에 대한 통찰력을 제공합니다.</p> + +<h2 id="적용된_CSS_검사">적용된 CSS 검사</h2> + +<p>페이지에서 요소를 마우스 오른쪽/ctrl 키를 누른 채 클릭하고 <em><strong>검사 (Inspect)</strong> </em>를 선택하거나, 개발자 도구 디스플레이 왼쪽의 HTML tree 에서 요소를 선택하십시오. <code>box1</code> class 의 요소를 선택하십시오; 이것은 테두리 박스가 그려진 페이지의 첫 번째 요소입니다.</p> + +<p><img alt="The example page for this tutorial with DevTools open." src="https://mdn.mozillademos.org/files/16606/inspecting1.png" style="border-style: solid; border-width: 1px; height: 1527px; width: 2278px;"></p> + +<p>If you look at the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> to the right of your HTML, you should be able to see the CSS properties and values applied to that element. You will see the rules directly applied to class <code>box1</code> and also the CSS that is being inherited by the box from its ancestors, in this case to <code><body></code>. This is useful if you are seeing some CSS being applied that you didn't expect. Perhaps it is being inherited from a parent element and you need to add a rule to overwrite it in the context of this element.</p> + +<p>Also useful is the ability to expand out shorthand properties. In our example the <code>margin</code> shorthand is used.</p> + +<p><strong>Click on the little arrow to expand the view, showing the different longhand properties and their values.</strong></p> + +<p><strong>You can toggle values in the Rules view on and off, when that panel is active — if you hold your mouse over it checkboxes will appear. Uncheck a rule's checkbox, for example <code>border-radius</code>, and the CSS will stop applying.</strong></p> + +<p>You can use this to do an A/B comparison, deciding if something looks better with a rule applied or not, and also to help debug it — for example if a layout is going wrong and you are trying to work out which property is causing the problem.</p> + +<h2 id="Editing_values">Editing values</h2> + +<p>In addition to turning properties on and off, you can edit their values. Perhaps you want to see if another color looks better, or wish to tweak the size of something? DevTools can save you a lot of time editing a stylesheet and reloading the page.</p> + +<p><strong>With <code>box1</code> selected, click on the swatch (the small colored circle) that shows the color applied to the border. A color picker will open up and you can try out some different colors; these will update in real time on the page. In a similar fashion, you could change the width or style of the border.</strong></p> + +<p><img alt="DevTools Styles Panel with a color picker open." src="https://mdn.mozillademos.org/files/16607/inspecting2-color-picker.png" style="border-style: solid; border-width: 1px; height: 1173px; width: 2275px;"></p> + +<h2 id="Adding_a_new_property">Adding a new property</h2> + +<p>You can add properties using the DevTools. Perhaps you have realised that you don't want your box to inherit the <code><body></code> element's font size, and want to set its own specific size? You can try this out in DevTools before adding it to your CSS file.</p> + +<p><strong>You can click the closing curly brace in the rule to start entering a new declaration into it, at which point you can start typing the new property and DevTools will show you an autocomplete list of matching properties. After selecting <code>font-size</code>, enter the value you want to try. You can also click the + button to add an additional rule with the same selector, and add your new rules there.</strong></p> + +<p><img alt="The DevTools Panel, adding a new property to the rules, with the autocomplete for font- open" src="https://mdn.mozillademos.org/files/16608/inspecting3-font-size.png" style="border-style: solid; border-width: 1px; height: 956px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: There are other useful features in the Rules view too, for example declarations with invalid values are crossed out. You can find out more at <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examine and edit CSS</a>.</p> +</div> + +<h2 id="Understanding_the_box_model">Understanding the box model</h2> + +<p>In previous lessons we have discussed <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">the Box Model</a>, and the fact that we have an alternate box model that changes how the size of elements are calculated based on the size you give them, plus the padding and borders. DevTools can really help you to understand how the size of an element is being calculated.</p> + +<p>The <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Layout_view">Layout view</a> shows you a diagram of the box model on the selected element, along with a description of the properties and values that change how the element is laid out. This includes a description of properties that you may not have explicitly used on the element, but which do have initial values set.</p> + +<p>In this panel, one of the detailed properties is the <code>box-sizing</code> property, which controls what box model the element uses.</p> + +<p><strong>Compare the two boxes with classes <code>box1</code> and <code>box2</code>. They both have the same width applied (400px), however <code>box1</code> is visually wider. You can see in the layout panel that it is using <code>content-box</code>. This is the value that takes the size you give the element and then adds on the padding and border width.</strong></p> + +<p>The element with a class of <code>box2</code> is using <code>border-box</code>, so here the padding and border is subtracted from the size that you have given the element. This means that the space taken up on the page by the box is the exact size that you specified — in our case <code>width: 400px</code>.</p> + +<p><img alt="The Layout section of the DevTools" src="https://mdn.mozillademos.org/files/16609/inspecting4-box-model.png" style="border-style: solid; border-width: 1px; height: 1532px; width: 2275px;"></p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: Find out more in <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examining and Inspecting the Box Model</a>.</p> +</div> + +<h2 id="Solving_specificity_issues">Solving specificity issues</h2> + +<p>Sometimes during development, but in particular when you need to edit the CSS on an existing site, you will find yourself having a hard time getting some CSS to apply. No matter what you do, the element just doesn't seem to take the CSS. What is generally happening here is that a more specific selector is overriding your changes, and here DevTools will really help you out.</p> + +<p>In our example file there are two words that have been wrapped in an <code><em></code> element. One is displaying as orange and the other hotpink. In the CSS we have applied:</p> + +<pre class="brush: css">em { + color: hotpink; + font-weight: bold; +}</pre> + +<p>Above that in the stylesheet however is a rule with a <code>.special</code> selector:</p> + +<pre class="brush: css">.special { + color: orange; +}</pre> + +<p>As you will recall from the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">cascade and inheritance</a> where we discussed specificity, class selectors are more specific than element selectors, and so this is the value that applies. DevTools can help you find such issues, especially if the information is buried somewhere in a huge stylesheet.</p> + +<p><strong>Inspect the <code><em></code> with the class of <code>.special</code> and DevTools will show you that orange is the color that applies, and also shows you the <code>color</code> property applied to the em crossed out. You can now see that the class is overriding the element selector.</strong></p> + +<p><img alt="Selecting an em and looking at DevTools to see what is over-riding the color." src="https://mdn.mozillademos.org/files/16610/inspecting5-specificity.png" style="border-style: solid; border-width: 1px; height: 1161px; width: 2275px;"></p> + +<h2 id="Find_out_more_about_the_Firefox_DevTools">Find out more about the Firefox DevTools</h2> + +<p>There is a lot of information about the Firefox DevTools here on MDN. Take a look at the main <a href="/en-US/docs/Tools">DevTools section</a>, and for more detail on the things we have briefly covered in this lesson see <a href="/en-US/docs/Tools/Page_Inspector#How_to">The How To Guides</a>.</p> + +<h2 id="Debugging_problems_in_CSS">Debugging problems in CSS</h2> + +<p>DevTools can be a great help when solving CSS problems, so when you find yourself in a situation where CSS isn't behaving as you expect, how should you go about solving it? The following steps should help.</p> + +<h3 id="Take_a_step_back_from_the_problem">Take a step back from the problem</h3> + +<p>Any coding problem can be frustrating, especially CSS problems because you often don't get an error message to search for online to help with finding a solution. If you are becoming frustrated, take a step away from the issue for a while — go for a walk, grab a drink, chat to a co-worker, or work on some other thing for a while. Sometimes the solution magically appears when you stop thinking about the problem, and even if not, working on it when feeling refreshed will be much easier.</p> + +<h3 id="Do_you_have_valid_HTML_and_CSS">Do you have valid HTML and CSS?</h3> + +<p>Browsers expect your CSS and HTML to be correctly written, however browsers are also very forgiving and will try their best to display your webpages even if you have errors in the markup or stylesheet. If you have mistakes in your code the browser needs to make a guess at what you meant, and it might make a different decision to what you had in mind. In addition, two different browsers might cope with the problem in two different ways. A good first step therefore is to run your HTML and CSS through a validator, to pick up and fix any errors.</p> + +<ul> + <li><a href="https://jigsaw.w3.org/css-validator/">CSS Validator</a></li> + <li><a href="https://validator.w3.org/">HTML validator</a></li> +</ul> + +<h3 id="Is_the_property_and_value_supported_by_the_browser_you_are_testing_in">Is the property and value supported by the browser you are testing in?</h3> + +<p>Browsers simply ignore CSS they don't understand. If the property or value you are using is not supported by the browser you are testing in then nothing will break, but that CSS won't be applied. DevTools will generally highlight unsupported properties and values in some way. In the screenshot below the browser does not support the subgrid value of {{cssxref("grid-template-columns")}}.</p> + +<p><img alt="Image of browser DevTools with the grid-template-columns: subgrid crossed out as the subgrid value is not supported." src="https://mdn.mozillademos.org/files/16641/no-support.png" style="height: 397px; width: 1649px;"></p> + +<p>You can also take a look at the Browser compatibility tables at the bottom of each property page on MDN. These show you browser support for that property, often broken down if there is support for some usage of the property and not others. The below table shows the compat data for the {{cssxref("shape-outside")}} property.</p> + +<p>{{compat("css.shape-outside")}}</p> + +<h3 id="Is_something_else_overriding_your_CSS">Is something else overriding your CSS?</h3> + +<p>This is where the information you have learned about specificity will come in very useful. If you have something more specific overriding what you are trying to do, you can enter into a very frustrating game of trying to work out what. However, as described above, DevTools will show you what CSS is applying and you can work out how to make the new selector specific enough to override it.</p> + +<h3 id="Make_a_reduced_test_case_of_the_problem">Make a reduced test case of the problem</h3> + +<p>If the issue isn't solved by the steps above, then you will need to do some more investigating. The best thing to do at this point is to create something known as a reduced test case. Being able to "reduce an issue" is a really useful skill. It will help you find problems in your own code and that of your colleagues, and will also enable you to report bugs and ask for help more effectively.</p> + +<p>A reduced test case is a code example that demonstrates the problem in the simplest possible way, with unrelated surrounding content and styling removed. This will often mean taking the problematic code out of your layout to make a small example which only shows that code or feature.</p> + +<p>To create a reduced test case:</p> + +<ol> + <li>If your markup is dynamically generated — for example via a CMS — make a static version of the output that shows the problem. A code sharing site like <a href="https://codepen.io/">CodePen</a> is useful for hosting reduced test cases, as then they are accessible online and you can easily share them with colleagues. You could start by doing View Source on the page and copying the HTML into CodePen, then grab any relevant CSS and JavaScript and include it too. After that, you can check whether the issue is still evident.</li> + <li>If removing the JavaScript does not make the issue go away, don't include the JavaScript. If removing the JavaScript <em>does</em> make the issue go away, then remove as much JavaScript as you can, leaving in whatever causes the issue.</li> + <li>Remove any HTML that does not contribute to the issue. Remove components or even main elements of the layout. Again, try to get down to the smallest amount of code that still shows the issue.</li> + <li>Remove any CSS that doesn't impact the issue.</li> +</ol> + +<p>In the process of doing this, you may discover what is causing the problem, or at least be able to turn it on and off by removing something specific. It is worth adding some comments to your code as you discover things. If you need to ask for help, they will show the person helping you what you have already tried. This may well give you enough information to be able to search for likely sounding problems and workarounds.</p> + +<p>If you are still struggling to fix the problem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. You are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. A more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help.</p> + +<p>In the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on Mozilla's <a href="https://bugzilla.mozilla.org">bugzilla site</a>).</p> + +<p>As you become more experienced with CSS, you will find that you get faster at figuring out issues. However even the most experienced of us sometimes find ourselves wondering what on earth is going on. Taking a methodical approach, making a reduced test case, and explaining the issue to someone else will usually result in a fix being found.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks/Organizing", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html new file mode 100644 index 0000000000..7282ef5793 --- /dev/null +++ b/files/ko/learn/css/building_blocks/handling_different_text_directions/index.html @@ -0,0 +1,147 @@ +--- +title: 텍스트 표시 방향 제어하기 +slug: Learn/CSS/Building_blocks/Handling_different_text_directions +translation_of: Learn/CSS/Building_blocks/Handling_different_text_directions +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS 학습에서 지금까지 경험한 많은 속성과 값은 화면의 크기와 연결되어 있습니다. 예를 들어, 박스의 위, 오른쪽, 아래쪽 및 왼쪽에 테두리를 만듭니다. 이러한 실제 측정 기준은 가로로 표시되는 콘텐츠에 매우 깔끔하게 매핑되며, 기본적으로 웹은 오른쪽에서 왼쪽으로 쓰는 언어 (예: 아랍어) 보다 왼쪽에서 오른쪽으로 쓰는 언어 (예: 영어 또는 프랑스어) 를 더 잘 지원하는 경향이 있습니다.</p> + +<p>그러나 최근 몇 년 동안, CSS 는 오른쪽에서 왼쪽 뿐만 아니라 위에서 아래로 오는 콘텐츠 (예: 일본어) 를 포함하여 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 <strong>쓰기 모드 (writing modes)</strong> 라고 합니다. 학습 과정을 진행하고 레이아웃 작업을 시작함에 따라 쓰기 모드에 대한 이해가 도움이 될 것이므로 지금 소개하겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>최신 CSS 에 대한 쓰기 모드의 중요성을 이해하기.</td> + </tr> + </tbody> +</table> + +<h2 id="쓰기_모드_writing_modes란_무엇인가">쓰기 모드 (writing modes)란 무엇인가?</h2> + +<p>CSS 쓰기 모드는 텍스트가 가로 또는 세로로 표시되는지 여부를 나타냅니다. {{cssxref("writing-mode")}} 속성을 사용하면 쓰기 모드에서 다른 쓰기 모드로 전환할 수 있습니다. 이를 위해 세로 쓰기 모드를 사용하는 언어로 작업할 필요는 없습니다 — 창의적 목적으로 레이아웃 일부의 쓰기 모드를 변경할 수도 있습니다.</p> + +<p>아래 예에서는 <code>writing-mode: vertical-rl</code> 를 사용하여 표시되는 제목이 있습니다. 이제 텍스트가 세로로 나타납니다. 세로 텍스트는 그래픽 디자인에서 일반적이며, 웹 디자인에서 보다 흥미로운 모양과 느낌을 추가할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/simple-vertical.html", '100%', 800)}}</p> + +<p><code><a href="/en-US/docs/Web/CSS/writing-mode">writing-mode</a></code> 속성에 가능한 세 가지 값은 다음과 같습니다:</p> + +<ul> + <li><code>horizontal-tb</code>: 블록의 표시 방향은 위에서 아래 입니다. 문장은 가로로 표시됩니다.</li> + <li><code>vertical-rl</code>: 블록의 표시 방향은 오른쪽에서 왼쪽입니다. 문장은 수직으로 표시됩니다.</li> + <li><code>vertical-lr</code>: 블록의 표시 방향은 왼쪽에서 오른쪽입니다. 문장은 수직으로 표시됩니다.</li> +</ul> + +<p>따라서 <code>writing-mode</code> 속성은 실제로 페이지에서 블록 수준 요소가 표시되는 방향을 설정합니다 — 위에서 아래로, 오른쪽에서 왼쪽으로 또는 왼쪽에서 오른쪽으로. 그러면 문장의 텍스트 방향이 지시됩니다.</p> + +<h2 id="쓰기_모드_와_블록_및_인라인_레이아웃">쓰기 모드 와 블록 및 인라인 레이아웃</h2> + +<p>우리는 이미 <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model#Block_and_inline_boxes">블록 및 인라인 레이아웃</a> 과 일부는 블록 요소로 표시되고 다른 것은 인라인 요소로 표시된다는 사실에 대해 이미 논의했습니다. 위에서 설명한 것처럼 블록과 인라인은 실제 화면이 아니라 문서의 쓰기 모드와 연결되어 있습니다. 영어와 같이 텍스트를 가로로 표시하는 쓰기 모드를 사용하는 경우 블록은 페이지의 맨 위에서 아래로만 표시됩니다.</p> + +<p>예제를 보면 더 명확해집니다. 이 다음 예제에서는 제목과 단락을 포함하는 두 개의 박스가 있습니다. 첫 번째 쓰기 모드는 페이지 상단에서 하단으로 수평으로 표시되는 <code>writing-mode: horizontal-tb</code> 를 사용합니다. 두 번째 쓰기 모드는 세로로 오른쪽에서 왼쪽으로 표시되는 <code>writing-mode: vertical-rl</code> 를 사용합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/block-inline.html", '100%', 1200)}}</p> + +<p>쓰기 모드를 전환하면, 블록 (block) 방향과 인라인 (inline) 방향을 변경합니다. <code>horizontal-tb</code> 쓰기 모드에서 블록 방향은 위에서 아래로 진행됩니다. <code>vertical-rl</code> 쓰기 모드에서 블록 방향은 오른쪽에서 왼쪽으로 수평으로 표시됩니다. 따라서 <strong>블록 크기</strong>는 항상 쓰기 모드에서 페이지에 표시되는 방향 블록입니다. <strong>인라인 크기</strong>는 항상 문장이 표시되는 방향입니다.</p> + +<p>이 그림은 가로 쓰기 모드에 있을 때 2 차원 모양을 보여줍니다.<img alt="Showing the block and inline axis for a horizontal writing mode." src="https://mdn.mozillademos.org/files/16574/horizontal-tb.png" style="height: 353px; width: 634px;"></p> + +<p>이 그림은 세로 쓰기 모드에서 2 차원 모양을 보여줍니다.</p> + +<p><img alt="Showing the block and inline axis for a vertical writing mode." src="https://mdn.mozillademos.org/files/16575/vertical.png" style="height: 472px; width: 406px;"></p> + +<p>CSS 레이아웃, 특히 최신 레이아웃 방법을 살펴보기 시작하면, 블록 및 인라인에 대한 이 아이디어가 매우 중요해 집니다. 나중에 다시 방문하겠습니다.</p> + +<h3 id="방향_Direction">방향 (Direction)</h3> + +<p>쓰기 모드 외에 텍스트 방향도 있습니다. 위에서 언급한 것처럼, 아랍어와 같은 일부 언어는 가로로 작성되지만, 오른쪽에서 왼쪽으로 작성됩니다. 이것은 창의적 의미에서 사용할 가능성이 있는 것이 아닙니다 — 단순히 오른쪽에 무언가를 정렬하려면 다른 방법이 있습니다 — 그러나 CSS 의 특성의 일부로 이것을 이해하는 것이 중요합니다. 웹은 왼쪽에서 오른쪽으로 표시되는 언어만을 위한 것이 아닙니다!</p> + +<p>쓰기 모드와 텍스트 방향이 변경될 수 있기 때문에, 최신 CSS 레이아웃 방법은 왼쪽과 오른쪽, 위와 아래를 참조하지 않습니다. 대신에 그들은 인라인과 블록이라는 아이디어와 함께 <em><strong>시작</strong> </em>과 <em><strong>끝</strong> </em>에 대해 이야기할 것입니다. 지금 그것에 대해 너무 걱정하지 말고 레이아웃을 살펴보기 시작할 때, 이러한 아이디어를 명심하십시오. CSS 에 대한 이해에 도움이 될 것입니다.</p> + +<h2 id="논리적_속성_및_값">논리적 속성 및 값</h2> + +<p>그러나 이 시점의 학습에서 쓰기 모드와 방향에 대해 이야기하는 이유는 우리가 이미 화면의 크기와 관련된 많은 속성을 보았고, 수평 쓰기 모드에 있을 때 가장 의미가 있기 때문입니다.</p> + +<p>두 개의 박스를 다시 살펴 보겠습니다 — 하나는 <code>horizontal-tb</code> 쓰기 모드이고 다른 하나는 <code>vertical-rl</code> 입니다. 이 두 박스 모두 {{cssxref("width")}} 를 제공했습니다. 박스가 세로 쓰기 모드일 때 여전히 너비가 있으며, 이로 인해 텍스트가 overflow 되는 것을 알 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/width.html", '100%', 1200)}}</p> + +<p>이 시나리오에서 우리가 정말로 원하는 것은 쓰기 모드와 함께 높이와 너비를 본질적으로 바꾸는 것입니다. 세로 쓰기 모드인 경우 박스를 가로 쓰기 모드에서와 같이 블록 크기로 확장하려고 합니다.</p> + +<p>이를 쉽게하기 위해, CSS 는 최근에 매핑된 속성 세트를 개발했습니다. 이것들은 본질적으로 — <code>width</code> 및 <code>height</code> — 와 같은 물리적 속성을 <strong>논리적</strong> 또는 <strong>flow relative</strong> 버전으로 대체합니다.</p> + +<p>가로 쓰기 모드인 경우 <code>width</code> 에 매핑된 속성을 {{cssxref("inline-size")}} 라고 합니다 — 인라인의 크기를 나타냅니다. <code>height</code> 의 속성 이름은 {{cssxref("block-size")}} 이며 블록의 크기입니다. <code>width</code> 가 <code>inline-size</code> 로 대체된 아래 예에서 이것이 어떻게 작동하는지 볼 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/inline-size.html", '100%', 1200)}}</p> + +<h3 id="논리적_마진_테두리_및_패딩_속성">논리적 마진, 테두리 및 패딩 속성</h3> + +<p>지난 두 가지 수업에서 CSS 박스 모델과 CSS 테두리에 대해 배웠습니다. 마진, 테두리 및 패딩 속성에는 {{cssxref("margin-top")}}, {{cssxref("padding-left")}} 및 {{cssxref("border-bottom")}} 과 같은 여러 물리적 속성 인스턴스가 있습니다. 너비와 높이에 대한 매핑과 같은 방식으로 이러한 속성에 대한 매핑도 있습니다.</p> + +<p><code>margin-top</code> 속성은 {{cssxref("margin-block-start")}} 에 매핑됩니다 — 이것은 항상 블록 크기의 시작에서 마진을 나타냅니다.</p> + +<p>{{cssxref("padding-left")}} 속성은 인라인 방향의 시작 부분에 적용되는 패딩 {{cssxref("padding-inline-start")}} 에 매핑됩니다. 이것은 쓰기 모드에서 문장이 시작되는 곳입니다. {{cssxref("border-bottom")}} 속성은 블록 크기의 끝의 경계인 {{cssxref("border-block-end")}} 에 매핑됩니다.</p> + +<p>아래에서 물리적 속성과 논리적 속성을 비교할 수 있습니다.</p> + +<p><strong><code>.box</code> 의 쓰기 모드 속성을 <code>vertical-rl</code> 로 전환하여 박스의 <code>writing-mode</code> 를 변경하면 물리적 속성이 물리적 방향과 연결되어 있는 반면, 논리적 속성은 쓰기 모드로 전환됩니다.</strong></p> + +<p><strong>또한 {{htmlelement("h2")}} 에 검은색 <code>border-bottom</code> 이 있음을 알 수 있습니다. 아래쪽 테두리가 항상 두 쓰기 모드에서 텍스트 아래로 이동하는 방법을 알아낼 수 있습니까?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/logical-mbp.html", '100%', 1200)}}</p> + +<p>모든 개별 테두리를 고려할 때 많은 속성이 있으며, <a href="/en-US/docs/Web/CSS/CSS_Logical_Properties">논리 속성 및 값</a> 에 대한 MDN 페이지에서 매핑된 속성을 모두 볼 수 있습니다.</p> + +<h3 id="논리적_값">논리적 값</h3> + +<p>지금까지 논리적 속성 이름을 살펴보았습니다. <code>top</code>, <code>right</code>, <code>bottom</code> 및 <code>left</code> 의 물리적 값을 취하는 속성도 있습니다 — 이러한 값에는 <code>block-start</code>, <code>inline-end</code>, <code>block-end</code> 및 <code>inline-start</code> 과 같은 논리값에 대한 매핑도 있습니다.</p> + +<p>예를 들어, 이미지를 왼쪽으로 띄워서 텍스트가 이미지를 감싸도록 할 수 있습니다. 아래 예와 같이 <code>left</code> 을 <code>inline-start</code> 으로 바꿀 수 있습니다.</p> + +<p><strong>이 예제에서 쓰기 모드를 <code>vertical-rl</code> 로 변경하여 이미지에 어떤 일이 발생하는지 확인하십시오. float 를 변경하려면 <code>inline-start</code> 를 <code>inline-end</code> 로 변경하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/writing-modes/float.html", '100%', 1200)}}</p> + +<p>여기에서는 쓰기 모드가 무엇이든 상관없이 논리 마진값을 사용하여 마진이 올바른 위치에 있는지 확인합니다.</p> + +<h3 id="물리적_또는_논리적_속성을_사용해야_합니까">물리적 또는 논리적 속성을 사용해야 합니까?</h3> + +<p>논리적 속성과 값은 물리적 속성보다 최신이므로, 브라우저에서만 최근에 구현되었습니다. 브라우저 지원이 얼마나 돌아가는지 보려면, MDN 의 속성 페이지를 확인할 수 있습니다. 여러 쓰기 모드를 사용하지 않는 경우, 지금은 실제 버전을 사용하는 것이 좋습니다. 그러나 궁극적으로 사람들은 flexbox 및 grid 와 같은 레이아웃 방법을 다루기 시작하면, 많은 의미가 있기 때문에 사람들이 대부분의 경우 논리적 버전으로 전환할 것으로 기대합니다.</p> + +<h2 id="요약">요약</h2> + +<p>이 학습에서 설명 개념은 CSS 에서 점점 중요해지고 있습니다. 블록과 인라인 방향에 대한 이해와 쓰기 모드의 변화에 따른 텍스트 방향의 변화는 앞으로 매우 유용할 것입니다. 가로 이외의 쓰기 모드를 사용하지 않아도 CSS 를 이해하는 데 도움이 됩니다.</p> + +<p>다음 학습에서는 CSS 의 overflow 를 자세히 살펴볼 것입니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_단원에서는">이번 단원에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/images_media_form_elements/index.html b/files/ko/learn/css/building_blocks/images_media_form_elements/index.html new file mode 100644 index 0000000000..10945b103d --- /dev/null +++ b/files/ko/learn/css/building_blocks/images_media_form_elements/index.html @@ -0,0 +1,195 @@ +--- +title: '이미지, 미디어 및 양식 요소nts' +slug: Learn/CSS/Building_blocks/Images_media_form_elements +translation_of: Learn/CSS/Building_blocks/Images_media_form_elements +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</div> + +<p>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td> + <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p> + </td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 로 스타일을 지정할 때 일부 요소가 비정상적으로 동작하는 방식을 이해하기.</td> + </tr> + </tbody> +</table> + +<h2 id="대체_Replaced_요소">대체 (Replaced) 요소</h2> + +<p>이미지와 비디오는 <strong><a href="/en-US/docs/Web/CSS/Replaced_element">대체 요소</a></strong> 로 설명됩니다. 즉, CSS 는 이러한 요소의 내부 레이아웃에 영향을 줄 수 없으며 — 다른 요소중에서 페이지의 위치에만 영향을 줍니다. 그러나 우리가 볼 수 있듯이 CSS 는 이미지로 할 수 있는 다양한 일들이 있습니다.</p> + +<p>이미지 및 비디오와 같은 특정 대체 요소도 <strong>종횡비 (aspect ratio) </strong>를 갖는 것으로 설명됩니다. 이는 가로 (x) 및 세로 (y) 크기를 가지며, 기본적으로 파일의 고유 크기를 사용하여 표시됨을 의미합니다.</p> + +<h2 id="이미지_크기_조정">이미지 크기 조정</h2> + +<p>이 수업을 수행하여 이미 알고 있듯이 CSS 의 모든 것은 박스를 생성합니다. 이미지 파일의 고유 크기보다 작거나 큰 박스 안에 이미지를 배치하면, 박스보다 작게 나타나거나 박스가 overflow 됩니다. overflow 로 인해 발생하는 일에 대해 결정해야 합니다.</p> + +<p>아래 예에서는 크기가 200 픽셀인 두 개의 박스가 있습니다:</p> + +<ul> + <li>하나는 200 픽셀보다 작은 이미지를 포함합니다 — 이미지는 박스보다 작으며 이미지를 채우기 위해 늘어나지 않습니다.</li> + <li>다른 하나는 200 픽셀보다 커서 박스를 넘칩니다.</li> +</ul> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/size.html", '100%', 1000)}}</p> + +<p>overflow 문제에 대해 우리는 무엇을 할 수 있습니까?</p> + +<p><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">이전 수업</a> 에서 배운 것처럼 일반적인 기술은 이미지의 {{cssxref("max-width")}} 를 100% 로 만드는 것입니다. 이렇게하면 이미지가 박스보다 작지만 커질 수 없습니다. 이 기술은 <code><a href="/en-US/docs/Web/HTML/Element/video"><video></a></code> 또는 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 과 같은 다른 대체 요소와 함께 작동합니다.</p> + +<p><strong>위 예에서 <code><img></code> 요소에 <code>max-width: 100%</code> 를 추가하십시오. 작은 이미지는 변경되지 않지만, 큰 이미지는 박스에 맞게 작아집니다.</strong></p> + +<p>container 내부의 이미지에 대해 다른 선택을 할 수 있습니다. 예를 들어, 박스 크기를 완전히 덮을 수 있도록 이미지 크기를 조정할 수 있습니다.</p> + +<p>{{cssxref("object-fit")}} 속성이 도움이 될 수 있습니다. <code>object-fit</code> 를 사용할 때 대체 요소의 크기를 다양한 방식으로 박스에 맞게 조정할 수 있습니다.</p> + +<p>아래에서는 값 <code>cover</code> 를 사용하여 이미지의 크기를 줄이며, 화면 비율을 유지하여 박스를 깔끔하게 채웁니다. 종회비가 유지되면 이미지의 일부가 박스에 의해 잘립니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/object-fit.html", '100%', 1000)}}</p> + +<p><code>contain</code> 을 값으로 사용하면 이미지가 박스 안에 들어갈만큼 작아질 때까지 이미지가 축소됩니다. 박스와 종횡비가 다르면 "letterbox" 가 됩니다.</p> + +<p>박스를 채우지만 종횡비는 유지하지 않는 <code>fill</code> 값을 사용해 볼 수도 있습니다.</p> + +<h2 id="대체_요소_레이아웃">대체 요소 레이아웃</h2> + +<p>대체 요소에 다양한 CSS 레이아웃 기술을 사용하면, 다른 요소와 약간 다르게 동작할 수 있습니다. 예를 들어, flex 또는 grid 레이아웃에서 요소는 기본적으로 전체 영역을 채우기 위해 확장됩니다. 이미지가 늘어나지 않고 grid 영역 또는 flex container 의 시작 부분에 맞춰 정렬됩니다.</p> + +<p>아래 예에서 두 개의 열, 두 개의 행 grid container 가 있으며, 여기에는 네 개의 항목이 있습니다. 모든 <code><div></code> 요소는 배경색을 가지며 행과 열을 채우기 위해 확장됩니다. 그러나, 이미지가 늘어나지 않습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/layout.html", '100%', 1000)}}</p> + +<p>이 수업을 순서대로 따르는 경우 레이아웃을 아직 보지 않았을 수 있습니다. 대체 요소는 grid 또는 flex 레이아웃의 일부가 될 때, 기본 동작이 서로 다르다는 점을 유념해 주십시오. 기본적으로 배치로 인해 이상하게 늘어나지 않도록 하기 위해서입니다.</p> + +<p>grid 셀을 채우도록 이미지를 늘리려면, 다음과 같은 작업을 수행해야 합니다:</p> + +<pre class="brush: css">img { + width: 100%; + height: 100%; +}</pre> + +<p>그러나 이것은 이미지를 늘릴 것이기 때문에, 아마 당신이 하고 싶지 않을 것입니다.</p> + +<h2 id="양식_Form_요소">양식 (Form) 요소</h2> + +<p>CSS 로 스타일링 할 때, 양식 요소는 까다로운 문제가 될 수 있으며 <a href="/en-US/docs/Learn/Forms">웹 양식 모듈</a> 에는 약식 요소의 까다로운 측면에 대한 자세한 안내서가 포함되어 있습니다. 이 기사에서 강조할 가치가 있는 몇 가지 기본 사항이 있습니다.</p> + +<p><code><a href="/en-US/docs/Web/HTML/Element/input"><input></a></code> 요소를 통해 많은 양식 컨트롤이 페이지에 추가됩니다 — 텍스트 입력과 같은 간단한 양식 필드를 정의하고 색상 및 날짜 선택자와 같은 HTML5 에 추가된 보다 복잡한 필드를 통해 정의합니다. 여러줄로 된 텍스트 입력을 위한 <code><a href="/en-US/docs/Web/HTML/Element/textarea"><textarea></a></code> 와 같은 일부 추가 요소와 <code><a href="/en-US/docs/Web/HTML/Element/fieldset"><fieldset></a></code> 및 <code><a href="/en-US/docs/Web/HTML/Element/legend"><legend></a></code> 와 같은 양식의 일부를 포함하고 레이블을 지정하는 데 사용되는 요소가 있습니다.</p> + +<p>HTML5 에는 또한 웹 개발자가 어떤 필드가 필요한지, 심지어 입력해야하는 콘텐츠 유형을 표시할 수 있는 속성이 포함되어 있습니다. 사용자가 예기치 않은 것을 입력하거나 필수 필드를 비워두면, 브라우저에 오류 메시지가 표시될 수 있습니다. 다른 브라우저는 이러한 항목에 대해 얼마나 많은 스타일과 사용자 정의가 허용되는지에 일관성이 없습니다.</p> + +<h3 id="텍스트_입력_요소_스타일링">텍스트 입력 요소 스타일링</h3> + +<p><code><input type="text"></code> 와 같은 텍스트 입력을 허용하는 요소, <code><input type="email"></code>, 과 같은 특정 유형 및 <code><textarea></code> 요소는 스타일이 매우 쉽고 다른 박스처럼 동작하는 경향이 있습니다. 귀하의 페이지에 이러한 요소의 기본 스타일은 사용자가 사이트를 방문하는 운영체제 및 브라우저에 따라 다릅니다.</p> + +<p>아래 예에서는 CSS 를 사용하여 일부 텍스트 입력의 스타일을 지정했습니다 — 테두리, 마진 및 패딩과 같은 항목이 모두 예상대로 적용되는 것을 볼 수 있습니다. 속성 선택자를 사용하여 다양한 입력 유형을 대상으로 하고 있습니다. 테두리를 조정하고, 필드에 배경색을 추가하고, 글꼴 및 패딩을 변경하여 이 양식의 모양을 변경하십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/images/form.html", '100%', 1000)}}</p> + +<div class="blockIndicator warning"> +<p><strong>중요</strong>: 양식 요소의 스타일을 변경할 때 양식 요소임을 사용자에게 확실히 알 수 있도록 주의해야 합니다. 테두리와 배경이 없는 양식 입력을 작성할 수 있습니다. 이 입력 양식은 주변 내용과 거의 구분할 수 없습니다. 이로 인해 인식하고 채우기가 매우 어려워집니다.</p> +</div> + +<p>이 과정의 HTML 부분에서 <a href="/en-US/docs/Learn/Forms/Styling_web_forms">양식 스타일</a> 에 대한 강의에서 설명한대로, 보다 복잡한 입력 유형 중 많은 부분이 운영체제에서 렌더링되며 스타일에 액세스할 수 없습니다. 따라서 항상 방문자마다 양식이 크게 달라지고 여러 브라우저에서 복잡한 양식을 테스트한다고 가정해야합니다.</p> + +<h3 id="상속_과_양식_요소">상속 과 양식 요소</h3> + +<p>일부 브라우저에서 양식 요소는 기본적으로 글꼴 스타일을 상속하지 않습니다. 따라서 양식 필드가 본문 또는 상위 요소에 정의된 글꼴을 사용하도록 하려면, 이 규칙을 CSS 에 추가해야 합니다.</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family : inherit; + font-size : 100%; +} </code></pre> + +<h3 id="양식_요소_및_박스_크기_조정">양식 요소 및 박스 크기 조정</h3> + +<p>여러 브라우저 양식 요소는 서로 다른 위젯에 다른 박스 크기 조정 규칙을 사용합니다. <a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델 학습</a> 에서 <code>box-sizing</code> 속성에 대해 학습했으며 양식을 스타일링할 때 이 지식을 사용하여 양식 요소에서 너비와 높이를 설정할 때 일관된 경험을 보장할 수 있습니다.</p> + +<p>일관성을 유지하려면 모든 요소에서 마진과 패딩을 <code>0</code> 으로 설정한 다음 특정 컨트롤을 스타일링할 때 다시 마진을 추가하는 것이 좋습니다.</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + box-sizing: border-box; + padding: 0; + margin: 0; +}</code></pre> + +<h3 id="다른_유용한_설정">다른 유용한 설정</h3> + +<p>위에서 언급한 규칙 외에도 <code><textarea></code> 에서 <code>overflow: auto</code> 를 설정하여 스크롤 막대가 필요하지 않은 경우 IE 에 스크롤 막대가 표시되지 않도록 설정해야 합니다:</p> + +<pre class="brush: css">textarea { + overflow: auto; +}</pre> + +<h3 id="모든_것을_재설정_으로_통합">모든 것을 "재설정" 으로 통합</h3> + +<p>마지막 단계로, 위에서 설명한 다양한 속성을 다음 "양식 재설정" 으로 마무리하여 일관된 작업 기반을 제공할 수 있습니다. 여기에는 마지막 세 섹션에서 언급한 모든 항목이 포함됩니다:</p> + +<pre class="brush: css"><code>button, +input, +select, +textarea { + font-family: inherit; + font-size: 100%; + box-sizing: border-box; + padding: 0; margin: 0; +} + +textarea { + overflow: auto; +} </code></pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: Normalizing 스타일 시트는 많은 개발자가 모든 프로젝트에 사용할 일련의 기본 스타일을 작성하는 데 사용됩니다. 일반적으로 이것들은 위에서 설명한 것과 비슷한 기능을 수행하므로, CSS 에 대한 작업을 수행하기 전에 브라우저마다 다른것이 일관된 기본값으로 설정되어 있는지 확인하십시오. 브라우저는 일반적으로 과거보다 일관성이 높기 때문에, 예전만큼 중요하지 않습니다. 그러나 하나의 예를 살펴보려면 많은 프로젝트에서 기본으로 사용되는 매우 인기있는 스타일 시트인 <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> 를 확인하십시오.</p> +</div> + +<p>스타일링 양식에 대한 자세한 내용은 이 안내의 HTML 섹션에 있는 두 기사를 살펴보십시오.</p> + +<ul> + <li><a href="/en-US/docs/Learn/Forms/Styling_web_forms">웹 양식 스타일링</a></li> + <li><a href="/en-US/docs/Learn/Forms/Advanced_form_styling">고급 양식 스타일링</a></li> +</ul> + +<h2 id="요약">요약</h2> + +<p>이 수업에서는 CSS 에서 이미지, 미디어 및 기타 특이한 요소로 작업할 때 발생할 수 있는 몇 가지 차이점을 강조했습니다. 다음 기사에서는 HTML 표의 스타일을 지정해야할 때 유용한 몇 가지 팁을 살펴보겠습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks/Styling_tables", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/index.html b/files/ko/learn/css/building_blocks/index.html new file mode 100644 index 0000000000..aa2d21c448 --- /dev/null +++ b/files/ko/learn/css/building_blocks/index.html @@ -0,0 +1,90 @@ +--- +title: CSS 구성 블록 +slug: Learn/CSS/Building_blocks +tags: + - Beginner + - CSS + - Learn + - NeedsTranslation + - TopicStub + - building blocks +translation_of: Learn/CSS/Building_blocks +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">이 강의에서는 <a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 가 중단된 부분을 처리합니다 — 이제 언어와 구문에 익숙해졌으며, 약간 더 깊이 익힐 때가 되었을 때, 이를 사용하는 기본적인 경험을 얻었습니다. 이 과목에서는 계단식 및 상속, 사용 가능한 모든 선택자 유형, 단위 크기 조정, 배경 및 테두리 스타일 지정, 디버깅 등을 살펴 봅니다.</p> + +<p class="summary">여기에서의 목표는 <a href="/en-US/docs/Learn/CSS/Styling_text">텍스트 스타일</a> 및 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 과 같은 보다 구체적인 분야로 이동하기 전에 유능한 CSS 를 작성하기 위한 도구를 제공하고 모든 필수 이론을 이해하도록 돕는 것입니다.</p> + +<h2 id="전제_조건">전제 조건</h2> + +<p>이 과목을 시작하기 전에 다음이 있어야 합니다:</p> + +<ol> + <li>컴퓨터 사용 및 수동적으로 웹을 사용하는 것 (즉, 보기기만 하고 콘텐츠를 소비하는 것.) 에 대한 기본적인 친숙성.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a> 에 설명 된대로 기본 작업 환경과 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 처리</a> 에 설명 된대로 파일 작성 및 관리 방법에 대한 이해.</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 과목에서 설명한 HTML 에 대한 기본적인 친숙성.</li> + <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 과목에서 논의된 CSS 의 기본 사항에 대한 이해.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.</p> +</div> + +<h2 id="안내">안내</h2> + +<p>이 강의에서는 CSS 언어의 가장 중요한 부분을 다루는 다음 기사가 포함되어 있습니다. 그 과정에서 당신은 이해력을 시험할 수 있도록 하기 위해 많은 연습을 하게 될 것입니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 (cascade) 및 상속 (inheritance)</a></dt> + <dd>이번 수업의 목적은 CSS 가 HTML 에 적용되는 방법과 충돌을 해결하는 방법을 제어하는 CSS 의 가장 기본적인 개념인 — 계단식, 우선 순위 및 상속 — 에 대한 이해를 발전시키는 것입니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a></dt> + <dd>사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴 보겠습니다. 하위 기사는 다음과 같습니다: + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자 (combinators)</a></li> + </ul> + </dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></dt> + <dd>CSS 의 모든 것에는 주위에 박스가 있으며, 이러한 박스를 이해하는 것은 CSS 를 사용하여 레이아웃을 만들거나 다른 항목과 항목을 정렬하는 데 중요합니다. 이 수업에서는 CSS <em><strong>박스 모델</strong> </em>을 제대로 살펴보고, 작동 방식 및 관련 용어를 이해하여 보다 복잡한 레이아웃 작업으로 넘어갈 수 있습니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></dt> + <dd>이번 수업에서는 CSS 배경과 테두리로 할 수 있는 창의적인 작업을 살펴 보겠습니다. 그라데이션 (gradients), 배경 이미지 및 둥근 테두리를 추가하는 경우, 배경과 테두리는 CSS 의 많은 스타일 질문에 대한 답입니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></dt> + <dd>최근 몇 년 동안, CSS 는 오른쪽에서 왼쪽으로 뿐만 아니라, 위에서 아래로 (일본어와 같은) 내용을 포함하여 서로 다른 내용의 방향성을 더 잘 지원하기 위해 발전했습니다 — 이러한 다른 방향을 <strong>쓰기 모드 (writing modes)</strong> 라고 합니다. 학습 과정을 진행하고 레이아웃 작업을 시작하면 쓰기 모드에 대한 이해가 도움이 되므로 이 기사에서 소개합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 Overflow</a></dt> + <dd>이 수업에서는 CSS 의 또 다른 중요한 개념인 — <strong>overflow</strong> 를 살펴 봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS 값 과 단위</a></dt> + <dd>CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값이 있습니다. 이 수업에서는 가장 일반적인 값과 사용 단위를 살펴 보겠습니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></dt> + <dd>지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러 가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></dt> + <dd>이 수업에서는 CSS 에서 특정 특수 요소를 처리하는 방법을 살펴 봅니다. 이미지, 기타 미디어 및 양식 요소는 일반 박스와 CSS 로 스타일을 지정할 수 있다는 점에서 약간 다르게 작동합니다. 무엇이 가능하고 불가능한지를 이해하면, 약간의 좌절감을 줄일 수 있으며, 이 수업에서는 알아야 할 주요 사항을 중점적으로 다룹니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></dt> + <dd>HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기 좋게 만드는 방법에 대한 안내서를 제공합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></dt> + <dd>때로는 CSS 를 작성 할 때 CSS 가 예상 한 대로 동작하지 않는 문제가 발생합니다. 이 기사에서는 CSS 문제를 디버깅하는 방법에 대한 지침을 제공하고, 모든 최신 브라우저에 포함된 개발도구 (DevTools) 가 진행중인 작업을 찾는 데 어떻게 도움이 되는지 보여줍니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></dt> + <dd>더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리 할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리를 개선하기 위해 다른 사용자가 사용하는 해결책을 간략하게 살펴 보겠습니다.</dd> +</dl> + +<h2 id="평가">평가</h2> + +<p>CSS 기술을 테스트하고 싶습니까? 다음 평가는 위 안내서에서 다루는 CSS 에 대한 이해를 테스트 합니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">기본 CSS 이해</a></dt> + <dd>이 평가는 기본적인 구문, 선택자, 우선 순위, 박스 모델 등에 대한 이해를 테스트 합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">멋진 편지지 만들기</a></dt> + <dd>올바른 인상을 남기고 싶다면, 멋진 편지지에 편지를 쓰는 것이 정말 좋습니다. 이 평가에서는 이러한 모양을 달성하기 위해 온라인 템플릿을 작성해야 합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">멋진 박스</a></dt> + <dd>여기에서는 배경 및 테두리 스타일을 사용하여 눈길을 끄는 박스를 만드는 방법을 연습합니다.</dd> +</dl> + +<h2 id="참고_항목">참고 항목</h2> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">고급 스타일링 효과</a></dt> + <dd>이 기사는 박스 그림자, blend modes 및 필터 와 같은 흥미로운 고급 스타일링 기능에 대한 소개를 제공하는 트릭 박스 역할을 합니다.</dd> +</dl> diff --git a/files/ko/learn/css/building_blocks/organizing/index.html b/files/ko/learn/css/building_blocks/organizing/index.html new file mode 100644 index 0000000000..a80c5cb17d --- /dev/null +++ b/files/ko/learn/css/building_blocks/organizing/index.html @@ -0,0 +1,350 @@ +--- +title: CSS 구성 +slug: Learn/CSS/Building_blocks/Organizing +translation_of: Learn/CSS/Building_blocks/Organizing +--- +<div>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>더 큰 스타일 시트와 큰 프로젝트에서 작업을 시작하면 큰 CSS 파일을 유지 관리하는 것이 어려울 수 있습니다. 이 기사에서는 CSS 를 쉽게 유지 관리할 수 있도록 작성하는 몇 가지 모범 사례와 유지 관리성을 개선하기 위해, 다른 사용자가 사용하는 해결책을 간략하게 살펴보겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>스타일 시트 구성을 위한 몇 가지 팁과 모범사례를 배우고, CSS 구성 및 팀 작업에 도움이 되는 일반적인 사용법의 이름 지정 규칙 및 도구에 대해 알아보기.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_를_깔끔하게_유지하는_팁">CSS 를 깔끔하게 유지하는 팁</h2> + +<p>다음은 스타일 시트를 체계적이고 깔끔하게 유지하는 방법에 대한 일반적인 제안입니다.</p> + +<h3 id="프로젝트에_코딩_스타일_가이드라인이_있습니다">프로젝트에 코딩 스타일 가이드라인이 있습니다?</h3> + +<p>기존 프로젝트에서 팀과 함께 작업하는 경우, 가장 먼저 확인해야 할 것은 프로젝트에 CSS 에 대한 기존 스타일 가이드라인이 있는지 여부입니다. 팀 스타일 안내는 항상 개인 취향보다 우선합니다. 일을 하는 옳고 그른 방법은 없지만, 일관성이 중요합니다.</p> + +<p>예를 들어, <a href="/en-US/docs/MDN/Contribute/Guidelines/Code_guidelines/CSS">MDN code 예제에 대한 CSS 지침</a> 을 살펴보십시오.</p> + +<h3 id="일관성_유지">일관성 유지</h3> + +<p>프로젝트 규칙을 설정하거나 단독으로 작업하는 경우, 가장 중요한 것은 일관성을 유지하는 것입니다. 일관성은 class 에 동일한 이름 지정 규칙 사용, 색상을 설명하는 한 가지 방법을 선택하거나, 일관된 형식을 유지하는 등의 모든 종류의 방식으로 적용할 수 있습니다 (예: 탭이나 공백을 사용하여 코드를 들여쓰기 하시겠습니까? 공백은 몇 칸입니까?)</p> + +<p>규칙을 항상 준수하면 일부 결정이 이미 내려졌기 때문에, CSS 를 작성할 때 필요한 정신적 부담이 줄어듭니다.</p> + +<h3 id="읽기_쉬운_CSS_서식">읽기 쉬운 CSS 서식</h3> + +<p>CSS 형식을 볼 수 있는 몇 가지 방법이 있습니다. 일부 개발자는 다음과 같이 모든 규칙을 한 라인에 넣습니다:</p> + +<pre class="brush: css">.box { background-color: #567895; } +h2 { background-color: black; color: white; }</pre> + +<p>다른 개발자는 모든 것을 새로운 라인으로 나누는 것을 선호합니다:</p> + +<pre class="brush: css">.box { + background-color: #567895; +} + +h2 { + background-color: black; + color: white; +}</pre> + +<p>CSS 는 어떤 것을 사용하든 상관없습니다. 개인적으로 각 속성과 값 쌍을 새 라인에 추가하는 것이 더 읽기 쉽습니다.</p> + +<h3 id="CSS_주석_추가">CSS 주석 추가</h3> + +<p>CSS 에 주석을 추가하면 향후 개발자가 CSS 파일을 처리하는 데 도움이 되지만, 휴식 후 프로젝트에 다시 참여할 때도 도움이 됩니다.</p> + +<pre class="brush: css">/* 이것은 주석입니다 +여러 라인으로 구분할 수 있습니다. */</pre> + +<p>유용한 팁은 또한 스타일 시트의 논리 섹션 사이에 주석 블록을 추가하여 스캔할 때 다른 섹션을 신속하게 찾도록 도와주거나, CSS 의 해당 부분으로 바로 이동할 수 있는 정보를 제공하는 것이 좋습니다. 코드에 나타나지 않는 문자열을 사용하는 경우, 검색하여 섹션 간을 이동할 수 있습니다 — 아래에서 <code>||</code> 를 사용했습니다.</p> + +<pre class="brush: css">/* || 일반적인 스타일 */ + +... + +/* || Typography */ + +... + +/* || Header 및 Main Navigation */ + +... + +</pre> + +<p>CSS 의 모든 사항에 대해 일일이 설명할 필요는 없습니다. 대부분 따로 설명이 필요없기 때문입니다. 여러분이 언급해야 할 것은 특정한 이유로 결정한 것들입니다.</p> + +<p>오래된 브라우저 비 호환성을 피하기 위해 CSS 속성을 특정 방식으로 사용했을 수 있습니다. 예를 들면 다음과 같습니다:</p> + +<pre class="brush: css">.box { + background-color: red; /* 그라데이션을 지원하지 않는 이전 브라우저의 대비책 */ + background-image: linear-gradient(to right, #ff0000, #aa0000); +} +</pre> + +<p>아마도 여러분은 무언가를 성취하기 위해 자습서를 따랐을 것입니다. 그리고 CSS 는 약간 눈에 띄지 않습니다. 이 경우, 여러분은 주석에 자습서의 URL 을 추가할 수 있습니다. 1년 정도 지나고 이 프로젝트로 돌아왔을 때 자신에게 감사할 것입니다. 그에 대한 훌륭한 자습서가 있었음을 모호하게 기억할 수 있습니다. 그러나 어디에 있습니까?</p> + +<h3 id="Create_logical_sections_in_your_stylesheet">Create logical sections in your stylesheet</h3> + +<p>It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally apply unless you do something special with that element. You will typically have rules set up for:</p> + +<ul> + <li><code>body</code></li> + <li><code>p</code></li> + <li><code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>, <code>h5</code></li> + <li><code>ul</code> and <code>ol</code></li> + <li>The <code>table</code> properties</li> + <li>Links</li> +</ul> + +<p>In this section of the stylesheet we are providing default styling for the type on the site, setting up a default style for data tables and lists and so on.</p> + +<pre class="brush: css">/* || GENERAL STYLES */ + +body { ... } + +h1, h2, h3, h4 { ... } + +ul { ... } + +blockquote { ... } +</pre> + +<p>After this section we could define a few utility classes, for example a class that removes the default list style for lists we're going to display as flex items or in some other way. If you have a few things you know you will want to apply to lots of different elements, they can come in this section.</p> + +<pre class="brush: css">/* || UTILITIES */ + +.nobullets { + list-style: none; + margin: 0; + padding: 0; +} + +... + +</pre> + +<p>Then we can add everything that is used sitewide. That might be things like the basic page layout, the header, navigation styling, and so on.</p> + +<pre class="brush: css">/* || SITEWIDE */ + +.main-nav { ... } + +.logo { ... } +</pre> + +<p>Finally we will include CSS for specific things, broken down by the context, page or even component in which they are used.</p> + +<pre class="brush: css">/* || STORE PAGES */ + +.product-listing { ... } + +.product-box { ... } +</pre> + +<p>By ordering things in this way, we at least have an idea in which part of the stylesheet we will be looking for something that we want to change.</p> + +<h3 id="Avoid_overly-specific_selectors">Avoid overly-specific selectors</h3> + +<p>If you create very specific selectors you will often find that you need to duplicate chunks of your CSS to apply the same rules to another element. For example, you might have something like the below selector, which applies the rule to a <code><p></code> with a class of <code>box</code> inside an <code><article></code> with a class of <code>main</code>.</p> + +<pre class="brush: css">article.main p.box { + border: 1px solid #ccc; +}</pre> + +<p>If you then wanted to apply the same rules to something outside of <code>main</code>, or to something other than a <code><p></code>, you would have to add another selector to these rules or create a whole new ruleset. Instead, you could create a class called <code>box</code> and apply that anywhere.</p> + +<pre class="brush: css">.box { + border: 1px solid #ccc; +}</pre> + +<p>There will be times when making something more specific makes sense, however this will generally be an exception rather than usual practice.</p> + +<h3 id="Break_large_stylesheets_into_multiple_smaller_ones">Break large stylesheets into multiple smaller ones</h3> + +<p>In particular in cases where you have very different styles for distinct parts of the site, you might want to have a stylesheet that includes all the global rules and then smaller ones that include the specific rules needed for those sections. You can link to multiple stylesheets from one page, and the normal rules of the cascade apply, with rules in stylesheets linked later coming after rules in stylesheets linked earlier.</p> + +<p>For example, we might have an online store as part of the site, with a lot of CSS used only for styling the product listings and forms needed for the store. It would make sense to have those things in a different stylesheet, only linked to on store pages.</p> + +<p>This can make it easier to keep your CSS organised, and also means that if multiple people are working on the CSS you will have fewer situations where two people need to work on the same stylesheet at once, leading to conflicts in source control.</p> + +<h2 id="Other_tools_that_can_help">Other tools that can help</h2> + +<p>CSS itself doesn't have much in the way of in-built organisation, therefore you need to do the work to create consistency and rules around how you write CSS. The web community has also developed various tools and approaches that can help you to manage larger CSS projects. As they may be helpful for you to investigate, and you are likely to come across these things when working with other people, we've included a short guide to some of these.</p> + +<h3 id="CSS_methodologies">CSS methodologies</h3> + +<p>Instead of needing to come up with your own rules for writing CSS, you may benefit from adopting one of the approaches already designed by the community and tested across many projects. These methodologies are essentially CSS coding guides that take a very structured approach to writing and organising CSS. Typically they tend to result in more verbose use of CSS than you might have if you wrote and optimised every selector to a custom set of rules for that project.</p> + +<p>However, you do gain a lot of structure by adopting one and, as many of these systems are very widely used, other developers are more likely to understand the approach you are using and be able to write their CSS in the same way, rather than having to work out your own personal methodology from scratch.</p> + +<h4 id="OOCSS">OOCSS</h4> + +<p>Most of the approaches that you will encounter owe something to the concept of Object Oriented CSS (OOCSS), an approach made popular by <a href="https://github.com/stubbornella/oocss/wiki">the work of Nicole Sullivan</a>. The basic idea of OOCSS is to separate your CSS into reusable objects, which can be used anywhere you need on your site. The standard example of OOCSS is the pattern described as <a href="/en-US/docs/Web/CSS/Layout_cookbook/Media_objects">The Media Object</a>. This is a pattern with a fixed size image, video or other element on one side, and flexible content on the other. It's a pattern we see all over websites for comments, listings, and so on.</p> + +<p>If you are not taking an OOCSS approach you might create custom CSS for the different places this pattern is used, for example creating a class called <code>comment</code> with a bunch of rules for the component parts, then a class called <code>list-item</code> with almost the same rules as the <code>comment</code> class except for some tiny differences. The differences between these two components is that the list-item has a bottom border, and images in comments have a border whereas list-item images do not.</p> + +<pre class="brush: css">.comment { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.comment img { + border: 1px solid grey; +} + +.comment .content { + font-size: .8rem; +} + +.list-item { + display: grid; + grid-template-columns: 1fr 3fr; + border-bottom: 1px solid grey; +} + +.list-item .content { + font-size: .8rem; +}</pre> + +<p>In OOCSS, you would create one pattern called <code>media</code> that would have all of the common CSS for both patterns — a base class for things that are generally the shape of the media object. Then we'd add an additional class to deal with those tiny differences, thus extending that styling in specific ways.</p> + +<pre class="brush: css">.media { + display: grid; + grid-template-columns: 1fr 3fr; +} + +.media .content { + font-size: .8rem; +} + +.comment img { + border: 1px solid grey; +} + + .list-item { + border-bottom: 1px solid grey; +} </pre> + +<p>In your HTML the comment would need both the <code>media</code> and <code>comment</code> classes applied:</p> + +<pre class="brush: html"><div class="media comment"> + <img /> + <div class="content"></div> +</div> +</pre> + +<p>The list-item would have <code>media</code> and <code>list-item</code> applied:</p> + +<pre class="brush: html"><ul> + <li class="media list-item"> + <img /> + <div class="content"></div> + </li> +</ul></pre> + +<p>The work that Nicole Sullivan did in describing this approach and promoting it means that even people who are not strictly following an OOCSS approach today will generally be reusing CSS in this way — it has entered our understanding as a good way to approach things in general.</p> + +<h4 id="BEM">BEM</h4> + +<p>BEM stands for Block Element Modifier. In BEM a block is a standalone entity such as a button, menu, or logo. An element is something like a list item or a title that is tied to the block it is in. A modifier is a flag on a block or element that changes the styling or behavior. You will be able to recognise code that uses BEM due to the extensive use of dashes and underscores in the CSS classes. For example, look at the classes applied to this HTML from the page about <a href="http://getbem.com/naming/">BEM Naming conventions</a>:</p> + +<pre class="brush: html"><form class="form form--theme-xmas form--simple"> + <input class="form__input" type="text" /> + <input + class="form__submit form__submit--disabled" + type="submit" /> +</form></pre> + +<p>The additional classes are similar to those used in the OOCSS example, however they use the strict naming conventions of BEM.</p> + +<p>BEM is widely used in larger web projects and many people write their CSS in this way. It is likely that you will come across examples, even in tutorials, that use BEM syntax, without mentioning why the CSS is structured in such a way.</p> + +<p>To read more about the system read <a href="https://css-tricks.com/bem-101/">BEM 101</a> on CSS Tricks.</p> + +<h4 id="Other_common_systems">Other common systems</h4> + +<p>There are a large number of these systems in use. Other popular approaches include <a href="http://smacss.com/">Scalable and Modular Architecture for CSS (SMACSS)</a>, created by Jonathan Snook, <a href="https://itcss.io/">ITCSS</a> from Harry Roberts, and <a href="https://acss.io/">Atomic CSS (ACSS)</a>, originally created by Yahoo!. If you come across a project that uses one of these approaches then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style.</p> + +<p>The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects.</p> + +<h3 id="Build_systems_for_CSS">Build systems for CSS</h3> + +<p>Another way to organise CSS is to take advantage of some of the tooling that is available for front-end developers, which allows you to take a slightly more programmatic approach to writing CSS. There are a number of tools which we refer to as <em>pre-processors</em> and <em>post-processors</em>. A pre-processor runs over your raw files and turns them into a stylesheet, whereas a post-processor takes your finished stylesheet and does something to it — perhaps to optimize it in order that it will load faster.</p> + +<p>Using any of these tools will require that your development environment can run the scripts that do the pre and post-processing. Many code editors can do this for you, or you can install command line tools to help.</p> + +<p>The most popular pre-processor is <a href="https://sass-lang.com/">Sass</a>. This is not a Sass tutorial, so I will briefly explain a couple of the things that Sass can do, which are really helpful in terms of organisation, even if you don't use any of the other Sass features.</p> + +<h4 id="Defining_variables">Defining variables</h4> + +<p>CSS now has native <a href="/en-US/docs/Web/CSS/Using_CSS_custom_properties">custom properties</a>, making this feature increasingly less important, however one of the reasons you might use Sass is to be able to define all of the colors and fonts used in a project as settings, then use that variable around the project. This means that if you realise you have used the wrong shade of blue, you only need change it in one place.</p> + +<p>If we created a variable called <code>$base-color</code> as in the first line below, we could then use it through the stylesheet anywhere that required that color.</p> + +<pre class="brush: css"><code>$base-color: #c6538c; + +.alert { + border: 1px solid $base-color; +}</code></pre> + +<p>Once compiled to CSS, you would end up with the following CSS in the final stylesheet.</p> + +<pre class="brush: css"><code>.alert { + border: 1px solid #c6538c; +}</code></pre> + +<h4 id="Compiling_component_stylesheets">Compiling component stylesheets</h4> + +<p>I mentioned above that one way to organise CSS is to break down stylesheets into smaller stylesheets. When using Sass you can take this to another level and have lots of very small stylesheets — even going as far as having a separate stylesheet for each component. By using the include functionality in Sass these can then all be compiled together into one, or a small number of stylesheets to actually link into your website.</p> + +<p>You can see how one developer approaches the problem in <a href="https://www.lauraleeflores.com/blog/how-to-organize-your-css-files">this blog post</a>.</p> + +<div class="blockIndicator note"> +<p><strong>Note</strong>: A simple way to try out Sass is to use <a href="https://codepen.io">CodePen</a> — you can enable Sass for your CSS in the Settings for a Pen, and CodePen will then run the Sass parser for you, in order that you can see the resulting webpage with regular CSS applied. Sometimes you will find that CSS tutorials have used Sass rather than plain CSS in their CodePen demos, so it is handy to know a little bit about it.</p> +</div> + +<h4 id="Post-processing_for_optimization">Post-processing for optimization</h4> + +<p>If you are concerned about adding size to your stylesheets by adding a lot of additional comments and whitespace for example, then a post-processing step could be to optimize the CSS by stripping out anything unneccessary in the production version. An example of a post-processor solution for doing this would be <a href="https://cssnano.co/">cssnano</a>.</p> + +<h2 id="Wrapping_up">Wrapping up</h2> + +<p>This is the final part of our Learning CSS Guide, and as you can see there are many ways in which your exploration of CSS can continue from this point.</p> + +<p>To learn more about layout in CSS, see the <a href="/en-US/docs/Learn/CSS/CSS_layout">Learn CSS Layout</a> section.</p> + +<p>You should also now have the skills to explore the rest of the <a href="/en-US/docs/Web/CSS">MDN CSS</a> material. You can look up properties and values, explore our <a href="/en-US/docs/Web/CSS/Layout_cookbook">CSS Cookbook</a> for patterns to use, and read more in some of the specific guides such as our <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Guide to CSS Grid Layout</a>.</p> + +<p>{{PreviousMenu("Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/overflowing_content/index.html b/files/ko/learn/css/building_blocks/overflowing_content/index.html new file mode 100644 index 0000000000..2cb71a8e6a --- /dev/null +++ b/files/ko/learn/css/building_blocks/overflowing_content/index.html @@ -0,0 +1,119 @@ +--- +title: 콘텐츠 overflow +slug: Learn/CSS/Building_blocks/Overflowing_content +translation_of: Learn/CSS/Building_blocks/Overflowing_content +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> + +<p>이번 수업에서는 CSS 의 또 다른 중요한 개념인 — <strong>overflow</strong> 를 살펴봅니다. Overflow 는 박스 안에 편안하게 담기에는 너무 많은 내용이 있을 때 발생합니다. 이 안내서에서는 내용과 관리 방법에 대해 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>overflow 및 이를 관리하는 방법 이해하기.</td> + </tr> + </tbody> +</table> + +<h2 id="overflow_란_무엇인가">overflow 란 무엇인가?</h2> + +<p>우리는 이미 CSS 의 모든 것이 박스라는 것을 알고 있으며, {{cssxref("width")}} 및 {{cssxref("height")}} (또는 {{cssxref("inline-size")}} 및 {{cssxref("block-size")}}) 의 값을 제공하여 박스의 크기를 제한할 수 있음을 알고 있습니다. Overflow 는 박스에 내용이 너무 많을 때 발생하므로, 박스 안에 들어가지 않습니다. CSS 는 이 overflow 를 관리할 수 있는 다양한 도구를 제공하며, 이 초기 단계에서 이해하는 데 유용한 개념이기도 합니다. CSS 를 작성할 때, 특히 CSS 레이아웃에 더 깊이 들어가면 overflow 상황이 자주 발생합니다.</p> + +<h2 id="CSS_는_데이터_손실_을_피하려고_합니다">CSS 는 "데이터 손실" 을 피하려고 합니다</h2> + +<p>overflow 가 발생했을 때, CSS 가 기본적으로 어떻게 동작하는지 보여주는 두 가지 예를 살펴보도록 하겠습니다.</p> + +<p>찻 번째는 <code>height</code> 를 지정하여 블록 크기가 제한된 박스입니다. 그런 다음 이 박스에 필요한 공간보다 많은 콘텐츠를 추가했습니다. 내용물이 박스에 넘쳐서 박스 아래의 단락 위에 다소 혼란스럽게 놓여 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> + +<p>두 번째는 인라인 크기로 제한된 박스의 단어입니다. 박스가 해당 단어에 맞지 않도록 너무 작게 만들어져 박스 밖으로 나옵니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> + +<p>왜 CSS 가 기본적으로 내용이 혼란스러워지는 어수선한 접근 방식을 취했는지 궁금할 것입니다. 추가 콘텐츠를 숨기거나 박스가 커지는 이유는 무엇입니까?</p> + +<p>가능하면 CSS 는 내용을 숨기지 않습니다; 그렇게 하면 데이터가 손실될 수 있으며, 이는 일반적으로 문제입니다. CSS 용어로, 이는 일부 콘텐츠가 사라짐을 의미합니다. 콘텐츠 손실의 문제점은 손실 되었음을 알 수 없다는 것입니다. 방문자가 사라진 것을 눈치채지 못할 수도 있습니다. 그것이 사라지는 양식의 제출 버튼이고 아무도 양식을 완성할 수 없다면 큰 문제입니다! 따라서 CSS 는 눈에 띄게 overflow 되는 경향이 있습니다. 혼란스러워 보이거나, 최악의 경우 사이트 방문자가 일부 콘텐츠가 겹치므로 수정해야함을 알려줍니다.</p> + +<p><code>width</code> 또는<code>height</code> 가 있는 박스를 제한한 경우, CSS 는 사용자가 수행중인 작업을 알고 있으며, overflow 가능성을 관리한다고 가정합니다. 일반적으로 사이트를 디자인할 때 예상보다 많은 텍스트가 있거나 텍스트가 더 클 수 있으므로 — 예를 들어 사용자가 글꼴 크기를 늘린 경우 박스에 텍스트를 넣을 때 블록 크기를 제한하는 것은 문제가 됩니다.</p> + +<p>다음 수업에서는 overflow 가 덜 발생하는 크기를 제어하는 다양한 방법을 살펴보겠습니다. 그러나 고정 크기가 필요한 경우, overflow 동작을 제어할 수도 있습니다. 계속 읽어 봅시다!</p> + +<h2 id="overflow_속성">overflow 속성</h2> + +<p>{{cssxref("overflow")}} 속성은 요소의 overflow 를 제어하고 브라우저가 원하는 방식으로 동작하도록 하는 방법입니다. overflow 의 기본값은 <code>visible</code> 이므로, overflows 가 발생하면 기본적으로 콘텐츠를 볼 수 있습니다.</p> + +<p>콘텐츠가 넘칠 때 내용을 자르려면 박스에 <code>overflow: hidden</code> 을 설정할 수 있습니다. 이렇게 하면 — overflow 를 숨길 수 있습니다. 이로 인해 모든 것이 사라질 수 있으므로 콘텐츠를 숨기는 것이 문제를 일으키지 않을 경우에만 해야합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> + +<p>아마도 내용이 넘칠 때 스크롤 막대를 추가하고 싶습니까? <code>overflow: scroll</code> 를 사용하면 브라우저에 항상 스크롤 막대가 표시됩니다 — 콘텐츠가 부족하여 overflow 할 수 없는 경우에도 마찬가지입니다. 내용에 따라 스크롤 막대가 나타나거나 사라지는 것을 방지하기 때문에 원하는 경우가 있습니다.</p> + +<p><strong>아래 박스에서 일부 내용을 제거하면 스크롤 할 내용이 없어도 스크롤 막대가 여전히 남아 있습니다 (또는 스크롤 막대만).</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll.html", '100%', 600)}}</p> + +<p>위의 예제에서는 <code>y</code> 축만 스크롤하면 되지만, 두 축에는 스크롤바가 나타납니다. 대신 {{cssxref("overflow-y")}} 속성을 사용하여, <code>overflow-y: scroll</code> 로 설정하면 <code>y</code> 축에서만 스크롤하도록 할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-y.html", '100%', 600)}}</p> + +<p>{{cssxref("overflow-x")}} 를 사용하여 x 축을 스크롤할 수도 있지만, 긴 단어를 처리하는 데 권장되는 방법은 아닙니다! 작은 박스에서 긴 단어를 처리해야 하는 경우 {{cssxref("word-break")}} 또는 {{cssxref("overflow-wrap")}} 속성을 볼 수 있습니다. 또한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 항목 크기 조정</a> 에서 설명하는 일부 방법을 사용하면 다양한 양의 콘텐츠에 더 잘 맞는 박스를 만들 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/scroll-x.html", '100%', 500)}}</p> + +<p><code>scroll</code> 과 마찬가지로 스크롤 막대를 유발할 내용이 충분한 지 여부에 따라 스크롤 크기에 스크롤 막대가 나타납니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code>overflow</code> 속성을 사용하여 두 개의 값을 전달하여 x 와 y 스크롤을 지정할 수 있습니다. 두 개의 키워드가 지정되면, 첫 번째 키워드는 <code>overflow-x</code> 에 적용되고 두 번째 키워드는 <code>overflow-y</code> 에 적용됩니다. 그렇지 않으면 <code>overflow-x</code> 및 <code>overflow-y</code> 가 모두 같은 값으로 설정됩니다. 예를 들어, <code>overflow: scroll hidden</code> 은 <code>overflow-x</code> 를 <code>scroll</code> 로, <code>overflow-y</code> 를 <code>hidden</code> 으로 설정합니다.</p> +</div> + +<p>박스에 넣을 수 있는 것보다 많은 내용이 있는 경우 스크롤 막대만 표시하려면, <code>overflow: auto</code> 를 사용하십시오. 이 경우 스크롤 막대를 표시할 지 여부를 결정하는 것은 브라우저에게 맡겨져 있습니다. 데스크톱 브라우저는 일반적으로 overflow 를 유발할 수 있는 충분한 콘텐츠가 있는 경우에만 그렇게 합니다.</p> + +<p><strong>아래 예에서 박스에 들어갈 때까지 일부 내용을 제거하면, 스크롤 막대가 사라지는것을 볼 수 있습니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/overflow/auto.html", '100%', 600)}}</p> + +<h2 id="Overflow_는_블록_서식_Context_를_설정합니다">Overflow 는 블록 서식 Context 를 설정합니다</h2> + +<p>CSS 에는 <strong>Block Formatting Context</strong> (BFC) 의 개념이 있습니다. 이것은 지금 너무 걱정할 필요는 없지만, <code>scroll</code> 또는 <code>auto</code> 와 같은 overflow 값을 사용할 때 BFC 를 생성한다는 것을 아는 것이 유용합니다. 결과적으로 <code>overflow</code> 값을 변경한 박스의 내용이 자체의 미니 레이아웃이 됩니다. container 외부의 물건은 container 에 찌를 수 없으며, 박스에서 주변 레이아웃으로 찌를 수는 없습니다. 이느 일관된 스크롤 환경을 만들기 위해, 박스의 모든 내용을 포함해야 하고 페이지의 다른 항목과 겹치지 않아야 하므로 스크롤 동작을 활성화하기 위한 것입니다.</p> + +<h2 id="웹_디자인에서_원치_않는_overflow">웹 디자인에서 원치 않는 overflow</h2> + +<p>최신 레이아웃 방법 (<a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 강의에 설명되어 있음) 은 overflow 를 매우 잘 관리합니다. 우리가 웹에 얼마나 많은 콘텐츠를 가지고 있는지 예측할 수 없다는 사실에 대처하도록 설계되었습니다. 그러나 과거에는 개발자들이 종종 고정된 높이를 사용하여 서로 관계가 없는 박스의 하단을 정렬하려고 했습니다. 이것은 깨지기 쉬웠으며, legacy 응용 프로그램에서 때때로 내용이 페이지의 다른 내용과 겹치는 박스가 나타날 수 있습니다. 이러한 현상이 나타나면 overflow 가 발생한다는 것을 알수 있습니다. 박스 크기 고정에 의존하지 않도록 레이아웃을 리팩터링 하는것이 이상적입니다.</p> + +<p>사이트를 개발할 때는 항상 overflow 문제를 염두에 두어야 합니다. 많은 양의 콘텐츠로 디자인을 테스트하고 텍스트의 글꼴 크기를 늘리면 CSS 가 강력한 방식으로 대처할 수 있는지 확인해야 합니다. 내용을 숨기거나 스크롤 막대를 추가하기 위해 overflow 값을 변경하는 것은 스크롤 박스를 원할 때와 같은 몇 가지 특별한 경우에만 예약할 수 있습니다.</p> + +<h2 id="요약">요약</h2> + +<p>이 짧은 수업은 overflow 개념을 소개했습니다; 이제 CSS 가 넘쳐나는 내용을 보이지 않게 만들려고 하지만 데이터가 손실될 수 있음을 이해합니다. overflow 가능성을 관리할 수 있으며 실수로 overflow 문제가 발생하지 않도록 작업을 테스트해야 합니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html new file mode 100644 index 0000000000..321d65d726 --- /dev/null +++ b/files/ko/learn/css/building_blocks/sizing_items_in_css/index.html @@ -0,0 +1,131 @@ +--- +title: CSS 에서 항목 크기 조정 +slug: Learn/CSS/Building_blocks/Sizing_items_in_CSS +translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> + +<p>지금까지 다양한 수업에서는 CSS 를 사용하여 웹 페이지의 항목 크기를 조정하는 여러가지 방법을 살펴 보았습니다. 디자인의 다양한 기능이 얼마나 큰지 이해하는 것이 중요하며, 이 수업에서는 CSS 를 통해 요소의 크기를 결정하는 다양한 방법을 요약하고 크기 조정과 관련하여 향후 도움이 될 몇 가지 용어를 정의합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td> + <p>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</p> + </td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 로 크기를 조정할 수 있는 다양한 방법 이해하기.</td> + </tr> + </tbody> +</table> + +<h2 id="사물의_자연적_또는_본질적인_크기">사물의 자연적 또는 본질적인 크기</h2> + +<p>HTML 요소는 CSS 의 영향을 받기 전에 설정한 자연스러운 크기입니다. 간단한 예는 이미지입니다. 이미지는 페이지에 포함된 이미지 파일에 정의된 너비와 높이를 갖습니다. 이 크기는 이미지 자체에서 나오는 — <strong>고유 크기 (intrinsic size)</strong> 로 설명됩니다.</p> + +<p>페이지에 이미지를 배치하고 <code><img></code> 태그 또는 CSS 의 속성을 사용하여 높이와 너비를 변경하지 않으면, 고유 크기를 사용하여 이미지가 표시됩니다. 파일의 범위를 볼 수 있도록 아래 예제의 이미지에 테두리를 지정했습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> + +<p>그러나 빈 {{htmlelement("div")}} 에는, 자체 크기가 없습니다. 내용이 없는 HTML 에 {{htmlelement("div")}} 를 추가한 다음 이미지와 마찬가지로 테두리를 지정하면, 페이지에 한 라인이 표시됩니다. 이것은 요소의 접힌 (collapsed) 테두리입니다 — 열려야 할 내용이 없습니다. 아래 예제에서, 이 테두리는 container 의 너비까지 확장됩니다. 이는 블록 레벨 요소이기 때문에 친숙해지기 시작해야 합니다. 내용이 없기 때문에 높이 (또는 블록의 크기) 가 없습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> + +<p>위의 예에서, 빈 요소 안에 텍스트를 추가하십시오. 요소의 높이가 내용에 의해 정의되므로 테두리에 해당 텍스트가 포함됩니다. 따라서 블록 차원에서 이 <code><div></code> 의 크기는 내용의 크기에서 비롯됩니다. 다시 말하지만, 이것은 요소의 고유 크기입니다 — 크기는 내용에 의해 정의됩니다.</p> + +<h2 id="특정_크기_설정">특정 크기 설정</h2> + +<p>물론 디자인의 요소에 특정 크기를 줄 수 있습니다. 요소에 크기가 주어지면 (그리고 그 내용이 그 크기에 맞아야 함) 우리는 이것을 <strong>외적인 크기 (extrinsic size)</strong> 로 지칭합니다. 위의 예에서 <code><div></code> 를 가져와서 — 구체적인 {{cssxref("width")}} 및 {{cssxref("height")}} 값을 지정할 수 있으며, 이제 어떤 내용이 들어가든 해당 크기를 갖습니다. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">overflow 에 대한 이전 수업</a> 에서 발견한 것처럼 요소에 맞는 공간보다 많은 콘텐츠가 있으면 설정된 높이로 인해 콘텐츠가 overflow 될 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> + +<p>이 overflow 문제로 인해, 요소의 높이를 길이 또는 백분율로 고정하는 것은 웹에서 매우 신중하게 수행해야 하는 작업입니다.</p> + +<h3 id="백분율_사용하기">백분율 사용하기</h3> + +<p>여러 방법으로 백분율은 길이 단위처럼 작동하며, <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">값과 단위에 대한 수업에서 논의한 것처럼</a>, 종종 길이와 상호 교환적으로 사용될 수 있습니다. 백분율을 사용하는 경우 백분율이 <strong><em>얼마인지</em></strong> 알고 있어야 합니다. 다른 container 안에 있는 박스의 경우 자식 박스에 백분율 너비를 지정하면, 부모 container 너비의 백분율이 됩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> + +<p>백분율을 포함하는 블록의 크기에 대해 결정되기 때문입니다. 백분율이 적용되지 않으면 <code><div></code> 는 블록 레벨 요소이므로 사용가능한 공간의 100% 를 차지합니다. 너비를 백분율로 지정하면, 일반적으로 채워지는 공간의 백분율이 됩니다.</p> + +<h3 id="백분율_마진_및_패딩">백분율 마진 및 패딩</h3> + +<p><code>margins</code> 과 <code>padding</code> 을 백분율로 설정하면 이상한 동작이 나타날 수 있습니다. 아래 예제에는 박스가 있습니다. 내부 박스에 {{cssxref("margin")}} 을 10% 로, {{cssxref("padding")}} 을 10% 로 지정했습니다. 박스 상단과 하단의 패딩과 마진은 왼쪽과 오른쪽의 마진과 크기가 같습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> + +<p>예를 들어 상단 및 하단 마진 백분율이 요소 높이의 백분율이고, 왼쪽 및 오른쪽 마진 백분율이 요소 너비의 백분율일 것으로 예상할 수 있습니다. 그러나, 이것은 사실이 아닙니다!</p> + +<p>백분율로 마진 및 패딩을 사용하는 경우, 값은 <strong>인라인 크기 (inline size) </strong>에서 계산되므로 — horizontal 언어로 작업할 때의 너비입니다. 이 예에서 모든 마진과 패딩은 너비의 10% 입니다. 즉, 박스 전체에 같은 크기의 마진과 패딩을 둘 수 있습니다. 이 방법으로 백분율을 사용하면 기억할 가치가 있습니다.</p> + +<h2 id="min-_및_max-_크기">min- 및 max- 크기</h2> + +<p>고정된 크기를 주는 것 외에도, CSS 에 요소에 최소 또는 최대 크기를 제공하도록 요청할 수 있습니다. 가변적인 양의 내용을 포함할 수 있는 박스가 있고, <strong><em>항상</em></strong> 특정 높이 이상이 되도록 하려면, {{cssxref("min-height")}} 속성을 설정할 수 있습니다. 박스는 항상 이 높이 이상이지만, 박스의 최소 높이에 대한 공간보다 더 많은 내용이 있으면 키가 더 커집니다.</p> + +<p>아래 예에서 정의된 높이가 150 픽셀인 두 개의 박스를 볼 수 있습니다. 왼쪽의 박스는 키가 150 픽셀입니다; 오른쪽의 상자에는 더 많은 공간이 필요한 내용이 있으므로, 최소 150 픽셀 이상으로 키가 커졌습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> + +<p>이는 overflow 를 피하면서 가변적인 양의 콘텐츠를 처리할 때 매우 유용합니다.</p> + +<p>{{cssxref("max-width")}} 의 일반적인 용도는 이미지를 원래 너비로 표시할 공간이 충분하지 않으면 이미지의 크기를 줄이면서, 해당 너비보다 크게되지 않도록 하는것입니다.</p> + +<p>예를 들어, 이미지에서 <code>width: 100%</code> 를 설정하고 이미지의 고유 (intrinsic) 너비가 container 보다 작으면, 이미지가 강제로 늘어나고 커져 픽셀화되어 나타납니다. 고유 너비가 container 보다 크면 overflow 됩니다. 두 경우 모두 여러분이 원하는 것이 아닙니다.</p> + +<p><code>max-width: 100%</code> 를 대신 사용하면, 이미지가 고유 크기보다 작아질 수 있지만, 크기의 100% 에서 멈춥니다.</p> + +<p>아래 예에서는 동일한 이미지를 두 번 사용했습니다. 첫 번째 이미지에는 <code>width: 100%</code> 로 주어졌으며, 그보다 큰 container 에 있으므로 container 너비로 늘어납니다. 두 번째 이미지에는 <code>max-width: 100%</code> 로 설정되어 있으므로 container 를 채우기 위해 늘어나지 않습니다. 세 번째 박스에는 동일한 이미지가 다시 포함되며, <code>max-width: 100%</code> 로 설정됩니다; 이 경우 박스에 맞게 크기가 어떻게 축소되었는지 확인할 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> + +<p>이 기술은 이미지를 반응형으로 만드는 데 사용되므로 더 작은 장치에서 볼 때 이미지가 적절하게 축소됩니다. 그러나 이 기술을 사용하여 실제로 큰 이미지를 로드한 다음 브라우저에서 축소하면 안됩니다. 이미지는 디자인에 표시되는 가장 큰 크기보다 커야합니다. 지나치게 큰 이미지를 다운로드하면, 사이트 속도가 느려질 수 있으며, 데이터 요금제인 경우 더 많은 비용이 발생할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지 기술</a> 에 대해 자세히 알아보십시오.</p> +</div> + +<h2 id="Viewport_단위">Viewport 단위</h2> + +<p>Viewport — 사이트를 보는 데 사용하는 브라우저에서 페이지의 가시 영역 — 또한 크기가 있습니다. CSS 에는 viewport 의 크기와 관련된 단위가 있습니다 — viewport 너비의 경우 <code>vw</code> 단위, viewport 높이의 경우 <code>vh</code>. 이 단위를 사용하면 사용자의 viewport 에 상대적인 크기를 지정할 수 있습니다.</p> + +<p><code>1vh</code> 는 viewport 높이의 1% 와 같고, <code>1vw</code> 는 viewport 너비의 1% 와 같습니다. 이 단위를 사용하여 박스 크기 뿐만 아니라, 텍스트도 조정할 수 있습니다. 아래 예에서는 20vh 및 20vw 크기의 박스가 있습니다. 박스에는 문자 <code>A</code> 가 포함되어 있으며 {{cssxref("font-size")}} 에 10vh 가 지정되었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> + +<p><strong> <code>vh</code> 및 <code>vw</code> 값을 변경하면 박스 또는 글꼴의 크기가 변경됩니다; viewport 크기를 변경하면 viewport 를 기준으로 크기가 조정되므로 크기도 변경됩니다. viewport 크기를 변경할 때 예제 변경 사항을 보려면 크기를 조정할 수 있는 새 브라우저 창에 예제를 로드해야 합니다 (위에 표시된 예제가 포함된 <code><iframe></code> 이 viewport 임). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">예제를 열고</a>, 브라우저 창의 크기를 조정한 후 박스와 텍스트의 크기에 어떤 영향이 있는지 관찰하십시오.</strong></p> + +<p>viewport 에 따라 크기를 조정하면 디자인에 유용할 수 있습니다. 예를 들어, 전체 콘텐츠 페이지 섹셩을 콘텐츠의 나머지 부분보다 먼저 표시하려면, 페이지의 해당 부분을 100vh 높이로 설정하면 나머지 콘텐츠가 viewport 아래로 밀려서 문서가 스크롤 된 후에만 표시됩니다.</p> + +<h2 id="요약">요약</h2> + +<p>이번 수업에서는 웹에서 크기를 조정할 때 발생할 수 있는 몇 가지 주요 문제에 대해 설명합니다. <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 으로 이동할 때, 크기 조정은 다양한 레이아웃 방법을 익히는 데 매우 중요하므로 계속 진행하기 전에 여기에서 개념을 이해하는 것이 좋습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/styling_tables/index.html b/files/ko/learn/css/building_blocks/styling_tables/index.html new file mode 100644 index 0000000000..fb497ebfe2 --- /dev/null +++ b/files/ko/learn/css/building_blocks/styling_tables/index.html @@ -0,0 +1,308 @@ +--- +title: 표 스타일링 +slug: Learn/CSS/Building_blocks/Styling_tables +translation_of: Learn/CSS/Building_blocks/Styling_tables +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary"></p> + +<p class="summary">HTML 표 스타일링은 세계에서 가장 매력적인 일이 아니지만, 때로는 우리 모두가 해야할 일입니다. 이 기사에서는 특정 표 스타일링 기술을 강조 표시하여 HTML 표를 보기좋게 만드는 방법에 대한 안내서를 제공합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습), <a href="/en-US/docs/Learn/HTML/Tables">HTML 표</a> 에 대한 지식 및 CSS 작동 방식에 대한 이해 (CSS 첫 번째 단계 학습.)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>HTML 표를 효과적으로 스타일링하는 방법 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="전형적인_HTML_표">전형적인 HTML 표</h2> + +<p>전형적인 HTML 표를 살펴 봅시다. 글쎄요, 일반적인 표의 예들은 — 신발, 날씨 또는 직원들에 관한 것입니다; 우리는 영국의 유명한 펑크 밴드에 관한것을 만들어서 더 흥미롭게 만들기로 결정했습니다. 코드는 다음과 같습니다:</p> + +<pre class="brush: html"><table> + <caption>A summary of the UK's most famous punk bands</caption> + <thead> + <tr> + <th scope="col">Band</th> + <th scope="col">Year formed</th> + <th scope="col">No. of Albums</th> + <th scope="col">Most famous song</th> + </tr> + </thead> + <tbody> + <tr> + <th scope="row">Buzzcocks</th> + <td>1976</td> + <td>9</td> + <td>Ever fallen in love (with someone you shouldn't've)</td> + </tr> + <tr> + <th scope="row">The Clash</th> + <td>1976</td> + <td>6</td> + <td>London Calling</td> + </tr> + + ... some rows removed for brevity + + <tr> + <th scope="row">The Stranglers</th> + <td>1974</td> + <td>17</td> + <td>No More Heroes</td> + </tr> + </tbody> + <tfoot> + <tr> + <th scope="row" colspan="2">Total albums</th> + <td colspan="2">77</td> + </tr> + </tfoot> +</table></pre> + +<p>{{htmlattrxref("scope","th")}}, {{htmlelement("caption")}}, {{htmlelement("thead")}}, {{htmlelement("tbody")}} 등의 기능 덕분에 표가 잘 표시되고 쉽게 스타일링되며 액세스할 수 있습니다. 불행히도 화면에 렌더링할 때는 좋지 않습니다 (<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-unstyled.html">punk-bands-unstyled.html</a> 에서 라이브 참조):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13064/table-unstyled.png" style="display: block; margin: 0 auto;"></p> + +<p>기본 브라우저 스타일만 사용하면, 비좁고 읽기 어려우며 지루해 보입니다. 이 문제를 해결하려면 CSS 를 사용해야 합니다.</p> + +<h2 id="우리의_표_스타일링">우리의 표 스타일링</h2> + +<p>표 예제를 함께 스타일링 해 봅시다.</p> + +<ol> + <li>시작하려면, <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/punk-bands-unstyled.html">sample markup</a> 의 로컬 사본을 만들고 두 이미지 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/noise.png">노이즈</a> 및 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/styling-tables/leopardskin.jpg">표범가죽</a>) 를 모두 다운로드한 다음, 세 개의 결과 파일을 로컬 컴퓨터의 작업 디렉토리에 넣습니다.</li> + <li>다음으로, <code>style.css</code> 라는 새 파일을 만들고 다른 파일과 같은 디렉토리에 저장하십시오.</li> + <li>{{htmlelement("head")}} 안에 다음 HTML 행을 배치하여 CSS 를 HTML 에 연결하십시오: + <pre class="brush: html"><link href="style.css" rel="stylesheet" type="text/css"></pre> + </li> +</ol> + +<h3 id="간격_및_레이아웃">간격 및 레이아웃</h3> + +<p>가장 먼저 해야할 일은 간격/레이아웃을 정렬하는 것입니다 — 기본 표 스타일은 너무 비좁습니다! 이렇게 하려면, <code>style.css</code> 파일에 다음 CSS 를 추가하십시오:</p> + +<pre class="brush: css">/* 간격 */ + +table { + table-layout: fixed; + width: 100%; + border-collapse: collapse; + border: 3px solid purple; +} + +thead th:nth-child(1) { + width: 30%; +} + +thead th:nth-child(2) { + width: 20%; +} + +thead th:nth-child(3) { + width: 15%; +} + +thead th:nth-child(4) { + width: 35%; +} + +th, td { + padding: 20px; +}</pre> + +<p>가장 중요한 부분은 다음과 같습니다:</p> + +<ul> + <li><code>fixed</code> 의 {{cssxref("table-layout")}} 값은 일반적으로 표가 기본적으로 좀 더 예측 가능하게 작동하므로 표에 설정하는 것이 좋습니다. 일반적으로, 표의 열은 내용의 양에 따라 크기가 정해지는 경향이 있으며, 그 결과 이상한 결과가 발생합니다. <code>table-layout: fixed</code> 를 사용하면 제목의 너비에 따라 열의 크기를 지정한 다음 내용을 적절하게 처리할 수 있습니다. 이것이 우리가 <code>thead th:nth-child(<em>n</em>)</code> ({{cssxref(":nth-child")}}) 선택자 ("{{htmlelement("thead")}} 요소 내에서 {{htmlelement("th")}} 요소인 <em>n번째</em> 자식 요소{{htmlelement("thead")}} 를 순서대로 선택합니다") 요소를 설정하고 백분율 너비를 설정했습니다. 전체 열 너비는 제목 너비를 따르므로, 표 열의 크기를 정할 수 있습니다. Chris Coyier 는 이 기술에 대해 <a href="https://css-tricks.com/fixing-tables-long-strings/">고정 표 레이아웃</a> 에서 자세히 설명합니다.<br> + <br> + 이를 {{cssxref("width")}} 와 100% 결합했습니다. 즉, 표에 넣은 container 를 표에 채우고 반응성이 뛰어납니다 (아직 더 많은 작업이 필요하지만 좁은 화면 너비에서 잘 보임).</li> + <li><code>collapse</code> 의 {{cssxref("border-collapse")}} 값은 모든 표 스타일 작업에 대한 표준 모범 사례입니다. 기본적으로, 표 요소에 테두리를 설정하면, 아래 이미지와 같이 테두리 사이에 간격이 있습니다: <img alt="" src="https://mdn.mozillademos.org/files/13068/no-border-collapse.png" style="display: block; margin: 0 auto;">이것은 매우 멋지게 보이지 않습니다 (원하는 모양일 수 있는지, 누가 알겠습니까?) <code>border-collapse: collapse;</code> 로 설정하면 테두리가 하나로 축소되어 훨씬 좋아 보입니다: <img alt="" src="https://mdn.mozillademos.org/files/13066/border-collapse.png" style="display: block; margin: 0 auto;"></li> + <li>우리는 전체 표 주위에 {{cssxref("border")}} 를 넣었습니다. 나중에 표 머리글과 바닥글에 테두리를 씌울 것입니다 — 표 바깥쪽에 테두리가 없고 틈새가 생기면 정말 이상하게 보입니다.</li> + <li>{{htmlelement("th")}} 및 {{htmlelement("td")}} 요소에 {{cssxref("padding")}} 을 설정했습니다 — 이렇게 하면 데이터 항목에 숨을 공간이 생깁니다. 표를 훨씬 읽기 쉽게 보이게합니다.</li> +</ul> + +<p>이 시점에서, 우리 표는 이미 훨씬 좋아보입니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13070/table-with-spacing.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="간단한_typography">간단한 typography</h3> + +<p>이제 텍스트를 약간 정리해 보겠습니다.</p> + +<p>우선, <a href="https://www.google.com/fonts">Google Fonts</a> 에서 펑크 밴드 관련 표에 적합한 글꼴을 찾았습니다. 원하는 경우 거기에 가서 다른 것을 찾을 수 있습니다. 제공된 {{htmlelement("link")}} 요소 및 custom {{cssxref("font-family")}} 선언을 Google Fonts 에서 제공하는 선언으로 바꾸면 됩니다.</p> + +<p>먼저, 다음 {{htmlelement("link")}} 요소를 기존 <code><link></code> 요소 바로 위의 HTML head 에 추가하십시오:</p> + +<pre class="brush: html"><link href='https://fonts.googleapis.com/css?family=Rock+Salt' rel='stylesheet' type='text/css'></pre> + +<p>이제 이전 CSS 아래의 <code>style.css</code> 파일에, 다음 CSS 를 추가하십시오:</p> + +<pre class="brush: css">/* typography */ + +html { + font-family: 'helvetica neue', helvetica, arial, sans-serif; +} + +thead th, tfoot th { + font-family: 'Rock Salt', cursive; +} + +th { + letter-spacing: 2px; +} + +td { + letter-spacing: 1px; +} + +tbody td { + text-align: center; +} + +tfoot th { + text-align: right; +}</pre> + +<p>여기에서는 표에 특별한 것은 없습니다. 우리는 일반적으로 쉽게 읽을 수 있도록 글꼴 스타일을 조정합니다:</p> + +<ul> + <li>전역 sans-serif 글꼴 스택을 설정했습니다; 이것은 순전히 문체 선택입니다. 또한 {{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 요소의 제목에 맞춤 글꼴을 설정하여 멋지고 펑키한 모양을 만들었습니다.</li> + <li>가독성을 높이기 위해 제목과 셀에 {{cssxref("letter-spacing")}} 을 설정했습니다. 다시 말하지만, 주로 스타일 선택입니다.</li> + <li>{{htmlelement("tbody")}} 내부의 표 셀에서 텍스트를 가운데 정렬하여 제목과 일치하도록 했습니다. 기본적으로, 셀에는 {{cssxref("text-align")}} 에 <code>left</code> 값이 제공되고, 머리글에는 <code>center</code> 값이 제공되지만 둘 다에 대해 정렬을 동일하게 설정하는것이 좋습니다. 제목 글꼴의 기본 굵은체는 모양을 구별하기에 충분합니다.</li> + <li>데이터와 시작적으로 더 잘 연결되도록 {{htmlelement("tfoot")}} 내부에서 제목을 오른쪽 정렬했습니다.</li> +</ul> + +<p>결과는 조금 깔끔해 보입니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13072/table-with-typography.png" style="display: block; margin: 0 auto;"></p> + +<h3 id="그래픽_과_색상">그래픽 과 색상</h3> + +<p>이제 그래픽과 색상으로 넘어가겠습니다! 표에는 punk and attitude 가 가득하기 때문에, 밝은 인상적인 스타일링을 제공해야합니다. 걱정하지 마십시오. 표를 크게 만들 필요는 없습니다 — 더 미묘하고 세련된 것을 선택할 수 있습니다.</p> + +<p>아래에서 다시 CSS 를 <code>style.css</code> 파일에 추가하고, 다시 시작하십시오:</p> + +<pre class="brush: css">thead, tfoot { + background: url(leopardskin.jpg); + color: white; + text-shadow: 1px 1px 1px black; +} + +thead th, tfoot th, tfoot td { + background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5)); + border: 3px solid purple; +} +</pre> + +<p>다시 말하지만, 여기에는 표에만 해당되는 것이 없지만, 몇 가지 주목할 가치가 있습니다.</p> + +<p>{{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 에 {{cssxref("background-image")}} 를 추가하고, 머리글과 바닥글에 있는 모든 텍스트의 {{cssxref("color")}} 를 흰색으로 (텍스트에 그림자 추가) 변경하여 읽기 쉽게 했습니다. 텍스트가 배경과 잘 대비되도록 해야합니다. 그래야 잘 읽을 수 있습니다.</p> + +<p>또한 머리글과 바닥글 내부의 {{htmlelement("th")}} 및 {{htmlelement("td")}} 요소에 선형 그라데이션을 추가하여 약간의 질감을 개선하오, 밝은 보라색 테두리를 부여했습니다. 중첩된 요소를 여러 개의 중첩된 요소를 사용하여 스타일을 서로 겹칠 수 있는 것이 유용합니다. 예, 여러 배경 이미지를 사용하여 {{htmlelement("thead")}} 및 {{htmlelement("tfoot")}} 요소에 배경 이미지와 선형 그라데이션을 모두 넣을 수는 있지만, 별도로 결정했습니다. 여러 배경 이미지 또는 선형 그라데이션을 지원하지 않는 구형 브라우저의 이점을 위해서입니다.</p> + +<h4 id="얼룩말_줄무늬_Zebra_striping">얼룩말 줄무늬 (Zebra striping)</h4> + +<p>우리는 표의 다른 데이터 행을 더 쉽게 구문 분석하고 읽을 수 있도록 번갈아 가며 <strong>zebra stripes </strong>를 구현하는 방법을 보여주기 위해 별도의 섹션을 제공하고자 했습니다. <code>style.css</code> 파일의 맨 아래에 다름 CSS 를 추가하십시오:</p> + +<pre class="brush: css">tbody tr:nth-child(odd) { + background-color: #ff33cc; +} + +tbody tr:nth-child(even) { + background-color: #e495e4; +} + +tbody tr { + background-image: url(noise.png); +} + +table { + background-color: #ff33cc; +}</pre> + +<ul> + <li>이전에는 {{cssxref(":nth-child")}} 선택자가 특정 자식 요소를 선택하는 데 사용되는 것을 보았습니다. 수식을 매개 변수로 제공할 수도 있으므로 일련의 요소를 선택합니다. 수식 <code>2n-1</code> 은 홀수 번째 자식 (1, 3, 5 등) 을 모두 선택하고 수식 <code>2n</code> 은 짝수 번째 자식 (2, 4, 6 등) 을 모두 선택합니다. 코드의 <code>odd</code> 및 <code>even</code> 키워드 조차도 앞에서 언급한 공식과 정확히 동일한 기능을 수행합니다. 이 경우 홀수 및 짝수 행에 다른 색상 (선정적인 색상) 을 부여합니다.</li> + <li>또한 모든 본문 행에 반복적인 배경 타일을 추가하여, 약간의 노이즈 (약간 시각적 왜곡이 있는 반투명 <code>.png</code>) 를 사용하여 질감을 제공했습니다.</li> + <li>마지막으로, <code>:nth-child</code> 선택자를 지원하지 않는 브라우저는 여전히 본문 행의 배경을 갖도록 전체 표에 단색 배경색을 지정했습니다.</li> +</ul> + +<p>이러한 색상은 다음과 같은 모양을 만듭니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13074/table-with-color.png" style="display: block; margin: 0 auto;"></p> + +<p>자, 이것은 여러분의 취향에 맞지 않을 수도 있습니다. 하지만 , 우리가 하려고하는 요점은 표가 지루하고 학문적일 필요는 없다는 것입니다.</p> + +<h3 id="caption_스타일링">caption 스타일링</h3> + +<p>표와 관련하여 마지막으로 해야할 일이 있습니다 — caption 에 스타일을 지정하는 일입니다. 이렇게 하려면, <code>style.css</code> 파일의 맨 아래에 다름을 추가하십시오:</p> + +<pre class="brush: css">caption { + font-family: 'Rock Salt', cursive; + padding: 20px; + font-style: italic; + caption-side: bottom; + color: #666; + text-align: right; + letter-spacing: 1px; +}</pre> + +<p><code>bottom</code> 값을 가진 {{cssxref("caption-side")}} 속성을 제외하고는 여기서 주목할만한 것이 없습니다. 이로 인해 caption 이 표의 맨 아래에 배치되고 다른 선언과 함께 최종 모양을 얻을 수 있습니다 (<a href="http://mdn.github.io/learning-area/css/styling-boxes/styling-tables/punk-bands-complete.html">punk-bands-complete.html</a> 참조):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13076/table-with-caption.png" style="display: block; height: 357px; margin: 0px auto; width: 723px;"></p> + +<h2 id="적극적인_학습_나만의_표_스타일">적극적인 학습: 나만의 표 스타일</h2> + +<p>이 시점에서 표 HTML 예제 (또는 일부를 사용하십시오!) 를 가져와서 표보다 훨씬 더 나은 디자인과 장식을 갖도록 스타일을 지정하고 싶습니다.</p> + +<h2 id="표_스타일링_빠르게_하는_팁">표 스타일링 빠르게 하는 팁</h2> + +<p>다음 단계로 넘어가지 전에, 위에서 설명한 가장 유용한 요점에 대한 간단한 목록을 제공해야 한다고 생각했습니다:</p> + +<ul> + <li>표 마크 업을 가능한 한 간단하게 만들고, 유연한 작업을 유지하십시오 예: 백분유을 사용하여 디자인의 반응속도를 향상시킵니다.</li> + <li>{{cssxref("table-layout")}}<code>: fixed</code> 를 사용하여 제목 ({{htmlelement("th")}}) 에서 {{cssxref("width")}} 를 설정하여 열 너비를 쉽게 설정할 수 있는 예측 가능한 표 레이아웃을 작성합니다.</li> + <li>{{cssxref("border-collapse")}}<code>: collapse</code> 를 사용하여 표 요소 테두리를 서로 접어서 깔끔하게 만들 수 있습니다.</li> + <li>{{htmlelement("thead")}}, {{htmlelement("tbody")}} 및 {{htmlelement("tfoot")}} 를 사용하여 표를 논리적 덩어리로 나누고 CSS 를 적용할 추가 위치를 제공하십시오. 필요한 경우 서로 위에 스타일을 더 쉽게 레이어할 수 있습니다.</li> + <li>alternative 행을 읽기 쉽게 하려면 얼룩말 줄무늬를 사용합니다.</li> + <li>{{cssxref("text-align")}} 을 사용하여 {{htmlelement("th")}} 및 {{htmlelement("td")}} 텍스트를 정렬하여, 더 깜끔하고 쉽게 따라할 수 있도록 하십시오.</li> +</ul> + +<h2 id="요약">요약</h2> + +<p>지금 우리 뒤에 스타일링 표가 있기 때문에, 우리의 시간을 차지할 다른 것이 필요합니다. 다음 기사에서는 CSS 디버깅에 대해 살펴봅니다 — 레이아웃이 제대로 보이지 않거나 적용할 때 적용되지 않는 속성과 같은 문제를 해결하는 방법. 여기에는 브라우저 DevTools 를 사용하여 문제점에 대한 솔루션을 찾는 방법에 대한 정보가 포함됩니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks/Debugging_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/values_and_units/index.html b/files/ko/learn/css/building_blocks/values_and_units/index.html new file mode 100644 index 0000000000..e4f8ab52b4 --- /dev/null +++ b/files/ko/learn/css/building_blocks/values_and_units/index.html @@ -0,0 +1,388 @@ +--- +title: CSS 값 과 단위 +slug: Learn/CSS/Building_blocks/Values_and_units +translation_of: Learn/CSS/Building_blocks/Values_and_units +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</div> + +<p>CSS 에 사용된 모든 속성에는 해당 속성에 허용되는 값 이 있으며, MDN 의 속성 페이지를 보면 특성 속성에 유효한 값을 이해하는 데 도움이 됩니다. 이 레슨에서는 가장 일반적인 값 과 사용 단위를 살펴 보겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 , CSS 작동 방식 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 번째 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 속성에 사용되는 다양한 유형의 값과 단위에 대해 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_값이란_무엇인가">CSS 값이란 무엇인가?</h2> + +<p>CSS 사양과 MDN 의 속성 페이지에서 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> 또는 <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>. 와 같이 꺽쇠 괄호로 묶여 있는 값을 찾을 수 있습니다. <code><color></code> 값이 특정 속성에 유효한 것으로 표시되면, <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> 참조 페이지에 나열된대로 유효한 속성을 해당 속성의 값으로 사용할 수 있습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: CSS 값을 <em>데이터 유형 </em>이라고 합니다. 용어는 기본적으로 상호 교환이 가능합니다 — CSS 에서 데이터 유형이라고 하는것을 볼 때, 실제로 가치를 말하는 멋진 방법입니다.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 예, CSS 값은 CSS 속성과 구별하기 위해, 꺽쇠 괄호를 사용하여 표시되는 경향이 있습니다 (예: {{cssxref("color")}} 속성, <a href="/en-US/docs/Web/CSS/color_value"><color></a> 데이터 형식). CSS 데이터 형식과 HTML 요소도 꺽쇠 괄호를 사용하므로 혼동될 수 있지만, 이는 매우 다른 상황에서 사용됩니다.</p> +</div> + +<p>다음 예제에서는 키워드를 사용하여 머리글의 색상을 설정하고, <code>rgb()</code> 함수를 사용하여 배경을 설정했습니다:</p> + +<pre class="brush: css"><code>h1 { + color: black; + background-color: rgb(197,93,161); +} </code> +</pre> + +<p>CSS 값은 허용가능한 하위값 모음을 정의하는 방법입니다. 즉, <code><color></code> 가 유효한 것으로 표시되면 — 키워드, 16진수 값, <code>rgb()</code> 함수 등 어떤 색상값을 사용할 수 있는지 궁금할 필요가 없습니다. 사용 가능한 <code><color></code> 값은 브라우저에서 지원한다고 가정합니다. 각 값에 대한 MDN 페이지는 브라우저 지원에 대한 정보를 제공합니다. 예를 들어 <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> 페이지를 보면 브라우저 호환성 섹션에 다양한 색상값 유형과 지원이 나열되어 있습니다.</p> + +<p>여러가지 가능한 값을 시험해 볼 수 있도록 예를 들어 자주 접할 수 있는 몇 가지 유형의 값과 단위를 살펴보겠습니다.</p> + +<h2 id="숫자_길이_및_백분율">숫자, 길이 및 백분율</h2> + +<p>CSS 에서 사용할 수 있는 다양한 숫자 데이터 형식이 있습니다. 다음은 모두 숫자로 분류됩니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">데이터 형식</th> + <th scope="col">설명</th> + </tr> + </thead> + <tbody> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/integer"><integer></a></code></td> + <td><code><integer></code> 은 <code>1024</code> 또는<code>-55</code> 와 같은 정수입니다.</td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/number"><number></a></code></td> + <td><code><number></code> 는 10진수를 나타냅니다 — 소수점 이하의 소수 자릿수 (예: <code>0.255</code>, <code>128</code> 또는 <code>-1.2</code>) 가 있을 수도 있고 없을 수도 있습니다.</td> + </tr> + <tr> + <td><code><dimension></code></td> + <td><code><dimension></code> 은 예를 들어 <code>45deg</code>, <code>5s</code> 또는 <code>10px</code>. 과 같은 단위가 붙어있는 <code><number></code> 입니다. <code><dimension></code> 은 <code><a href="/en-US/docs/Web/CSS/length"><length></a></code>, <code><a href="/en-US/docs/Web/CSS/angle"><angle></a></code>, <code><a href="/en-US/docs/Web/CSS/time"><time></a></code> 및 <code><a href="/en-US/docs/Web/CSS/resolution"><resolution></a></code> 의 종류를 포함하는 카테고리입니다<a href="/en-US/docs/Web/CSS/resolution">.</a></td> + </tr> + <tr> + <td><code><a href="/en-US/docs/Web/CSS/percentage"><percentage></a></code></td> + <td><code><percentage></code> 는 다른 값의 일부, 예를 들어 <code>50%</code> 를 나타냅니다. 백분율 값은 항상 다른 수량을 기준으로 합니다. 예를 들어 요소의 길이는 부모 요소의 길이를 기준으로 합니다.</td> + </tr> + </tbody> +</table> + +<h3 id="길이">길이</h3> + +<p>가장 자주 사용되는 숫자 형식은 <code><length></code> 입니다. 예를 들면 <code>10px</code> (픽셀) 또는<code>30em</code>. CSS 에서 사용되는 길이는 — 상대 및 절대의 두 가지 유형이 있습니다. 얼마나 커질지 알기 위해서는 차이를 이해하는 것이 중요합니다.</p> + +<h4 id="절대_길이_단위">절대 길이 단위</h4> + +<p>다음은 모두 <strong>절대</strong> 길이 단위이며 — 다른 것과 관련이 없으며 일반적으로 항상 동일한 크기로 간주됩니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">이름</th> + <th scope="col">다음과 동일함</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>cm</code></td> + <td>센티미터</td> + <td>1cm = 96px/2.54</td> + </tr> + <tr> + <td><code>mm</code></td> + <td>밀리미터</td> + <td>1mm = 1/10th of 1cm</td> + </tr> + <tr> + <td><code>Q</code></td> + <td>4분의 1 밀리미터</td> + <td>1Q = 1/40th of 1cm</td> + </tr> + <tr> + <td><code>in</code></td> + <td>인치</td> + <td>1in = 2.54cm = 96px</td> + </tr> + <tr> + <td><code>pc</code></td> + <td>Picas</td> + <td>1pc = 1/16th of 1in</td> + </tr> + <tr> + <td><code>pt</code></td> + <td>포인트</td> + <td>1pt = 1/72th of 1in</td> + </tr> + <tr> + <td><code>px</code></td> + <td>픽셀</td> + <td>1px = 1/96th of 1in</td> + </tr> + </tbody> +</table> + +<p>이러한 값의 대부분은 화면 출력이 아닌 인쇄에 사용될 때 더 유용합니다. 예를 들어 일반적으로 화면에 <code>cm</code> (센티미터) 를 사용하지 않습니다. 보통 사용하는 유일한 값은 <code>px</code> (픽셀) 입니다.</p> + +<h4 id="상대_길이_단위">상대 길이 단위</h4> + +<p>상대 길이 단위는 다른 요소 (상위 요소의 글꼴 크기 또는 viewport 크기) 와 관련이 있습니다. 상대 단위를 사용하면 텍스트나 다른 요소의 크기가 페이지의 다른 모든 것에 비례하여 조정되도록 신중하게 계획할 수 있다는 이점이 있습니다. 웹 개발에 가장 유용한 단위가 아래 표에 나열되어 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">단위</th> + <th scope="col">관련 사항</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>em</code></td> + <td>요소의 글꼴 크기.</td> + </tr> + <tr> + <td><code>ex</code></td> + <td>요소 글꼴의 x-height.</td> + </tr> + <tr> + <td><code>ch</code></td> + <td>요소 글꼴의 glyph "0" 의 사전 길이 (너비) 입니다.</td> + </tr> + <tr> + <td><code>rem</code></td> + <td>루트 요소의 글꼴 크기.</td> + </tr> + <tr> + <td><code>lh</code></td> + <td>요소의 라인 높이.</td> + </tr> + <tr> + <td><code>vw</code></td> + <td>viewport 너비의 1%.</td> + </tr> + <tr> + <td><code>vh</code></td> + <td>viewport 높이의 1%.</td> + </tr> + <tr> + <td><code>vmin</code></td> + <td>viewport 의 작은 치수의 1%.</td> + </tr> + <tr> + <td><code>vmax</code></td> + <td>viewport 의 큰 치수의 1%.</td> + </tr> + </tbody> +</table> + +<h4 id="예제_살펴보기">예제 살펴보기</h4> + +<p>아래 예에서 일부 상대 및 절대 길이 단위의 동작을 확인할 수 있습니다. 첫 번째 박스에는 {{cssxref("width")}} 픽셀 단위로 설정되어 있습니다. 절대 단위로서 이 너비는 다른 사항에 관계없이 동일하게 유지됩니다.</p> + +<p>두 번째 박스의 너비는 <code>vw</code> (viewport 너비) 단위로 설정됩니다. 이 값은 viewport 너비를 기준으로 하므로, 10vw 는 viewport 너비의 10% 입니다. 브라우저 창의 너비를 변경하면, 박스의 크기가 변경되지만, 이 예제는 <code><a href="/en-US/docs/Web/HTML/Element/iframe"><iframe></a></code> 을 사용하여 페이지에 포함되므로 작동하지 않습니다. 이 기능을 실제로 보려면 <a href="https://mdn.github.io/css-examples/learn/values-units/length.html">브라우저 탭에서 예제를 연 후 에 시도</a> 해야 합니다.</p> + +<p>세 번째 박스는 <code>em</code> 단위를 사용합니다. 글꼴 크기에 상대적입니다. <code>.wrapper</code> class 를 포함하는 {{htmlelement("div")}} 를 포함하여 글꼴 크기를 <code>1em</code> 으로 설정했습니다. 이 값을 <code>1.5em</code> 으로 변경하면 모든 요소의 글꼴 크기가 증가하지만, 너비가 해당 글꼴 크기에 비례하므로 마지막 항목만 넓어집니다.</p> + +<p>위의 지침을 따른 후 다른 방법으로 값을 실습하여 얻은 것을 확인하십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/length.html", '100%', 820)}}</p> + +<h4 id="ems_및_rems">ems 및 rems</h4> + +<p><code>em</code> 과 <code>rem</code> 은 박스에서 텍스트로 크기를 조정할 때 가장 자주 발생하는 두 개의 상대 길이입니다. <a href="/en-US/docs/Learn/CSS/Styling_text">텍스트 스타일링</a> 또는 <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a> 과 같은 보다 복잡한 주제를 시작할 때, 이러한 작동 방식과 차이점을 이해하는 것이 좋습니다. 아래 예제는 데모를 제공합니다.</p> + +<p>HTML 은 중첩된 목록의 집합니다 — 총 3개의 목록이 있으며 두 예제 모두 동일한 HTML 을 갖습니다. 유일한 차이점은 첫 번째는 <strong><em>ems</em></strong> class 이고 두 번째는 <strong><em>rems</em></strong> class 입니다.</p> + +<p>먼저, <code><html></code> 요소에서 글꼴 크기로 16px 를 설정합니다.</p> + +<p><strong>다시 말해서, em 단위는 "부모 요소의 글꼴 크기" 를 의미합니다</strong>. <code>ems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 부모로부터 크기를 가져옵니다. 따라서 각 중첩 부분은 글꼴 크기가 부모 글꼴 크기의 <code>1.3em</code> — 1.3 배로 설정되므로 점점 더 커집니다.</p> + +<p><strong>다시 말해서, rem 단위는 "루트 요소의 글꼴 크기" 를 의미합니다</strong>. ("root em" 의 rem 표준입니다.) <code>rems</code> <code>class</code> 가 있는 {{htmlelement("ul")}} 내부의 {{htmlelement("li")}} 요소는 루트 요소는 (<code><html></code>) 에서 크기를 가져옵니다. 이것은 각각의 연속적인 중첩 부분이 계속 커지는 것을 의미합니다.</p> + +<p>그러나, CSS 에서 <code><html></code> <code>font-size</code> 를 변경하면 다른 모든 텍스트가 변경되는 것을 볼 수 있습니다 — <code>rem</code>- 및 <code>em</code>-크기 텍스트.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/em-rem.html", '100%', 1000)}} </p> + +<h3 id="백분율">백분율</h3> + +<p>많은 경우 백분율은 길이와 같은 방식으로 처리됩니다. 백분율이 있는 것은 항상 다른 값에 상대적으로 설정된다는 것입니다. 예를 들어, 요소의 <code>font-size</code> 를 백분율로 설정하면요소 무보의 글꼴 크기에 대한 백분율이 됩니다. <code>width</code> 값에 백분율을 사용하면, 부모 너비의 백분율이 됩니다.</p> + +<p>아래 예제에서 두 개의 백분율 크기 박스와 두 개의 픽셀 크기 박스는 동일한 class 이름을 갖습니다. 두 세트의 너비는 각각 200px 및 40% 입니다.</p> + +<p>차이점은 두 박스의 두 번째 세트가 너비가 400 픽셀 안에 있다는 것입니다. 두 번째 200px 너비의 박스는 첫 번째 너비와 동일한 너비이지만, 두 번째 40% 박스는 이제 400px 의 40% 이므로 — 첫 번째 박스보다 훨씬 좁습니다!</p> + +<p><strong>너비 또는 백분율 값을 변경하여 작동 방식을 확인합니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage.html", '100%', 850)}} </p> + +<p>다음 예제에서는 글꼴 크기가 백분율로 설정되어 있습니다. 각 <code><li></code> 의 <code>font-size</code> 는 80% 이므로, 중첩된 목록 항목은 부모로부터 크기를 상속함에 따라 점차 작아집니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/percentage-fonts.html", '100%', 650)}} </p> + +<p>많은 값이 길이 또는 백분율을 허용하지만, 길이만 허용하는 값도 있습니다. MDN 속성 참조 페이지에서 어떤 값이 허용되는지 확인할 수 있습니다. 허용된 값에 <code><a href="/en-US/docs/Web/CSS/length-percentage"><length-percentage></a></code> 가 포함된 경우 길이 또는 백분율을 사용할 수 있습니다. 허용된 값에 <code><length></code> 만 포함된 경우, 백분율을 사용할 수 없습니다.</p> + +<h3 id="숫자">숫자</h3> + +<p>일부 값은 단위를 추가하지 않고 숫자를 허용합니다. 단위가 없는 숫자를 허용하는 속성의 예는 요소의 불투명도 (투명한 정도) 를 제어하는 <code>opacity</code> 속성입니다. 이 속성은 <code>0</code> (완전 투명) 과 <code>1</code> (완전 불투명) 사이의 숫자를 허용합니다.</p> + +<p><strong>아래 예제에서, <code>opacity</code> 값을 <code>0</code> 과 <code>1</code> 사이의 다양한 10진수 값으로 변경하고 박스와 그 내용이 어떻게 붙투명하게 되는지 확인하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/opacity.html", '100%', 500)}} </p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: CSS 에서 숫자를 값으로 사용하는 경우 따옴표로 묶지 않아야합니다.</p> +</div> + +<h2 id="색상">색상</h2> + +<p>CSS 에서 색상을 지정하는 방법은 여러가지가 있으며, 그 중 일부는 다른것 보다 최근에 구현되었습니다. 텍스트 색상, 배경 색상 등을 지정하든 상관없이 CSS 의 모든 위치에서 동일한 색상 값을 사용할 수 있습니다.</p> + +<p>최신 컴퓨터에서 사용할 수 있는 표준 색상 시스템은 24bit 이며, 채널당 256개의 서로 다른 값 (256 x 256 x 256 = 16,777,216.) 을 갖는 서로 다른 빨강, 녹색 및 파랑 채널의 조합을 통해 약 1670만개의 고유한 색상을 표시할 수 있습니다. CSS 에서 색상을 지정할 수 있는 몇 가지 방법을 살펴보겠습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 이 자습서에서는 브라우저 지원 기능이 우수한 색상을 지정하는 일반적인 방법을 살펴봅니다. 다른 것도 있지만, 지원 기능이 뛰어나지 않고 덜 일반적입니다.</p> +</div> + +<h3 id="색상_키워드">색상 키워드</h3> + +<p>여기의 학습 섹션이나 MDN 의 다른 예에서 색상 키워드를 지정하는 간단하고 이해하기 쉬운 방법인 색상 키워드를 볼 수 있습니다. 이 키워드에는 여러가지가 있으며 그중 일부는 상당히 재미있는 이름을 가지고 있습니다! <code><a href="/en-US/docs/Web/CSS/color_value"><color></a></code> 값에 대한 전체 목록을 페이지에서 볼 수 있습니다.</p> + +<p><strong>아래의 라이브 예제에서 다른 색상 값을 사용하여 작동하는 방법에 대한 아이디어를 얻으십시오.</strong></p> + +<h3 id="16진수_RGB_값">16진수 RGB 값</h3> + +<p>다음 형식의 색상 값은 16진수 코드입니다. 각 16진수 값은 hash/pound 기호 (#) 와 6개의 16진수로 구성되며, 각 16진수는 0 과 f (15를 나타냄) 사이의 16개 값 중 하나를 사용할 수 있으므로 — <code>0123456789abcdef</code> 입니다. 각 값 쌍은 채널 중 하나 — 빨강, 녹색 및 파랑 — 을 나타내며 각각에 대해 256개의 사용 가능한 값 (16 x 16 = 256) 을 지정할 수 있습니다.</p> + +<p>이 값은 좀 더 복잡하고 이해하기 쉽지 않지만 기워드보다 훨씬 더 다양합니다 — 16진수 값을 사용하여 색상표에 사용하려는 색상을 나타낼 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hex.html", '100%', 700)}} </p> + +<p><strong>다시 한 번, 값을 변경하여 색상이 어떻게 다른지 확인하십시오. </strong></p> + +<h3 id="RGB_및_RGBA_값">RGB 및 RGBA 값</h3> + +<p>여기서 이야기 할 세 번째 방식은 RGB 입니다. RGB 값은 — <code>rgb()</code> 함수입니다 — 이 값은 16진수 값과 거의 같은 방식으로 색상의 빨강, 녹색 및 파랑 채널 값을 나타내는 세 개의 매개 변수가 제공됩니다. RGB 와의 차이점은 각 채널이 2개의 16진수가 아니라 0 과 255 사이의 10진수로 표현되어 — 다소 이해하기 쉽다는 것입니다.</p> + +<p>Let's rewrite our last example to use RGB colors:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgb.html", '100%', 700)}} </p> + +<p>RGBA 색상을 사용할 수도 있습니다 — 이 색상은 RGB 색상과 정확히 같은 방식으로 작동하므로 RGB 값을 사용할 수 있지만, 색상의 알파 채널을 나타내는 네 번째 값이 있어 불투명도 (opacity) 를 제어합니다. 이 값을 <code>0</code> 으로 설정하면 색상이 완전히 투명해지는 반면, <code>1</code> 이면 완전히 불투명하게 됩니다. 그 사이의 값은 다른 수준의 투명성을 제공합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 색상에 알파 채널을 설정하면 앞에서 살펴본 {{cssxref("opacity")}} 속성을 사용하는 것과 한 가지 중요한 차이점이 있습니다. 불투명도를 사용하면 요소와 그 안에 있는 모든 것을 불투명하게 만드는 반면, RGBA 색상을 사용하면 불투명하게 지정한 색상만 만들어집니다.</p> +</div> + +<p>아래 예제에서 나는 색상 박스가 포함된 블록에 배경 이미지를 추가했습니다. 그런 다음 박스에 다른 불투명도 값을 갖도록 설정했습니다 — 알파 채널 값이 작을 때 배경이 더 잘 나타나는지 확인하십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-rgba.html", '100%', 770)}}</p> + +<p><strong>이 예에서는, 알파 채널 값을 변경하여 색상 출력에 어떤 영향을 미치는지 확인하십시오. </strong></p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 어떤 시점에서 최신 브라우저는 <code>rgba()</code> 와 <code>rgb()</code> 및 <code>hsl()</code> 과 <code>hsla()</code> (아래 참조) 가 서로의 순수 별칭이 되어 정확히 동일한 동작을 시작하도록 업데이트 되었습니다. 예를 들어<code>rgba()</code> 및 <code>rgb()</code> 는 모두 알파 채널 값이 있거나 없는 색상을 허용합니다. 위 예제의 <code>rgba()</code> 함수를 <code>rgb()</code> 로 변경하고 색상이 여전히 작동하는지 확인하십시오! 어떤 스타일을 사용하느냐에 따라 다르지만, 다른 기능을 사용하기 위해 불투명과 투명한 색상 정의를 분리하면 브라우저 지원이 약간 향상되고 코드에서 투명 색상이 정의되는 위치를 시각적으로 표시할 수 있습니다.</p> +</div> + +<h3 id="HSL_및_HSLA_값">HSL 및 HSLA 값</h3> + +<p>RGB 보다 약간 덜 지원되는 HSL 색상은 (이전 버전의 IE 에서는 지원되지 않음) 디자이너의 관심을 끈 후에 구현되었습니다. <code>hsl()</code> 함수는 빨강, 녹색 및 파랑 값 대신 색조 (hue), 채도 (saturation) 및 명도(lightness) 값을 받아들입니다. 이 값은 1670만 가지 색상을 구별하는 데 사용되지만 다른 방식으로 사용됩니다.</p> + +<ul> + <li><strong>색조 (Hue)</strong>: 색상의 기본 음영입니다. 0 에서 360 사이의 값을 사용합니다.</li> + <li><strong>채도 (Saturation)</strong>: 색상이 얼마나 포함되어 있습니까? 0–100% 사이의 값을 취합니다. 여기서 0은 색상이 없고 (회색 음영으로 표시됨), 100% 는 전체 색상 채도입니다.</li> + <li><strong>명도 (Lightness)</strong>: 색상이 얼마나 밝습니까? 0–100% 의 값을 받습니다. 여기서 0은 빛이 없고 (완전히 검은색으로 표시됨), 100% 는 완전한 빛 (완전히 흰색으로 표시됨) 입니다.</li> +</ul> + +<p>다음과 같이 HSL 색상을 사용하도록 RGB 예제를 업데이트 할 수 있습니다:</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsl.html", '100%', 700)}} </p> + +<p>RGB 에 RGBA 가 있는 것처럼, HSL 에는 HSLA 에 상응하는 것이 있으므로, 알파 채널을 지정할 수 있는 동일한 기능을 제공합니다. HSLA 색상을 사용하도록 RGBA 예제를 변경하여 아래에서 이것을 시연했습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 770)}} </p> + +<p>여러분의 프로젝트에서 이러한 색상 값을 사용할 수 있습니다. 대부분의 프로젝트에서 색상 팔레트를 결정한 다음 전체 프로젝트에서 해당 색상 — 선택한 색상 지정 방법 — 을 사용합니다. 색상 모델을 혼합하고 일치시킬 수 있지만, 일관성을 유지하려면 전체 프로젝트에서 동일한 모델을 사용하는 것이 가장 좋습니다!</p> + +<h2 id="이미지">이미지</h2> + +<p><code><a href="/en-US/docs/Web/CSS/image"><image></a></code> 데이터 형식은 이미지가 유효한 값인 경우 사용됩니다. 이것은 <code>url()</code> 함수 또는 gradient 를 통해 가리키는 실제 이미지 파일일 수 있습니다.</p> + +<p>아래 예제에서 CSS <code>background-image</code> 속성의 값으로 사용되는 이미지와 gradient 를 보여주었습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/image.html", '100%', 740)}} </p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: <code><image></code> 에 대해 가능한 다른 값이 있지만 이 값은 최신이며 최신 브라우저 지원이 좋지 않습니다. <image> 데이터 형식을 읽으려면 MDN 페이지에서 <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> 데이터 형식을 확인하십시오.</p> +</div> + +<h2 id="위치_Position">위치 (Position)</h2> + +<p><code><a href="/en-US/docs/Web/CSS/position_value"><position></a></code> 데이터 형식은 배경 이미지 (<code><a href="/en-US/docs/Web/CSS/background-position">background-position</a></code> 를 통해) 와 같은 항목을 배치하는 데 사용되는 2D 좌표를 나타냅니다. <code>top</code>, <code>left</code>, <code>bottom</code>, <code>right</code> 및 <code>center</code> 와 같은 키워드를 사용하여 항목을 2D 박스의 특정 범위에 맞춰 길이와 함께 박스의 위쪽 및 왼쪽 가장자리에서 offset 을 나타냅니다.</p> + +<p>일반적인 position 값은 두 가지 값으로 구성됩니다 — 첫 번째는 위치를 가로로 설정하고, 두 번째는 세로로 설정합니다. 한 축의 값만 지정하면 다른 축은 <code>center</code> 으로 설정됩니다.</p> + +<p>다음 예제에서는 키워드를 사용하여 container 의 위쪽과 오른쪽에서 40px 의 배경 이미지를 배치했습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/position.html", '100%', 720)}} </p> + +<p><strong>이 값을 가지고 놀면서 이미지를 어떻게 밀어낼 수 있는지 확인하십시오.</strong></p> + +<h2 id="문자열_및_식별자_identifiers">문자열 및 식별자 (identifiers)</h2> + +<p>위의 예에서, 키워드가 값으로 (예: <code>red</code>, <code>black</code>, <code>rebeccapurple</code> 및 <code>goldenrod</code>, 와 같은 <code><color></code> 키워드) 사용되는 위치를 확인했습니다. 이러한 키워드는 CSS 가 이해하는 특수한 값인 <strong><em>식별자 (identifiers) </em></strong>로, 보다 정확하게 설명됩니다. 따라서 인용되지 않으며 — 문자열로 취급되지 않습니다.</p> + +<p>CSS 에서 문자열을 사용하는 장소가 있습니다. 예를 들면, <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#Generating_content_with_before_and_after">생성된 콘텐츠를 지정할 때</a>. 이 경우 값은 문자열임을 보여주기 위해 인용됩니다. 아래 예제에서는 인용되지 않은 색상 키워드와 인용된 생성된 콘텐츠 문자열을 사용합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/strings-idents.html", '100%', 550)}} </p> + +<h2 id="함수_Functions">함수 (Functions)</h2> + +<p>우리가 살펴볼 마지막 값의 형식은 함수로 알려진 값의 그룹입니다. 프로그래밍에서 함수는 개발자와 컴퓨터 모두에서 최소한의 노력으로 반복적인 작업을 완료하기 위해 여러번 실행할 수 있는 재사용 가능한 코드 섹션입니다. 함수는 일반적으로 JavaScript, Python 또는 C++ 과 같은 언어와 관련이 있지만, 속성 값으로 CSS 에도 존재합니다 — <code>rgb()</code>, <code>hsl()</code> 등의 색상 섹션에서 작동하는 함수를 이미 보았습니다. 파일에서 이미지를 반환하는 데 사용되는 값인 — <code>url()</code> — 도 함수입니다.</p> + +<p>전통적인 프로그래밍 언어에서 찾아볼 수 있는 것과 비슷한 값은 <code>calc()</code> CSS 함수입니다. 이 함수를 사요하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 프로젝트의 CSS 를 작성할 때 정의할 수 없는 값을 계산하고 런타임에 브라우저가 작동해야하는 경우 특히 유용합니다.</p> + +<p>예를 들어, 아래에서는 <code>calc()</code> 를 사용하여 박스를 <code>20% + 100px</code> 너비로 만듭니다. 20% 는 부모 container <code>.wrapper</code> 의 너비에서 계산되므로 너비가 변경되면 변경됩니다. 우리는 부모 요소의 20% 가 무엇인지 알지 못하기 때문에, 이 계산을 미리 수행할 수 없으므로 <code>calc()</code> 를 사용하여 브라우저에 지시합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/values-units/calc.html", '100%', 450)}}</p> + +<h2 id="요약">요약</h2> + +<p>이것은 가장 일반적인 형식의 값과 단위를 빠르게 살펴 보았습니다. <a href="/en-US/docs/Web/CSS/CSS_Values_and_Units">CSS 값 및 단위</a> 참조 페이지에서 다양한 유형을 모두 볼 수 있습니다. 이 수업을 진행하면서 사용중인 많은 것들을 보게 될 것입니다.</p> + +<p>기억해야 할 중요한 점은 각 속성에 정의된 값 목록이 있고 각 값에는 하위 값이 무엇인지 설명하는 정의가 있다는 것입니다. 그런 다음 MDN 에서 세부 사항을 찾을 수 있습니다.</p> + +<p>예를 들어, <code><a href="/en-US/docs/Web/CSS/image"><image></a></code> 를 사용하면 색상 gradient 를 만들 수 있다는 점을 이해하면 유용하지만 명백하지 않은 지식이 있을 수 있습니다!</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Overflowing_content", "Learn/CSS/Building_blocks/Sizing_items_in_CSS", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값 과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/상자_모델/index.html b/files/ko/learn/css/building_blocks/상자_모델/index.html new file mode 100644 index 0000000000..aafc0a5241 --- /dev/null +++ b/files/ko/learn/css/building_blocks/상자_모델/index.html @@ -0,0 +1,347 @@ +--- +title: 상자 모델 +slug: Learn/CSS/Building_blocks/상자_모델 +tags: + - 디스플레이 + - 상자 모델 + - 씨에스에스 + - 여백 + - 초보자 + - 테두리 + - 패딩 + - 학습 +translation_of: Learn/CSS/Building_blocks/The_box_model +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</div> + +<p>씨에스에스에 포함되는 모든 요소의 외장은 상자이며, 이 상자를 이해하는 것은 씨에스에스 조판을 생성하거나, 항목을 다른 항목과 대비해 정렬 능력을 갖추게 해주는 열쇠입니다. 이번 단원에서 우리는 씨에스에스 <em>상자 모델</em>을 제대로 살펴보겠습니다. 상자의 작동 방식과 상자와 관련된 용어를 이해함으로써 더 복잡한 조판 작업으로 넘어갈 수 있도록합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>기본 컴퓨터 활용 능력<a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업에 대한 기본 지식</a>, 에이치티엠엘 기본기 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘</a> 학습), 씨에스에스 작동 방식에 대한 개념 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫 단계</a> 학습.) 등에 대한 기본 지식</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>씨에스에스 상자 모델, 상자 모델을 구성하고 대체 모델로 전환하는 방법에 대해 학습합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="블록_및_인라인_상자">블록 및 인라인 상자</h2> + +<p>씨에스에스에는 크게 두 가지 상자(<strong>블록 상자</strong>와 <strong>인라인 상자</strong>) 유형이 있습니다. 이러한 특성은 상자가 페이지 대열 측면 및 페이지의 다른 상자와 관련하여 상자의 작동 방식을 나타냅니다.</p> + +<p>상자가 블록으로 정의되면 다음과 같은 방식으로 동작합니다:</p> + +<ul> + <li>상자는 인라인 방향으로 연장되어 상위 콘테이너에서 사용 가능한 공간을 채웁니다. 대부분은 경우 이것은 상자가 사용 가능한 공간을 100%로 채우면서 상위 콘테이너 너비만큼 된다는 의미입니다.</li> + <li>상자는 새 줄로 행갈이를 합니다.</li> + <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 존중됩니다.</li> + <li>패딩과 여백, 테두리로 인해 다른 요소들이 상자로부터 밀려납니다.</li> +</ul> + +<p>여러분이 디스플레이 유형은 인라인으로 변경하지 않는 한 머리글(<code><h1></code>)과 <code><p></code>)와 같은 요소는 모두 기본값으로 외부 디스플레이 유형을 <code>block</code> 사용합니다.</p> + +<p>상자의 외부 디스플레이 유형이 <code>inline</code>일 경우:</p> + +<ul> + <li>상자는 새 줄로 행갈이를 하지 않습니다.</li> + <li>{{cssxref("width")}}와 {{cssxref("height")}} 속성은 적용되지 않습니다.</li> + <li>패딩과 여백, 테두리는 다른 인라인 상자들이 당 상자로부터 멀어지지게 하지 않습니다.</li> +</ul> + +<p>링크용 <code><a></code> 요소와 <code><span></code>, <code><em></code> 및 <code><strong></code> 요소는 모두 기본적으로 인라인으로 표시됩니다.</p> + +<p>요소에 적용되는 상자 유형은 <code>block</code> 및 <code>inline</code>과 같은 {{cssxref("display")}} 속성 값으로 정의되며. 아울러 그것은 <code>display</code>의 <strong>outer</strong> 값과 관련이 있습니다.</p> + +<h2 id="구분_내부_및_외부_디스플레이_유형">구분: 내부 및 외부 디스플레이 유형</h2> + +<p>이 시점에 우리는 <strong>내부</strong> 및 <strong>외부</strong> 디스플레이 유형에 대해 설명하는 게 좋겠습니다. 위에서 언급했듯이 씨에스에스의 상자는 <em>외부</em> 디스플레이 유형을 가지며, 이는 상자가 블록인지 인라인인지를 자세히 설명합니다.</p> + +<p>그러나 상자에는 <em>내부</em> 디스플레이 유형도 있으며 당 상자 내부의 요소가 배치되는 방법을 나타냅니다. 기본적으로 상자 내부의 요소는 <strong><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">일반 대열</a></strong>로 배치되며, 이는 (위에서 설명한 바와 같이) 여타 블록 및 인라인 요소와 마찬가지로 작동한다는 것을 의미합니다.</p> + +<p>그러나 여러분은 <code>flex</code>과 같은 <code>display</code> 값을 사용하여 내부 디스플레이 유형을 변경할 수 있습니다. 어떤 요소에 우리가 <code>display: flex;</code>를 설정하면 외부 디스플레이 유형은 블록이지만 내부 디스플레이 유형은 <ruby><code>flex</code><rp> (</rp><rt>가변</rt><rp>) </rp></ruby>으로 변경됩니다. 이 상자의 직계 자식은 가변 항목이 되고, 나중에 익히게 될 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a> 규격에 명시된 규칙에 따라 배치됩니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 디스플레이 속성 값 및 상자가 블록 및 인라인 조판에서 작동하는 방법에 대해 자세히 보려면 <a href="/ko/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow">블록 및 인라인 조판</a>에 대한 모질라 개발자 네트워크 가이드를 참조하십시오.</p> +</div> + +<p>씨에스에스 조판에 대해 자세한 내용을 배우려면 다음번에는 예로 <code>flex</code>나 <code><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></code>같은 상자가 취할 수 있는 그 밖의 다양한 내부 속성 값을 마주치게 될 겁니다.</p> + +<p>그러나 블록 및 인라인 조판이 웹상에 사물이 행동하는 기본값입니다. 앞서 언급했듯이 그럴 일컬어 <ruby><em>normal flow</em><rp> (</rp><rt>일반 대열</rt><rp>) </rp></ruby>이라고 합니다. 그렇게 부르는 까닭은 다른 지시 사항이 없으면 상자는 블록 또는 인라인 상자로 배치되기 때문입니다.</p> + +<h2 id="서로_다른_디스플레이_유형의_예">서로 다른 디스플레이 유형의 예</h2> + +<p>계속해서 몇 가지 예를 살펴보겠습니다. 아래에 우리는 세 개의 서로 다른 에이치티엠엘 요소가 있으며, 모두 외부 디스플레이 유형이 <code>block</code>입니다. 첫 번째 단락은 씨에스에스에 테두리가 추가된 단락입니다. 브라우저는 이걸 블록 상자로 렌더링하므로 단락은 새 줄에서 시작되며 확보된 너비 전체까지 확장할 겁니다.</p> + +<p>두 번째는 <code>display: flex</code> 사용해 배치된 목록입니다. 이 예제는 컨테이너 내부의 항목에 대해 가변 조판을 수립하지만, 목록 자체는 블록 상자이며 단락과 같이 전체 컨테이너 너비로 확장되어 새 줄로 행갈이를 합니다.</p> + +<p>바로 아래에 우리는 블록 수준 단락을 하나 갖고 있으며 그 안에 두 개의 <code><span></code> 요소가 있습니다. 이들 요소는 보통 <code>inline</code>이겠지만, 그 중 하나에 블록 클래스에 있습니다. 우리가 그걸 미리 <code>display: block</code>로 설정했으니까요.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/block.html", '100%', 1000)}}</p> + +<p>우리는 다음 예제에서 <code>inline</code> 요소가 어떻게 동작하는지 볼 수 있습니다. 첫 번째 단락에서 <code><span></code>는 기본값으로 인라인으므로 새 줄 행갈이를 강제하지 않습니다.</p> + +<p><code>display: inline-flex</code>로 설정된 <code><ul></code> 요소도 갖고 있는데, 이는 몇 가지 가변 항목 주변에 인라인 상자를 생성합니다.</p> + +<p>마지막으로 <code>display: inline</code>으로 설정된 두 단락이 있습니다. 인라인 가변 컨테이너와 단락은 모두 하나의 라인에서 하나로 진행하지 블록 수준 요소처럼 표시하기 위해 새 줄로 행갈이를 하지 않습니다.</p> + +<p><strong>예제에서 여러분은 <code>display: inline</code> 부분을 <code>display: block</code>으로, 또는 <code>display: inline-flex</code>를 <code>display: flex</code>로 디스플레이 모드 사이를 전환할 수 있습니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline.html", '100%', 1000)}}</p> + +<p>나중에 해당 단원에서 가변 조판과 같은 것들을 접하게 될 것입니다. 당장 기억해야 할 핵심은 <code>display</code> 속성 값을 변경하면 상자의 외부 디스플레이 유형이 블록인지 인라인인지를 변경하여, 조판 속 다른 요소 주위에 자신을 표시하는 방법이 달라진다는 것입니다.</p> + +<p>나머지 수업에서는 외부 디스플레이 유형에 집중할 것이다.</p> + +<h2 id="씨에스에스_박스_모델이란_무엇인가">씨에스에스 박스 모델이란 무엇인가?</h2> + +<p>전체 씨에스에스 상자 모델은 블록 상자에 적용되며, 인라인 상자는 상자 모델에 정의된 일부 동작만 사용합니다. 이 모델은 당신이 페이지에서 볼 수 있는 상자를 생성하기 위해 상자의 서로 다른 부분인 여백, 테두리, 패딩 및 콘텐츠등이 어떻게 함께 작동할 것인지를 정의합니다. 몇 가지 복잡성을 추가하기 위해 표준 및 대체 상자 모델이 있습니다.</p> + +<h3 id="상자의_구성">상자의 구성</h3> + +<p>씨에스에스 블록 상자 구성하기 위한 우리의 준비물은:</p> + +<ul> + <li><strong>콘텐츠 상자</strong>: 당신의 콘텐츠가 표시되는 영역으로 그 크기는 {{cssxref("width")}} and {{cssxref("height")}}와 같은 속성을 사용해서 정할 수 있습니다.</li> + <li><strong>패딩 상자</strong>: 패딩은 콘텐츠 주변을 마치 공백처럼 자리잡습니다. 패딩의 크기는 {{cssxref("padding")}}와 관련 속성을 사용해 제어할 수 있습니다.</li> + <li><strong>테두리 상자</strong>: 테두리 상자는 콘텐츠와 패딩까지 둘러쌉니다. 테두리의 크기와 스타일은 {{cssxref("border")}}와 관련 속성을 사용하여 제어할 수 있습니다.</li> + <li><strong>여백 상자</strong>: 여백은 가장 바깥 쪽 레이어로 콘텐츠와 패딩, 테두리를 둘러싸면서 당 상자와 다른 요소 사이 공백 역할을 합니다. 여백 상자의 크기는 {{cssxref("margin")}}와 관련 속성을 사용하여 제어될 수 있습니다.</li> +</ul> + +<p>아래 도표는 이들 레이어를 보여줍니다.</p> + +<p><img alt="Diagram of the box model" src="https://mdn.mozillademos.org/files/16558/box-model.png" style="height: 300px; width: 544px;"></p> + +<h3 id="표준_씨에스에스_상자_모델">표준 씨에스에스 상자 모델</h3> + +<p>표준 상자 모델에서 상자에서 <code>width</code>와 <code>height</code>를 부여하면 <em>content box</em>의 너비와 높이가 정의됩니다. 그런 다음 패딩과 테두리는 상자의 너비와 높이에 추가되여 상자가 점유하는 전체 크기가 정해집니다. 그 내용이 아래 이미지에서 제시되었습니다.</p> + +<p>우리는 상자의 <code>width</code>와 <code>height</code>, <code>margin</code>과 <code>border</code> 및 <code>padding</code> 씨에스에스 값이 다음과 같이 지정되어 있다고 간주합니다:</p> + +<pre class="brush: css">.box { + width: 350px; + height: 150px; + margin: 25px; + padding: 25px; + border: 5px solid black; +} +</pre> + +<p>표준 박스 모델을 사용하여 상자가 차지하는 공간은 실제로 너비 410px(350 + 25 + 25 + 5 + 5), 높이 210px(150 + 25 + 25 + 5 + 5)가 될 것인데, 양쪽 패딩과 테두리는 콘텐츠 상자에 사용되는 너비에 더해지기 때문입니다.</p> + +<p><img alt="Showing the size of the box when the standard box model is being used." src="https://mdn.mozillademos.org/files/16559/standard-box-model.png" style="height: 300px; width: 500px;"></p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 여백은 상자의 실제 크기에 포함되지 않습니다. 물론 여백은 상자가 페이지에서 차지하는 총 공간에 영향을 미치지만, 상자의 외부 공간에만 영향을 미칩니다. 상자의 영역은 테두리에서 멈추게 됩니다. 여백으로 확장되지 않습니다.</p> +</div> + +<h3 id="대체_씨에스에스_상자_모델">대체 씨에스에스 상자 모델</h3> + +<p>상자의 실제 크기를 얻기 위해 테두리와 패딩을 추가하는 것이 다소 불편하다고 생각할 수 있습니다. 당신 말이 옳을 것입니다! 이러한 이유로 씨에스에스는 표준 상자 모델 이후 머지않아 대체 상자 모델이 도입되었습니다. 이 모델을 사용한다면 너비는 페이지에서 표시되는 상자 너비이므로 콘텐츠 영역 너비는 너비에서 패딩 및 테두리 너비를 뺀 너비입니다. 위에서 사용된 것과 동일한 씨에스에스를 아래 결과에 대입하면(폭 = 350px, 높이 = 150px)가 됩니다.</p> + +<p><img alt="Showing the size of the box when the alternate box model is being used." src="https://mdn.mozillademos.org/files/16557/alternate-box-model.png" style="height: 240px; width: 440px;"></p> + +<p>기본값으로 브라우저는 기본 상자 모델을 사용합니다. 요소에 대체 모델을 활성화하려면 거기에 <code>box-sizing: border-box</code>를 설정하여 그렇게 할 수 있습니다. 이렇게 하면 당신이 설정한 크기에 따라 정의된 영역만큼 테두리 상자가 점유하도록 브라우저에 전달할 수 있습니다.</p> + +<pre class="brush: css"><code>.box { + box-sizing: border-box; +} </code></pre> + +<p>모든 요소가 대체 상자 모델을 사용하길 원한다면, (그것이 개발자들의 흔한 선택이기도 합니다) <code><html></code> 요소에 <code>box-sizing</code> 속성을 설정한 다음 아래의 소예제에서 볼 수 있듯이 다른 모든 요소가 해당 값을 상속하도록 설정하십시요. 이런 내용의 뒷배경이 되는 생각을 이해하고 싶다면 <a href="https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/">상자 크기에 관한 씨에스에스 요령</a> 문서를 참조하십시오.</p> + +<pre class="brush: css"><code class="language-css"><span class="selector token">html</span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> border-box<span class="punctuation token">;</span> +<span class="punctuation token">}</span> +<span class="selector token">*, *<span class="pseudo-element token">::before</span>, *<span class="pseudo-element token">::after</span></span> <span class="punctuation token">{</span> + <span class="property token">box-sizing</span><span class="punctuation token">:</span> inherit<span class="punctuation token">;</span> +<span class="punctuation token">}</span></code></pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 흥미로운 기록이 있습니다. 인터넷 익스플로러는 기본적으로 대체 상자 모델로 사용되었으며 전환할 수있는 메커니즘이 없습니다.</p> +</div> + +<h2 id="상자_모델_부리기">상자 모델 부리기</h2> + +<p>아래 예제에서 당신은 상자 2개를 확인할 수 있습니다. 둘 다 <code>.box</code> 클래스에 해당하며 <code>width</code>, <code>height</code>, <code>margin</code>, <code>border</code>, <code>padding</code>에 대해 동일한 값이 주어졌습니다. 유일한 차이라면 두 번째 상자는 대체 상자 모델을 사용하도록 설정되었다는 겁니다.</p> + +<p><strong>당신은 (<code>.alternate</code> 클래스를 씨에스에스에 추가해) 두 번째 상자 크기를 변경해 첫 번째 상자의 너비와 높이와 일치하도록 할 수 있습니까?</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/box-models.html", '100%', 1000)}}</p> + +<div class="blockIndicator note"> +<p><strong>참조</strong>: <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-box-model">여러분은 이곳에서 동 질문에 대한 답변을 확인할 수 있습니다.</a>.</p> +</div> + +<h3 id="브라우저_개발자도구를_사용해_상자_모델_보기">브라우저 개발자도구를 사용해 상자 모델 보기</h3> + +<p><a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">브라우저 개발자 도구</a>를 사용하면 상자 모델을 훨씬 쉽게 이해할 수 있습니다. 파이어폭스의 개발자 도구에서 요소를 검사하면 요소의 크기와 여백, 패딩 및 테두리를 볼 수 있습니다. 이 방법으로 요소를 검사하면 실제로 그것이 당신이 생각하는 크기인지를 알아낼 수 있어 좋은 방법입니다.</p> + +<p><img alt="Inspecting the box model of an element using Firefox DevTools" src="https://mdn.mozillademos.org/files/16560/box-model-devtools.png" style="height: 683px; width: 1150px;"></p> + +<h2 id="여백과_패딩과_테두리">여백과 패딩과 테두리</h2> + +<p>상술한 예제에서 여러분은 이미 {{cssxref("margin")}}과 {{cssxref("padding")}}, 그리고 {{cssxref("border")}}를 보았습니다. 이번 예제에서 사용된 속성은 <ruby><strong>약칭</strong><rp>(</rp><rt>shorthands</rt><rp>)</rp></ruby>으로 한꺼번에 상자의 사방면을 설정할 수 있게 해줍니다. 해당 약칭은 또한 동명의 정식 명칭 속성도 있어 상자의 사방면을 개별적으로 제어할 수 있도록 해줍니다.</p> + +<p>해당 속성에 대한 자세한 내용을 탐구해 봅시다.</p> + +<h3 id="여백">여백</h3> + +<p>여백은 상자 주변에 보이지 않는 공간입니다. 여백은 상자로부터 다른 요소를 밀어냅니다. 여백은 양수값 또는 음수값을 가질 수 있습니다. 상자 한쪽 측면에 음수값 여백을 설정하면 페이지의 다른 부분과 공백이 겹칠 수 있습니다. 여러분이 표준 또는 대체 상자 모델을 사용하든지 관계없이 표시되는 상자의 크기를 계산한 후에 항상 여백이 추가됩니다.</p> + +<p>우리는 {{cssxref("margin")}} 속성을 사용하여 요소의 사방 여백을 한번에 제어할 수 있으며, 마찬가지로 동명의 정식 명칭 속성을 사용하며 각변의 여백을 제어할 수 있습니다.</p> + +<ul> + <li>{{cssxref("margin-top")}}</li> + <li>{{cssxref("margin-right")}}</li> + <li>{{cssxref("margin-bottom")}}</li> + <li>{{cssxref("margin-left")}}</li> +</ul> + +<p><strong>아래 예제에서 여백 값을 변경하여 당 요소와 상위 컨테이너 요소 사이의 여백 생성 또는 공간 제거(음의 여백인 경우)로 인해 상자가 어떻게 밀려나는지 확인하십시오.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin.html", '100%', 1000)}}</p> + +<h4 id="여백_축소">여백 축소</h4> + +<p>여백 이해의 핵심은 여백 축소에 대한 개념입니다. 여백이 서로 맞닿은 두 개의 요소가 있으면 해당 여백은 합쳐져 하나의 여백이 됩니다. 그 중 가장 큰 여백의 크기가 됩니다.</p> + +<p>아래 예제에는 단락 두 개가 있습니다. 상위 단락은 <code>margin-bottom</code> 값이 50픽셀이 주어졌습니다. 두 번째 단락은 <code>margin-top</code> 값이 30픽셀이 주어졌습니다. 전체 여백은 합쳐져 축소되면서 실제 상자 사이 여백은 50픽셀이며, 두 가지 여백을 합계가 되지 않습니다.</p> + +<p><strong>여러분은 2번째 단락의 <code>margin-top</code> 값을 0으로 설정해 이를 시험해 볼 수 있습니다. 두 단락 사이 표시되는 여백은 변경되지 않을 것이며, 첫 번째 단락의 <code>bottom-margin</code>에 설정된 50픽셀은 유지됩니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/margin-collapse.html", '100%', 1000)}}</p> + +<p>여백이 축소될 때와 축소되지 않을 때를 말해주는 여러 가지 규칙이 있습니다. 자세한 내용은 <a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">여백 축소 정복</a>에 대한 자세한 페이지를 참조하십시오. 당장 기억해야 할 주안점은 마진 축소란 것이 벌어지고 있다는 점이다. 여백이 있는 공간을 생성하고도 여러분이 기대하는 만큼의 공간을 얻지 못한다면, 아마도 그것은 여백 축소 현상일 것입니다.</p> + +<h3 id="테두리">테두리</h3> + +<p>테두리는 상자의 여백과 패딩 사이에 그려집니다. 표준 상자 모델을 사용하는 경우 테두리의 크기가 상자의 <code>width</code>과 <code>height</code>에 추가됩니다. 대체 상자 모델을 사용하고 있는 경우, 테두리의 크기는 사용 가능한 <code>width</code>와 <code>height</code>의 일부를 점유함으로 콘텐츠 상자가 더 작아지게 됩니다.</p> + +<p>테두리를 스타일링의 경우 많은 속성이 있습니다. 4개의 테두리, 각 테두리에는 스타일, 너비 및 색상 등 당신이 변경하고 싶을만한 것들이 있습니다.</p> + +<p>당산은 당장에 {{cssxref("border")}} 속성을 사용해 4개의 테두리 스타일과 너비, 색상을 지정할 수 있습니다.</p> + +<p>테두리 사방면에 각각 너비와 색상, 스타일을 설정할 수 있습니다:</p> + +<ul> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-left")}}</li> +</ul> + +<p>테두리 사방면에 색상, 스타일, 너비를 설정하려면 다음과 같이 사용하십시요:</p> + +<ul> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-color")}}</li> +</ul> + +<p>테두리 일방 면만 색상과 스타일, 너비를 설정하려면 세분화된 정식명칙 속성 중의 하나를 사용할 수 있습니다.</p> + +<ul> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-color")}}</li> +</ul> + +<p><strong>아래 예제에서 테두리를 생성하기 위해 다양한 약칭과 정식 명칭을 사용했습니다. 그것들의 작동 방식을 파악하기 위해 서로 다른 속성을 마음대로 부려보십시요. 테두리 속성에 대한 모질라 개발자 네트워크 페이지 페이지는 당신이 선택할 수 있는 다양한 테두리 스타일에 대한 정보를 제공합니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/border.html", '100%', 1000)}}</p> + +<h3 id="패딩">패딩</h3> + +<p>패딩은 테두리와 콘텐츠 영역 사이에 위치합니다. 여백과는 다르게 패딩은 음수의 크기를 가질 수 없어, 그 값은 0 또는 양수 값이여야 합니다. 여러분의 요소에 적용된 배경은 패딩 뒤에 표시됩니다.패딩의 전형적인 용도는 테두리에서 콘텐츠를 밀어내는 겁니다.</p> + +<p>우리는 {{cssxref("padding")}} 속성을 사용하여 요소의 사방면 패딩을 개별적으로 제어할 수 있으며, 마찬가지로 정식 명칭 속성을 사용하며 각변의 패딩을 제어할 수 있습니다.</p> + +<ul> + <li>{{cssxref("padding-top")}}</li> + <li>{{cssxref("padding-right")}}</li> + <li>{{cssxref("padding-bottom")}}</li> + <li>{{cssxref("padding-left")}}</li> +</ul> + +<p><strong>아래 예제에서 <code>.box</code>클래스에 대한 패딩값을 변경하면 상자와 관계하여 텍스트가 시작되는 지점이 달라지는지 볼 수 있습니다.</strong></p> + +<p><strong>여러분은 또한 <code>.container,</code> 클래스에 대한 패딩을 변경하여 컨테이너와 상자 사이 공간을 만들 수 있습니다. 패딩 변경은 모든 요소에 가능하며 테두리와 요소 내부 공간 사이에 공간을 만듭니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/padding.html", '100%', 800)}}</p> + +<h2 id="상자_모델과_인라인_상자">상자 모델과 인라인 상자</h2> + +<p>상술한 모든 내용은 블록 상자에도 100% 적용됩니다. 상술한 속성 중의 일부는 인라인 상자에도 적용할 수 있습니다. 예를 들어 <code><span></code>에 의해 생성된 속성도 그렇습니다.</p> + +<p>아래 예제에 한 단락 내부에 <code><span></code>가 있고 거기에 <code>width</code>와 <code>height</code>, 그리고 <code>margin</code>와 <code>border</code>를 적용했습니다. 여러분이 보시다시피 너비와 높이는 무시됩니다. 여백, 패딩 및 테두리는 존치되지만 다른 콘텐츠와 인라인 상자아의 관계를 변경하지 않으므로 패딩 및 테두리는 단락의 다른 단어와 겹칩니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-box-model.html", '100%', 800)}}</p> + +<h2 id="인라인_블록_디스플레이_사용하기">인라인 블록 디스플레이 사용하기</h2> + +<p><code>inline</code>와 <code>block</code> 사이 중립 지대를 제공하는 <code>display</code> 속성의 하나로 특별한 값이 있습니다. 이 속성은 항목이 새 줄로 넘어가는 행갈이를 원치않지만, <code>width</code>와 <code>height</code>가 존중되고 앞서 보았듯이 겹침 현상을 피하길 원하는 경우에 유용합니다.</p> + +<p><code>display: inline-block</code> 속성이 딸린 요소는 우리가 이미 파악했던 것 블록 요소의 하위 집합입니다.</p> + +<ul> + <li><code>width</code>와 <code>height</code> 속성은 존중됩니다.</li> + <li><code>padding</code>와 <code>margin</code>과 <code>border</code> 속성으로 인해 다른 요소가 상자에서 밀려납니다.</li> +</ul> + +<p>그러나 새 줄로 행갈이를 하지 않고, <code>width</code>와 <code>height</code> 속성을 명시적으로 추가하는 경우에만 해당 요소의 콘텐츠보다 (동 상자가) 더 커질 뿐입니다.</p> + +<p><strong>다음 예제에서 우리는 <code><span></code> 요소에 <code>display: inline-block</code>를 추가했습니다. 스팬 요소 속성을 <code>display: block</code>로 변경하던가 추가했던 라인을 제거한 뒤 디스플레이 모델의 차이를 확인해 보십시요.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block.html", '100%', 800)}}</p> + +<p>여러분이 <code>padding</code>를 추가해 링크에 적중 영역을 확대하길 원하는 경우 이것이 유용할 수 있습니다. <code><a></code>는 <code><span></code>처럼 인라인 요소입니다. 여러분은 해당 요소에 <code>display: inline-block</code>을 사용해 패딩을 설정할 수 있으므로 사용자가 링크를 클릭할 수 있습니다.</p> + +<p>탐색 (메뉴)모음에서 꽤 자주 사용되는 것을 볼겁니다. 아래 탐색 모음은 가변상자를 사용해 행으로 표시되었으며, <code><a></code>를 마우스로 가리킬 때 <code>background-color</code>를 변경할 수 있도록 <code><a></code> 요소에 패딩 추기했습니다. 패딩은 <code><ul></code> 요소의 테두리와 겹치는 것처럼 보입니다. 그렇게 된 까닭은 <code><a></code>가 인라인 요소이기 때문입니다.</p> + +<p><strong><code>.links-list a</code> 선택기에 딸린 규칙에 <code>display: inline-block</code>를 추가하면, 다른 요소에 의한 패딩이 존중되므로 여러분은 이(겹치는) 문제가 해결되는 것을 보게될 것입니다.</strong></p> + +<p>{{EmbedGHLiveSample("css-examples/learn/box-model/inline-block-nav.html", '100%', 600)}}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>박스 모델에 대해 이해해야 할 내용의 대부분입니다. 상자들이 조판에 어떻게 포함된 것인지 혼란스러워지면, 향후 여러분은 이번 단원을 다시 찾게을 수 있습니다.</p> + +<p>다음 단원에서는 <a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경과 테두리</a>를 사용하여 평범한 보이는 상자를 더욱 흥미롭게 보이려면 어떤 방법이 있는지 살펴보겠습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks/Backgrounds_and_borders", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ol> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 나열과 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">씨에스에스 선택기</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">유형과 클레스, 아이디 선택기 selectors</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">딸린 속성 선택기</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">의사 클래스와 의사 요소</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Selectors/Combinators">조합기</a></li> + </ul> + </li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/%EC%83%81%EC%9E%90_%EB%AA%A8%EB%8D%B8">상자 모델</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">서로 다른 텍스트 방향 처리</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Overflowing_content">대열이탈 콘텐츠</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Values_and_units">속성값과 단위</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">씨에스에스 항목 크기 설정</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지와 미디아, 양식 요소</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Styling_tables">테이블 스타일링</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Debugging_CSS">씨에스에스 디버깅</a></li> + <li><a href="/ko/docs/Learn/CSS/Building_blocks/Organizing">씨에스에스 체계화</a></li> +</ol> diff --git a/files/ko/learn/css/building_blocks/선택자/index.html b/files/ko/learn/css/building_blocks/선택자/index.html new file mode 100644 index 0000000000..7674063921 --- /dev/null +++ b/files/ko/learn/css/building_blocks/선택자/index.html @@ -0,0 +1,223 @@ +--- +title: CSS 선택자 +slug: Learn/CSS/Building_blocks/선택자 +translation_of: Learn/CSS/Building_blocks/Selectors +--- +<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div> + +<p class="summary">{{Glossary("CSS")}} 에서, 선택자는 스타일을 지정할 웹 페이지의 {{glossary("HTML")}} 요소를 대상으로 하는 데 사용됩니다. 사용 가능한 다양한 CSS 선택자가 있으며, 스타일을 지정할 요소를 선택할 때 세밀한 정밀도를 허용합니다. 이 기사와 하위 기사에서는 다양한 유형을 자세히 살펴보고 작동 방식을 살펴보겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 CSS 작동 방식에 대한 이해 (<a href="/en-US/docs/Learn/CSS/First_steps">CSS 첫 단계</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 선태자 작동 방식에 대해 자세히 알아보기.</td> + </tr> + </tbody> +</table> + +<h2 id="선택자란_무엇인가">선택자란 무엇인가?</h2> + +<p>이미 선택자 (selector) 를 만났습니다. CSS 선택자는 CSS 규칙의 첫 부분입니다. 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 요소 및 기타 용어의 패턴입니다. 선택자에 의해 선택된 요소들은 <em><strong>선택자의 주제(subject)</strong> </em>로 지칭됩니다.</p> + +<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p> + +<p>이전 기사에서는 몇 가지 다른 선택자를 만났으며 — 예를 들어 <code>h1</code> 과 같은 요소 또는 <code>.special</code> 과 같은 class 를 선택하는 등 다양한 방법으로 문서를 대상으로 하는 선택자가 있다는 것을 배웠습니다.</p> + +<p>CSS 에서, 선택자는 CSS 선택자 사양에 정의되어 있습니다. CSS 의 다른 부분과 마찬가지로 작동하려면, 브라우저에서 지원해야합니다. 당신이 보게 될 대부분의 선택자는 <a href="https://www.w3.org/TR/selectors-3/">Level 3 선택자 사양</a> 에 정의되어 있으므로, 이러한 선택자에 대한 훌륭한 브라우저 지원을 찾을 수 있습니다.</p> + +<h2 id="선택자_목록">선택자 목록</h2> + +<p>동일한 CSS 를 사용하는 항목이 두 개 이상인 경우 규칙이 모든 개별 선택자에 적용되도록 개별 선택자를 <em><strong>선택자 목록</strong> </em>으로 결합할 수 있습니다. 예를 들어, <code>h1</code> 에 대해 동일한 CSS 와 <code>special</code> class 를 사용하면 이것을 두 개의 별도 규칙으로 작성할 수 있습니다.</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +.special { + color: blue; +} </code></pre> + +<p>또한 이들 사이에 쉼표를 추가하여 선택자 목록으로 결합할 수도 있습니다.</p> + +<pre class="brush: css"><code>h1, .special { + color: blue; +} </code></pre> + +<p>공백은 쉼표 앞뒤에 유효합니다. 각 라인이 새 라인에 있으면 선택자를 더 읽기 쉽습니다.</p> + +<pre class="brush: css"><code>h1, +.special { + color: blue; +} </code></pre> + +<p>아래 라이브 예제에서 동일한 선언을 가진 두 선택자를 결합 하십시오. 시각적 디스플레이는 결합 후 동일해야 합니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p> + +<p>이러한 방식으로 선택자를 그룹화할 때, 선택자가 유효하지 않은 경우 전체 규칙이 무시됩니다.</p> + +<p>다음 예에서는, 잘못된 class 선택자 규칙이 무시되고 <code>h1</code> 은 여전히 스타일이 지정됩니다.</p> + +<pre class="brush: css"><code>h1 { + color: blue; +} + +..special { + color: blue; +} </code></pre> + +<p>그러나 결합하면, 전체 규칙이 유효하지 않은 것으로 간주되어 <code>h1</code> 또는 class 가 스타일 지정되지 않습니다.</p> + +<pre class="brush: css"><code>h1, ..special { + color: blue; +} </code></pre> + +<h2 id="선택자의_유형">선택자의 유형</h2> + +<p>선택자에는 몇 가지 그룹이 있으며, 어떤 유형의 선택자가 필요한지 알면 작업에 적합한 도구를 찾는데 도움이 됩니다. 이 기사의 하위 기사에서는 다양한 선택자 그룹을 자세히 살펴 보겠습니다.</p> + +<h3 id="Type_class_및_ID_선택자">Type, class 및 ID 선택자</h3> + +<p>이 그룹에는 <code><h1></code> 과 같은 HTML 요소를 대상으로 하는 선택자가 포함됩니다.</p> + +<pre class="brush: css">h1 { }</pre> + +<p>또한 class 를 대상으로 하는 선택자가 포함됩니다:</p> + +<pre class="brush: css">.box { }</pre> + +<p>또는 ID:</p> + +<pre class="brush: css">#unique { }</pre> + +<h3 id="속성_선택자">속성 선택자</h3> + +<p>이 선택자 그룹은 요소에 특정 속성이 있는지에 따라 요소를 선택하는 다른 방법을 제공합니다:</p> + +<pre class="brush: css">a[title] { }</pre> + +<p>또는 특정 값을 가진 속성의 존재 여부를 기반으로 선택하십시오:</p> + +<pre class="brush: css">a[href="https://example.com"] { }</pre> + +<h3 id="Pseudo-classes_및_pseudo-elements">Pseudo-classes 및 pseudo-elements</h3> + +<p>이 선택자 그룹에는 요소의 특정 상태를 스타일링하는 pseudo-classes 가 포함됩니다. 예를 들어 <code>:hover</code> pseudo-class 는 마우스 포인터에 의해 요소를 가리킬 때만 요소를 선택합니다:</p> + +<pre class="brush: css">a:hover { }</pre> + +<p>또한 요소 자체가 아닌 요소의 특정 부분을 선택하는 pseudo-elements 도 포함됩니다. 예를 들어, <code>::first-line</code> 은 항상 <code><span></code> 이 첫 번째 형식의 라인을 감싸는 것처럼 작동하여, 요소 내부의 첫 번째 텍스트 라인 (아래의 경우 <code><p></code>) 을 선택합니다.</p> + +<pre class="brush: css">p::first-line { }</pre> + +<h3 id="결합자_Combinators">결합자 (Combinators)</h3> + +<p>최종 선택자 그룹은 문서 내의 요소를 대상으로 하기 위해 다른 선택자를 결합합니다. 예를 들어 다음은 자식 결합자 (<code>></code>) 를 사용하여 <code><article></code> 요소의 자식인 단락을 선택합니다:</p> + +<pre class="brush: css">article > p { }</pre> + +<h2 id="다음_단계">다음 단계</h2> + +<p>이 학습 섹션 또는 일반적으로 MDN 에서 다양한 유형의 선택자로 직접 연결되는 링크에 대해서는 아래의 선택자 참조 표를 참고하거나 <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class 및 ID 선택자</a> 에 대해 계속해서 여행을 시작하십시오.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p> + +<h2 id="선택자_참조_표">선택자 참조 표</h2> + +<p>아래 표는 사용 가능한 선택자의 개요와 이 안내서의 페이지에 대한 링크와 함께 각 유형의 선택자 사용법을 보여줍니다. 브라우저 지원 정보를 확인할 수 있는 각 선택자의 MDN 페이지에 대한 링크도 포함되어 있습니다. 이 자료를 나중에 자료에서 선택자를 찾아 보거나, CSS 를 일반적으로 실험할 때 다시 참조할 수 있습니다.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">선택자</th> + <th scope="col">예제</th> + <th scope="col">CSS 자습서 배우기</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type 선택자</a></td> + <td><code>h1 { }</code></td> + <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Universal_selectors">범용 선택자</a></td> + <td><code>* { }</code></td> + <td><a href="/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class 선택자</a></td> + <td><code>.box { }</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/ID_selectors">id 선택자</a></td> + <td><code>#unique { }</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/user:chrisdavidmills/CSS_Learn/CSS_Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">속성 선택자</a></td> + <td><code>a[title] { }</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Attribute_selectors">Attribute selectors</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class 선택자</a></td> + <td><code>p:first-child { }</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element 선택자</a></td> + <td><code>p::first-line { }</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">하위 결합자</a></td> + <td><code>article p</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Child_combinator">자식 결합자</a></td> + <td><code>article > p</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Child_combinator">Child combinator</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">인접 형제 결합자</a></td> + <td><code>h1 + p</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">일반 형제 결합자</a></td> + <td><code>h1 ~ p</code></td> + <td><a href="https://developer.mozilla.org/en-US/docs/User:chrisdavidmills/CSS_Learn/CSS_Selectors/Combinators#General_sibling">General sibling</a></td> + </tr> + </tbody> +</table> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> + <ul> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class 및 ID 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">속성 선택자</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes 및 pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">결합자</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">박스 모델</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">배경 및 테두리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">다른 텍스트 방향 처리</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">콘텐츠 overflow</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">값과 단위</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS 에서 항목 크기 조정</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">이미지, 미디어 및 양식 요소</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">표 스타일링</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a></li> + <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">CSS 정리</a></li> +</ol> diff --git a/files/ko/learn/css/css_layout/flexbox/index.html b/files/ko/learn/css/css_layout/flexbox/index.html new file mode 100644 index 0000000000..72f5d57cf8 --- /dev/null +++ b/files/ko/learn/css/css_layout/flexbox/index.html @@ -0,0 +1,340 @@ +--- +title: Flexbox +slug: Learn/CSS/CSS_layout/Flexbox +tags: + - 문서 + - 안내서 + - 용어집 + - 초보자 + - 코딩스크립팅 + - 학습 +translation_of: Learn/CSS/CSS_layout/Flexbox +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">flexbox는 행과 열 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드입니다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 문서는 근간이 되는 내용 전체를 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹 레이아웃을 생성하기 위해 flexbox 레이아웃 시스템을 사용하는 방법을 학습하기.</td> + </tr> + </tbody> +</table> + +<h2 id="왜_flexbox인가">왜 flexbox인가?</h2> + +<p>오랫동안 CSS 레이아웃을 작성할 수 있는 신뢰할 수 있는 크로스 브라우저 호환 도구는 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a> 및 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a> 도구였습니다. 이것들은 무난하고 작동하지만, 어떤 면에서는 되려 제한적이고 좌절감을 맞보게 합니다.</p> + +<p>다음과 같은 간단한 레이아웃 요구 사항은 그러한 도구를 사용하여 달성하기가 어렵거나 불가능합니다. 또한, 편리하지도 유연한 방식도 못됩니다.</p> + +<ul> + <li>부모 요소 내부에 포함된 블록 콘텐츠를 세로로 중심부에 맞추기.</li> + <li>사용 가능한 너비와 높이에 관계없이 하나의 컨테이너에 포함된 모든 자녀 요소가 주어진 너비와 높이를 똑같은 크기로 점유하기.</li> + <li>다단 레이아웃에 포함된 모든 단이 서로 다른 크기의 콘텐츠를 포함하고 있더라도 동일한 높이로 채택하기.</li> +</ul> + +<p>다음 섹션에서 확인하겠지만, flexbox는 많은 레이아웃 작업을 훨씬 쉽게 만들어 줍니다. 본격적으로 파헤쳐봅시다!</p> + +<h2 id="간단한_예제_소개">간단한 예제 소개</h2> + +<p>이 문서에서 우리는 여러분이 flexbox의 작동 방식을 이해하는데 도움이 되는 일련의 연습을 수행하도록 하겠습니다. 시작하려면, 첫 번째 착수 파일인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>을 우리의 깃허브 저장소에서 사본을 내려받기하여 최신 브라우저(Firefox 또는 Chrome 등)에서 동 파일을 열어 코드 편집기에서 코드를 살펴봐야 합니다. 당신은 그걸 시연한 실제 장면을 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox0.html">여기서도</a> 볼 수 있습니다.</p> + +<p>(편집기로 본) 소스안에 최상위 수준에 {{htmlelement("header")}} 요소와 세 개의 {{htmlelement("article")}}를 포함한 {{htmlelement("section")}} 요소가 있음을 알 수 있습니다. 우리는 이것들을 사용해 상당히 표준적인 삼단 레이아웃을 생성할 겁니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<h2 id="flexbox로_레이아웃할_요소_지정">flexbox로 레이아웃할 요소 지정</h2> + +<p>먼저 어떤 요소들을 flexbox로 레이아웃할 요소를 선택해야 합니다. 이를 위해 영향을 주고 싶은 요소의 부모 요소에 특별한 {{cssxref("display")}} 속성값을 지정합니다. 이 경우 우리는 {{htmlelement("article")}} 요소를 레이아웃하길 원하므로 (flex container가 될) {{htmlelement("section")}}에 해당 속성값을 지정합니다:</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>그 결과는 다음과 같아야 합니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13408/flexbox-example2.png" style="border-style: solid; border-width: 1px; display: block; height: 348px; margin: 0px auto; width: 800px;"></p> + +<p>자. 이 단일 선언이 우리에게 필요한 모든 것을 제공합니다. 놀랍죠, 그쵸? 우리는 단의 크기가 동일한 다단 레이아웃를 갖게 되었고, 단의 높이가 모두 같습니다. 이렇게 된 까닭은 (flex container의 자식인) flex item에 주어진 기본값이 이와 같은 일반적인 문제를 해결하도록 설정되었기 때문입니다. 관련 내용은 나중에 추가합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 인라인 항목을 flexbox로 취급해 레이아웃하길 희망한다면 {{cssxref("display")}} 속성값을 <code>inline-flex</code>로 지정할 수도 있습니다.</p> +</div> + +<h2 id="flex_모델의_측방">flex 모델의 측방</h2> + +<p>요소들을 flexbox로 레이아웃될 때 그 상자들은 두 개의 축을 따라 배치됩니다.</p> + +<p><img alt="flex_terms.png" class="default internal" src="/files/3739/flex_terms.png" style="display: block; margin: 0px auto;"></p> + +<ul> + <li><ruby><strong>기본 축</strong><rp> (</rp><rt>main axis</rt><rp>) </rp></ruby>은 flex item이 배치되고 있는 방향으로 진행하는 축입니다(예: 페이지를 가로지르는 행 또는 페이지 밑으로 쌓이는 열). 이 기본 축의 시작과 끝을 일컬어 <strong>main start</strong>과 <strong>main end</strong>라고 합니다.</li> + <li><ruby><strong>교차축</strong><rp> (</rp><rt>cross axis</rt><rp>) </rp></ruby>은 flex item이 내부에 배치되는 방향에 직각을 이루는 축입니다. 이 축의 시작과 끝을 일컬어 <strong>cross start</strong>과 <strong>cross end</strong>라고 합니다.</li> + <li><code>display: flex</code>이 설정된 부모 요소(우리 예제에서 {{htmlelement("section")}}이 해당)를 일컬어 <ruby><strong>flex container</strong><rp> (</rp><rt>flex container</rt><rp>) </rp></ruby>라고 합니다.</li> + <li>flex container 내부에 flexbox로 레이아웃되는 항목을 일컬어 <ruby><strong>flex item</strong><rp> (</rp><rt>flex items</rt><rp>) </rp></ruby>이라고 합니다(우리 예제에서 {{htmlelement("article")}} 요소가 해당됩니다).</li> +</ul> + +<p>후속 절을 진행할 때 이러한 용어를 명심하길 바랍니다. 사용 중인 어떤 용어에 대해 혼란스러워지면 언제든지 다시 참조할 수 있습니다.</p> + +<h2 id="행_또는_열">행 또는 열?</h2> + +<p>flexbox는 기본 축이 진행되는 방향(자식 flexbox들이 컨테이너 내부에 배치되는 방향)을 지정하는 {{cssxref("flex-direction")}} 속성을 제공합니다. 기본값으로 이것은 <code>row</code>로 설정되어 브라우저의 기본 언어가 작동하는 방향(영어 브라우저의 경우 왼쪽에서 오른쪽)을 따라 일렬로 배치됩니다.</p> + +<p>다음 선언문을 {{htmlelement("section")}} 규칙에 추가하세요:</p> + +<pre class="brush: css">flex-direction: column;</pre> + +<p>이로써 항목 무리를 열 레이아웃으로 되돌려 놓는걸 확인하게 된다. 해당 항목들은 어떤 내용의 CSS를 추가하기 이전 상황과 유사하다. 진도를 더 나가기 전에 동 선언문을 예제에서 삭제하십시오.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 <code>row-reverse</code>와 <code>column-reverse</code> 속성값을 사용하여 역방향으로 배치할 수 있습니다. 이들 값으로도 실험해보십시요!</p> +</div> + +<h2 id="접기">접기</h2> + +<p>당신의 레이아웃에 너비 또는 높이가 고정 크기를 갖고 있어 생기는 한 가지 문제는 결국 flexbox 자식 요소가 컨테이너에서 대열이탈하면서 레이아웃이 깨진다는 것입니다. 우리가 제시하는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox-wrap0.html">flexbox-wrap0.html</a> 예제를 확인하고 난 뒤 <a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox-wrap0.html">라이브 보기</a>를 시도하세요(이 예제를 따라해보고 싶다면 이제 이 파일의 사본을 내려받으세요):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13410/flexbox-example3.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;"></p> + +<p>여기서 우리는 자식들이 정말로 소속 컨테이너에서 이탈하는 모습을 확인할 수 있습니다. 이것을 해소할 수 있는 한 가지 방법은 다음 선언을 {{htmlelement("section")}} 규칙 부분에 추가하면 됩니다:</p> + +<pre class="brush: css">flex-wrap: wrap;</pre> + +<p>또한, 디음 선언문을 {{htmlelement("article")}} 규칙 부분에 추가해보세요:</p> + +<pre class="brush: css">flex: 200px;</pre> + +<p>지금 시도해보십시오. 동 규칙이 포함된 상태에선 레이아웃 모양이 개선되는 걸 보게 됩겁니다:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13412/flexbox-example4.png" style="display: block; height: 646px; margin: 0px auto; width: 800px;">우리는 이제 여러 행을 갖게 되었다. 많은 flexbox 자녀들이 합당하다 싶게 각 행마다 (분배되어) 알맞게 맞춰졌습니다. 대열이탈된 것들은 다음 행으로 넘어갑니다. 아티클 요소에 <code>flex: 200px</code> 선언이 지정되었다는 의미는 각 요소에 적어도 200px 너비가 지정되었다는 의미이다. 우리는 나중에 이 속성에 대해 더 자세히 논의할 겁니다. 마지막 행에 있는 마지막 몇몇 자식들의 각 너비가 더 연장되면서 전체 행이 마찬가지로 채워진 것을 볼 수 있습니다.</p> + +<p>하지만 할 수 있는 게 더 있습니다. 우선, {{cssxref("flex-direction")}} 속성값을 <code>row-reverse</code>로 변경해 보십시오. 이제 여러 행 레이아웃을 보유한 것은 마찬가지지만, 브라우저 창의 반대쪽 구석에서 시작하여 역방향 대열이 된 것이 확인될 겁니다.</p> + +<h2 id="flex-flow_약칭">flex-flow 약칭</h2> + +<p>이 시점에서 {{cssxref("flex-direction")}}와 {{cssxref("flex-wrap")}} — {{cssxref("flex-flow")}}를 대신하는 약칭이 존재한다는 점을 언급할 가치가 있다. 예를 들어, 여러분은 다음을</p> + +<pre class="brush: css">flex-direction: row; +flex-wrap: wrap;</pre> + +<p>다음으로 대체할 수 있다.</p> + +<pre class="brush: css">flex-flow: row wrap;</pre> + +<h2 id="flex_item의_flex_크기_조정">flex item의 flex 크기 조정</h2> + +<p>이제 첫 번째 예제로 복귀해서, 우리가 어떻게 flex item의 비율을 조절할 수 있는지 살펴봅시다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox0.html">flexbox0.html</a>사본을 브라우저 탭으로 열거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flexbox1.html">flexbox1.html</a> 사본을 새로운 출발점으로 삼으세요.(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flexbox1.html">라이브 참조</a>).</p> + +<p>첫째, 당신의 CSS 파일 하단에 다음 규칙을 추가하십시오:</p> + +<pre class="brush: css">article { + flex: 1; +}</pre> + +<p>이것은 각 flex item이 기본 축을 따라 남은 공간을 어느 정도나 점유할지를 결정하는 단위가 없는 비율 값입니다. 이 경우, 우리는 각각의 {{htmlelement("article")}} 요소에 1의 값을 부여하고 있는데, 이는 패딩과 여백이 지정된 이후 남은 여분의 공간을 모두 동등한 크기로 점유하게 된다는 의미입니다. 그것은 비율이며, 각 flex item에 400000의 값을 부여하면 정확히 동일한 효과가 있음을 의미합니다.</p> + +<p>이제 이전 규칙 아래에 다음 규칙을 추가합시다.</p> + +<pre class="brush: css">article:nth-of-type(3) { + flex: 2; +}</pre> + +<p>이제 새로 고침할 때, 세 번째 {{htmlelement("article")}}이 다른 두 개보다 사용 가능한 너비의 두 배나 많이 점유한다는 것을 알 수 있습니다. 말하자면 현재 총 4개의 비례 단위가 있는 겁니다. 처음 두 개의 flex item은 각각 하나로 구분되어 사용 가능한 공간의 1/4을 차지합니다. 세 번째 것은 두 개의 단위(2배율)를 차지하기 때문에 사용 가능한 공간의 2/4를 점유합니다(또는 1/2).</p> + +<p>또한 flex 값 내에서 최소 크기 값을 지정할 수 있습니다. 다음과 같이 문서 부분의 기존 규칙을 업데이트해 보십시오.</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 2 200px; +}</pre> + +<p>이것은 기본적으로 "각 flex item은 먼저 사용 가능한 공간에서 200px를 부여받습니다. 그 후, 나머지 사용 가능한 공간은 비례 단위에 따라 분배됩니다." 새로 고침을 해보면 공간 배분 방식이 달라진 것이 확인될 겁니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13406/flexbox-example1.png" style="border-style: solid; border-width: 1px; display: block; height: 324px; margin: 0px auto; width: 800px;"></p> + +<p>flexbox의 실제 값은 flex성/반응성에 포함되어 있다고 볼 수 있습니다. 다시말해 브라우저 창의 크기를 재조정하거나 다른 {{htmlelement("article")}} 요소를 추가하더라도 레이아웃이 계속 정상적으로 작동합니다.</p> + +<h2 id="flex_약칭_對_정식_명칭">flex: 약칭 對 정식 명칭</h2> + +<p>{{cssxref("flex")}} 최대 세 가지 서로 다른 값을 지정할 수 있는 약칭 속성입니다.</p> + +<ul> + <li>단위없는 비례 값은 우리가 위에서 논의한 바 있습니다. 단위없는 비례 값은 {{cssxref("flex-grow")}}라는 정식 명칭 속성을 사용하여 개별적으로 지정할 수 있습니다.</li> + <li>두 번째 단위없는 비례 값인 {{cssxref("flex-shrink")}}는 flex item이 컨테이너에서 넘칠때(대열이탈) 존재를 드러냅니다. 이 값은 컨테이너 대열이탈을 방지하기 위해 넘치는 양을 각 flex item의 크기에서 어느 정도나 뺏어올지를 지정합니다. 이 값은 꽤 고수준의 flexbox 기능이며, 우리는 이 문서에서는 추가 내용을 다루지 않겠습니다.</li> + <li>위에서 논의했던 최소 크기 값입니다. 최소 크기 값은 {{cssxref("flex-basis")}}라는 정식 명칭 값을 사용하여 개별적으로 지정될 수 있습니다.</li> +</ul> + +<p>우리는 꼭 사용해야 할 경우가 아니라면(예를 들어, 이전 설정을 재정의하는 등) flex 속성에 정식 명칭을 사용하지 말라고 권고합니다. 정식 명칭의 사용은 추가 코드 작성이 많아 질뿐만 아니라 다소 혼란스러울 수도 있습니다.</p> + +<h2 id="수평_및_수직_정렬">수평 및 수직 정렬</h2> + +<p>또한 flexbox 기능을 사용하여 기본 축 또는 교차축을 따라 flex item을 정렬할수 있습니다. 이 기능은 새로운 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/flex-align0.html">flex-align0.html</a>을 통해 살펴보자(<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/flex-align0.html">라이브로도 보세요</a>). flexbox가 우리는 깔끔한 flex형 단추/툴바로 바뀌게될 겁니다. 지금 당장은 몇몇 단추들이 왼쪽 상단 모서리에 몰린 상태의 수평 메뉴 표시줄이 보입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13414/flexbox-example5.png" style="display: block; height: 77px; margin: 0px auto; width: 600px;"></p> + +<p>우선 이 예제의 사본을 취득합니다.</p> + +<p>이제 예제의 CSS의 맨 아래에 다음 내용을 추가하세요:</p> + +<pre class="brush: css">div { + display: flex; + align-items: center; + justify-content: space-around; +}</pre> + +<p>페이지를 새로 고치면 단추가 수평 및 수직으로 중심이 잘 맞춰져 있음을 알 수 있습니다. 우리는 두 가지 새로운 속성을 통해 이 작업을 수행했습니다.</p> + +<p>{{cssxref("align-items")}} 속성은 flex item이 교차축 어디에 놓일 지를 제어합니다.</p> + +<ul> + <li>이 속성값은 기본값으로 <code>stretch</code>입니다. 이 값은 교차축 방향으로 부모 요소를 채우기 위해 모든 flex item을 연장합니다. 부모가 교차 축 방향으로 고정폭이 주어지지 않았다면 모든 flex item이 최장 항목만큼 길어집니다. 이런 방식으로 우리의 첫 번째 예제가 기본값으로 같은 높이의 열을 얻게 된 것입니다.</li> + <li>우리가 위의 코드에서 사용한 <code>center</code> 값은 항목 무리가 자기들 고유의 면적를 유지하는 동시에 교차축을 따라 중심에 놓이게 만듭니다. 그런 까닭에 현재 예제 속 단추가 수직으로 중심에 놓여있습니다.</li> + <li>또한 교차축의 시작과 끝에 맞춰 모든 항목을 정렬하게 해주는 <code>flex-start</code>와 <code>flex-end</code>와 같은 값도 가질 수 있습니다. 자세한 내용은 {{cssxref("align-items")}}을 참조하십시오.</li> +</ul> + +<p>{{cssxref("align-self")}} 속성을 단추에 적용함으로써 flex item에 속한 개별 항목에 대한 {{cssxref("align-items")}}동작을 재지정할 수 있습니다. 예를 들어 다음을 CSS에 추가해보세요:</p> + +<pre class="brush: css">button:first-child { + align-self: flex-end; +}</pre> + +<p>이것이 어떤 효과를 미치는지 한번 보고, 다 보았다면 다시 제거하세요.</p> + +<p>{{cssxref("justify-content")}}는 flex item 무리가 기본 축 상 어디에 놓이는지를 제어합니다.</p> + +<ul> + <li>기본값은 <code>flex-start</code>이며, 이는 모든 항목이 기본 축의 시작 부분에 놓이도록 만듭니다.</li> + <li>당신은 <code>flex-end</code>를 사용하여 항목 무리를 기본 축의 가장자리에 놓이도록 만들 수도 있습니다.</li> + <li><code>center</code>는 <code>justify-content</code>를 대체할 수 있는 값으로 flex item 무리를 기본 축의 중심에 놓이도록 만들겁니다.</li> + <li>우리가 위에서 사용했던 값인 <code>space-around</code>는 유용합니다. 모든 항목을 기본 축을 따라 고르게 분배하고 양쪽 끝에 약간의 공간도 남겨 놓습니다.</li> + <li>그 외에도 <code>space-between</code>이라는 값도 있습니다. 이는 <code>space-around</code>와 매우 흡사하다. 다만 이것은 양쪽 끝에 공간을 남기지 않습니다.</li> +</ul> + +<p>우리는 진도를 더 나가기 전에 여러분이 이들 값을 가지고 어떻게 작동하는지 시험해보라고 권장하고 싶습니다.</p> + +<h2 id="flex_item_순서_정하기">flex item 순서 정하기</h2> + +<p>flexbox에는 소스 순서에 영향을 미치지 않고 flex item의 레이아웃 순서를 변경하는 기능도 있습니다. 이는 전통적인 레이아웃 메서드로는 불가능했던 내용입니다.</p> + +<p>이를 위한 코드는 간단합니다: 당신의 단추표시줄 예제 코도에 다음과 같은 CSS를 추가해 보십시요:</p> + +<pre class="brush: css">button:first-child { + order: 1; +}</pre> + +<p>페이지를 새로 고치면 이제 "스마일" 단추가 기본 축의 끝으로 이동한 것이 확인될 겁니다. 어떻게 이런 식으로 작동하는지 좀 더 상세히 얘기해 보겠습니다:</p> + +<ul> + <li>기본값으로 모든 flex item들은 {{cssxref("order")}} 값이 0입니다.</li> + <li>순위값이 높은 flex item들은 디스플레이 순서상 순위값이 낮은 항목들보다 나중에 나타납니다.</li> + <li>순위값이 동일한 항목들은 소스 순서대로 나타납니다. 따라서 4개 항목의 순서값이 각기 2, 1, 1, 0로 설정된 경우 표시 순서는 제4, 제2, 제3, 제1 순이 됩니다.</li> + <li>제 3항목은 동일한 순서값을 가지고 있지만, 소스 순서 상 제 2항목 뒤에 있기 때문에 제 2 항목 뒤에 나타납니다.</li> +</ul> + +<p>당신은 0 지정 항목보다 일찍 항목을 표시하도록 음수 순서 값을 설정할 수 있습니다. 예를 들어, 다음 규칙을 사용하여 "Blush" 단추를 기본 축의 시작 부분에 표시할 수 있습니다:</p> + +<pre class="brush: css">button:last-child { + order: -1; +}</pre> + +<h2 id="중첩된_flexbox_box">중첩된 flexbox box</h2> + +<p>flexbox를 사용하여 꽤 복잡한 레이아웃을 만들 수 있습니다. flex item을 flex container로 설정해도 전혀 문제없습니다. 그렇게 되면 그 컨테이너의 자녀가 flexbox처럼 배치됩니다. <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/flexbox/complex-flexbox.html">complex-flexbox.html</a>를 찾아보세요. (<a href="http://mdn.github.io/learning-area/css/css-layout/flexbox/complex-flexbox.html">라이브로도 보세요</a>).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13418/flexbox-example7.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<p>이를 위한 HTML은 상당히 간단합니다. 세 개의 {{htmlelement("article")}}를 포함하는 {{htmlelement("section")}} 요소가 있습니다. 세 번째 {{htmlelement("article")}}은 세 개의 {{htmlelement("div")}}를 포함하고 있습니다. :</p> + +<pre>section - article + article + article - div - button + div button + div button + button + button</pre> + +<p>앞의 레이아웃에 사용했던 코드를 살펴봅시다.</p> + +<p>먼저 {{htmlelement("section")}}의 자식들을 flexbox로 취급해 배치하였습니다.</p> + +<pre class="brush: css">section { + display: flex; +}</pre> + +<p>다음으로 {{htmlelement("article")}} 무리 자체에 대해 약간의 flex 값을 설정하였습니다. 여기서 두 번째 규칙에 주목하십시오. 우리는 세 번째 {{htmlelement("article")}}이 자기 자식들을 flex item처럼 배치하도록 설정하고 있습니다. 그러나 이번에는 열처럼 배치하고 있습니다.</p> + +<pre class="brush: css">article { + flex: 1 200px; +} + +article:nth-of-type(3) { + flex: 3 200px; + display: flex; + flex-flow: column; +} +</pre> + +<p>다음으로 첫 번째 {{htmlelement("div")}}를 선택합니다. 우리는 먼저 선택된 요소에 100px의 최소 높이를 효과적으로 주기 위해 <code>flex:1 100px;</code>을 사용합니다. 그리고 나서 우리는 그것의 자식들을 ({{htmlelement("button")}} 요소 무리를) flex item처럼 배치하도록 설정했습니다. 여기서 우리는 그것들을 줄 바꿈 행에 배치하고, 우리가 앞서 본 개별 단추 예제에서 했던 것처럼 사용 가능한 공간의 중심에 정렬합니다.</p> + +<pre class="brush: css">article:nth-of-type(3) div:first-child { + flex:1 100px; + display: flex; + flex-flow: row wrap; + align-items: center; + justify-content: space-around; +}</pre> + +<p>마지막으로, 우리는 단추에 약간의 크기를 설정하되, 다소 흥미롭게도 1 auto라는 flex 값을 부여합니다. 이것은 매우 흥미로운 효과를 지니게 되는데, 브라우저 창의 폭을 조정해 보면 확인됩니다. 단추는 최대한의 공간을 점유할 뿐만아니라 동일 선상에 가능한 한 많은 요소를 놓으려고 합니다. 그러나 해당 요소들이 더 이상 동일 선상에 안착할 수 없을 경우 새로운 라인으로 밀려납니다.</p> + +<pre class="brush: css">button { + flex: 1 auto; + margin: 5px; + font-size: 18px; + line-height: 1.5; +}</pre> + +<h2 id="크로스_브라우저_호환성">크로스 브라우저 호환성</h2> + +<p>flexbox 지원은 파이어폭스, 크롬, 오페라, 마이크로소프트 에지 및 인터넷 익스플로러 11, 안드로이드 및 iOS 최신 버전 등 대부분의 신형 브라우저에서 사용할 수 있습니다. 그러나 flexbox를 지원하지 않는 (또는 지원하지만, 실제로 구식 버전의 flexbox를 지원하는) 구형 브라우저 사용자가 여전히 존재한다는 것을 알아야 합니다.</p> + +<p>여러분이 단지 기술을 익히고 실험할 뿐이라면 호환성 문제는 그다지 중요하지 않습니다; 그러나 만약 여러분이 실제 웹사이트에서 flexbox의 사용을 고려하고 있다면, 여러분은 (구형 브라우저에서) 테스트를 수행해야 하고, 최대한 다양한 브라우저 사용자들이 수용할만한 사이트 방문 경험을 보장할 필요가 있습니다.</p> + +<p>flexbox는 몇몇 CSS 기능보다 다소 까다롭습니다. 예를 들어 브라우저에 CSS 그림자 기능이 빠진 경우 해당 사이트을 여전히 사용할 수 있습니다. 그러나 flexbox 기능을 지원하지 않을 경우 레이아웃이 완전히 깨져서 사용할 수 없게 됩니다.</p> + +<p><a href="/ko/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단원에서 크로스 브라우저 지원 문제를 극복하기 위한 전략에 대해 논의합니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이로써 flexbox의 기본 안내서를 마감합니다. 재미있는 경험이었기 바라며, 당신이 학습 진도를 더해 갈수록 flexbox를 자유자제로 다룰 수 있게 될 겁니다. 다음으로 CSS 레이아웃의 또 다른 중요한 측면인 CSS grid를 살펴볼 것입니다.</p> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout")}}</div> + +<div> +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> +</div> diff --git a/files/ko/learn/css/css_layout/floats/index.html b/files/ko/learn/css/css_layout/floats/index.html new file mode 100644 index 0000000000..0ee594b2eb --- /dev/null +++ b/files/ko/learn/css/css_layout/floats/index.html @@ -0,0 +1,517 @@ +--- +title: Floats +slug: Learn/CSS/CSS_layout/Floats +tags: + - 다단 + - 안내서 + - 정리 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Floats +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">원래 텍스트 블록 내에서 float 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. flexbox와 grid의 출현과 함께 float 속성은 이 문서에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>웹페이지상에 float 기능을 생성하는 방법과 clear 속성과 floats clearing 을 배웁니다.</td> + </tr> + </tbody> +</table> + +<h2 id="floats의_배경">floats의 배경</h2> + +<p>float 속성은 웹 개발자가 텍스트 열 내부에 float하는 이미지를 포함하고, 아울러 해당 이미지의 좌측 우측 주변으로 텍스트를 둘러싸는 간단한 레이아웃을 구현할 수 있도록 도입되었습니다. 이런 것은 신문 레이아웃에서 볼 수 있는 종류입니다.</p> + +<p>그러나 웹 개발자들은 이미지뿐만 아니라 무엇이든 float할 수 있음을 빠르게 깨달았고, 그래서 floats 사용이 확대되었습니다. 앞서 살펴본 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Pseudo-classes_and_pseudo-elements#Active_learning_A_fancy_paragraph">고급 단락 예제</a>는 재미있는 드롭캡 효과를 생성하는 데 floats를 어떻게 사용할 수 있는지를 보여줍니다.</p> + +<p>floats는 일반적으로 상대 요소와 나란히 놓이도록 float(浮動)하는 다단 정보를 갖춘 웹 사이트의 전체 레이아웃을 만들는데 널리 사용되어 왔다(기본 행동은 다단 무리가 소스에서 보이는 순서와 같은 순서대로 상대 요소 아래에 자리잡기하는 것이다). 더 새롭고 더 나은 레이아웃 기술이 나와있으므로 이러한 방식으로 floats를 사용하는 것은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">낡은 기술</a>로 간주되어야 합니다.</p> + +<p>이 문서에서는 floats의 적절한 용도에 집중할 것입니다.</p> + +<h2 id="간단한_float_예제">간단한 float 예제</h2> + +<p>floats를 어떻게 사용하는지 알아보자. 우리는 요소 주위에 텍스트 블록을 float하는 것이 포함된 아주 간단한 예제로 시작할 것입니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>첫째, 간단한 HTML로 시작하겠습니다. HTML body 부분에 다음 내용을 추가하고, body 안에 있었던 모든 내용을 제거합니다.</p> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p> + +<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></pre> + +<p>이제 다음 CSS를 HTML에 적용하십시요.({{htmlelement("style")}} 요소를 사용할지 개별 <code>.css</code> 파일에 대한 {{htmlelement("link")}}를 사용할지는 당신의 선택 여하에 달려있습니다.):</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>지금 저장하고 새로 고침하면, 여러분이 기대한 것과 비슷한 것을 보게 될 것입니다. 다시말해 일반 대열에 속한 상자는 텍스트 위에 위치를 잡고 있습니다. 텍스트가 상자 주변에 float하려면 아래에서 보듯 <code>.box</code> 규칙에 두 가지 속성을 추가하십시요.</p> + +<pre class="brush: css">.box { + float: left; + margin-right: 15px; + width: 150px; + height: 100px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +}</pre> + +<p>이제 저장하고 새로 고침하면 다음과 같은 것을 볼 수 있습니다.</p> + +<div id="부동_1"> +<div class="hidden"> +<h6 id="float_예제_1">float 예제 1</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin-right: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_1', '100%', 500) }}</p> + +<p>이제 floats가 어떻게 작동하는지 생각해 봅시다. floats로 설정된 대상 요소(이 경우 {{htmlelement("div")}} 요소)는 문서의 일반 레이아웃 대열에서 들어내어 부모 콘테이너(이 경우는 {{htmlelement("body")}})의 왼편에 고정되어 있습니다. 일반 레이아웃 대열에서 float 요소 아래에 오는 모든 콘텐츠는 이제 그 주변을 감싸게 되며, 애초 해당 float 요소가 있던 상층부를 포함해 오른쪽으로 공간을 차지합니다. 거기서 멈추게 됩니다.</p> + +<p>콘텐츠를 오른쪽으로 float하는 것은 정확히 같은 효과를 가져 오지만, float 요소는 역으로 오른쪽에 고정되고 컨텐츠는 float 요소의 왼쪽 주변을 둘러싸게 됩니다. 직전 CSS 규칙 집합에서 float 값을 <code>right</code>로 변경하고 {{cssxref("margin-right")}}를 {{cssxref("margin-left")}}로 대체해 그 결과가 무엇인지 확인하십시오.</p> + +<p>텍스트를 밀어내도록 float에 여백을 추가할 수 있지만, float 로부터 텍스트를 이동시키기 위해 텍스트에 여백을 추가할 수는 없습니다. 왜 그런가하면 float 요소가 일반 대열에서 이탈된 상태이고, 후속 항목에 속한 상자 무리가 실제로 동 float 의 뒤에 나열되기 때문입니다. 당신의 예제에 일부 내용을 변경해보면 그점을 증명할 수 있습니다.</p> + +<p>float 상자의 바로 뒤에 있는 텍스트 형태의 첫 번째 단락에 <code>special</code> 클래스를 추가하십시요. 그 다음에 당신의 CSS에 다음 규칙을 추가합니다. 이들 규칙에 따라 당신의 후속 단락에는 배경색이 주어집니다.</p> + +<pre class="brush: css">.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> + +<p>해당 효과를 쉽게 확인해보려면 float에 대한 <code>margin-right</code>를 <code>margin</code>으로 대체하여 float의 주변 전체에 공간을 확보하십시오. 아래 예제에서와 같이 단락의 배경이 float 상자 바로 아래에서 펼쳐지는 것을 확인할 수 있습니다.</p> + +<div id="부동_2"> +<div class="hidden"> +<h6 id="float_예제_2">float 예제 2</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p class="special">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.special { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_2', '100%', 500) }}</p> + +<p>우리의 후속 요소에 속한 라인 상자가 짧아져서 텍스트가 floats 주위로 펼쳐지고 있지만, floats가 일반 대열에서 제거되었기 때문에 단락 주변 상자는 여전히 전체 너비로 유지하고 있습니다.</p> + +<h2 id="floats_정리하기">floats 정리하기</h2> + +<p>우리는 float가 일반 대열에서 제거되고 다른 요소가 그 옆에 표시되는 것을 보았습니다. 따라서 후속 요소가 치고 올라오는 것을 막으려면 그것을 정리해야 합니다. 그것은 {{cssxref("clear")}} 속성으로 달성됩니다.</p> + +<p>이전 예제에서 당신이 사용한 HTML에서 float 항목 아래에 위치한 두 번째 단락에 <code>cleared</code> 클래스를 추가하십시요. 그 뒤 당신의 CSS에 다음 내용을 추가하세요.</p> + +<pre class="brush: css">.cleared { + clear: left; +} +</pre> + +<div id="부동_3"> +<div class="hidden"> +<h6 id="float_예제_3">float 예제 3</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> + +<div class="box">float</div> + +<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_3', '100%', 600) }}</p> + +<p>다음 단락은 float 요소를 clear 하며, 더 이상 그 옆에 부상하지 않음을 알아야 합니다. <code>clear</code> 속성은 다음과 같은 값을 받아들입니다:</p> + +<ul> + <li><code>left</code>: 왼쪽에 부상한 항목들 clear</li> + <li><code>right</code>: 오른쪽에 부상한 항목들 clear</li> + <li><code>both</code>: 왼쪽 오른쪽 관계 없이 부상한 항목들 clear</li> +</ul> + +<h2 id="floats_주변을_둘러싼_상자_정리하기">floats 주변을 둘러싼 상자 정리하기</h2> + +<p>이제 당신은 float 요소를 후속하는 무언가를 정리하는 방법을 알고 있지만, 장신 floats와 단신 단락이 있고 두 요소 주변을 둘러싼 하나의 상자가 있을 경우에는 어떤 일이 일어나는지 살펴보십시요. 첫 단락과 우리의 float 상자가 <code>wrapper</code> 클래스에 해당하는 {{htmlelement("div")}} 요소로 둘러싸지도록 문서를 변경하십시오.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p> +</div> +</pre> + +<p>당신의 CSS에 <code>.wrapper</code> 클래스에 대해 다음 규칙을 추가한 뒤 페이지를 새로 고침하십시오.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +}</pre> + +<p>원형 <code>.cleared</code> 클래스에 추가된 것입니다.</p> + +<pre class="brush: css" id="ct-0">.cleared { + clear: left; +}</pre> + +<p>여러분이 보게 될 것은 문단에 배경 이미지를 놓는 예제에서와 비슷하게 배경색이 floats 뒤에서 펼쳐지고 있습니다.</p> + +<div id="부동_4"> +<div class="hidden"> +<h6 id="float_예제_4">float 예제 4</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> + +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.cleared { + clear: left; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_4', '100%', 600) }}</p> + +<p>반복되는 얘기지만, 이렇게 된 까닭은 floats가 정상 대열에서 제거되었기 때문입니다. 후속 요소를 정리해도 이럴 때는 상자 정리 문제에 도움이 되지 않습니다. 즉 상자의 밑단이 float 항목을 애워싸고, 짧은 컨텐츠라도 동 컨텐츠를 애워싸길 원할 경우에는 도움이 되질 않습니다. 이를 처리하려면 생각할 수 있는 세 가지 방법이 있는데, 그 중 두 가지 방법은 모든 브라우저에서 작동하지만, 약간 땜질식이며, 세 번째 새로운 방법은 이런 상황을 제대로 처리합니다.</p> + +<h3 id="The_clearfix_hack">The clearfix hack</h3> + +<p>이 상황을 처리하는 전통적인 방법은 "clearfix hack"이라고 알려진 내용을 사용하는 것입니다. 여기에는 floats와 그걸 둘러싼 콘텐츠가 들어 있는 상자 뒤에 일부 생성된 콘텐츠를 삽입하고, 그것에 (좌측 우측 관계없는) <code>clear: both;</code>를 설정하는 것을 말합니다.</p> + +<p>우리의 예제에 다음과 같은 CSS를 추가하세요.</p> + +<pre class="brush: css">.wrapper::after { + content: ""; + clear: both; + display: block; +}</pre> + +<p>이제 페이지를 새로고침하면 상자가 지워집니다. 이것은 본질적으로 항목 아래에 <code><div></code>와 같은 HTML 요소를 추가하고, 거기에 <code>clear: both</code>를 설정한 것과 같습니다.</p> + +<div id="부동_5"> +<div class="hidden"> +<h6 id="float_예제_5">float 예제 5</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + +.wrapper::after { + content: ""; + clear: both; + display: block; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_5', '100%', 600) }}</p> + +<h3 id="overflow_사용">overflow 사용</h3> + +<p>다른 대안으로는 <code>.wrapper</code> 클래스에 {{cssxref("overflow")}} 속성을 <code>visible</code> 이 외의 값으로 설정하는 방법이 있습니다.</p> + +<p>이전 섹션에서 추가한 clearfix CSS 부분을 제거하고 그 대신 <code>.wrapper</code> 클래스에 대한 CSS 규칙에 <code>overflow: auto</code>를 추가합니다. 반복되는 얘기지만, 상자가 정리되었을 겁니다.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +}</pre> + +<div id="부동_6"> +<div class="hidden"> +<h6 id="float_예제_6">float 예제 6</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + overflow: auto; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_6', '100%', 600) }}</p> + +<p>이 예는 <strong>block formatting context</strong>라고(블록 서식 상황) 알려진 것을 생성하여 처리합니다. 이것은 당신의 페이제 내부 미니 레이아웃과도 같습니다. 그 안에 모든 것이 포함되어 있으므로 우리의 float 요소는 블록 서식 상황 내부에 포함되어 있으며 배경은 두 개 항목 뒤에 펼쳐집니다. 그러나 어떤 경우에는 overflow 사용에 따른 의도하지 않은 결과 때문에 원치 않는 스크롤 막대나 잘린 그림자가 발견될 수 있습니다.</p> + +<h3 id="display_flow-root">display: flow-root</h3> + +<p>이 문제를 해결하는 현대적인 방식은 <code>display</code> 속성에서 <code>flow-root</code>값을 사용하는 방법입니다. 이것은 임시방편을 사용하지 않고 블록 서식 상황을 생성하기 위해만 존재합니다. 이를 사용할 때 의도하지 않은 결과는 없습니다. 당신의 <code>.wrapper</code> 규칙에서 <code>overflow: auto</code>를 제거하고 <code>display: flow-root</code>를 추가합니다. 당신이 이 기능을 지원하는 브라우저가 있다는 가정 하에 상자가 정리될 것입니다.</p> + +<pre class="brush: css">.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +}</pre> + +<div id="부동_7"> +<div class="hidden"> +<h6 id="float_예제_7">float 예제 7</h6> + +<pre class="brush: html"><h1>간단한 float 예제</h1> +<div class="wrapper"> + <div class="box">float</div> + + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. </p> +</div> +<p class="cleared">Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> </pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; + font: .9em/1.2 Arial, Helvetica, sans-serif +} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + color: #fff; + display: flow-root; +} + +.box { + float: left; + margin: 15px; + width: 150px; + height: 150px; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('float_7', '100%', 600) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>당신은 현대적인 웹 개발에서 floats에 대해 알아야 할 것은 이제 모두 알게 되었습니다. 과거에 어떤 식으로 사용되었는지에 관한 정보에 대해선 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 문서를 보십시요. 오래된 프로젝드에 몸 담을 일이 생긴다면 유용할 수도 있습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">grid</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/grids/index.html b/files/ko/learn/css/css_layout/grids/index.html new file mode 100644 index 0000000000..6e4b7403f5 --- /dev/null +++ b/files/ko/learn/css/css_layout/grids/index.html @@ -0,0 +1,711 @@ +--- +title: 그리드 +slug: Learn/CSS/CSS_layout/Grids +tags: + - 그리드 + - 그리드 레이아웃 + - 씨에스에스 + - 아티클 + - 안내서 + - 자습서 + - 초보자 + - 코딩스크립팅 + - 학습 +translation_of: Learn/CSS/CSS_layout/Grids +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS 그리드 레이아웃은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>그리드 레이아웃 시스템의 근간 개념과 그리드 레이아웃 구현 방법 이해하기</td> + </tr> + </tbody> +</table> + +<h2 id="그리드_레이아웃이란_무엇인가">그리드 레이아웃이란 무엇인가?</h2> + +<p>그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 있는 대상 패턴을 생성한다. 이 디자인은 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다.</p> + +<p>하나의 그리드은 대게 <strong>columns</strong>, <strong>rows</strong>로 구성되며, 각 행과 열 사이에 공백이 있는데, 대게는 이를 일컬어 <strong>gutters</strong>라고 부른다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13899/grid.png" style="display: block; height: 553px; margin: 0px auto; width: 1196px;"></p> + +<h2 id="CSS에서_그리드_생성하기">CSS에서 그리드 생성하기</h2> + +<p>당신의 디자인에 필요한 그리드를 결정했다면 해당 CSS 그리드 레이아웃을 생성하고 그 위에 항목을 올려놓기 위해 CSS 그리드 레이아웃을 사용할 수 있습니다. 우리는 먼저 그리드 레이아웃의 기본 기능을 살펴보고 난 뒤 당신의 프로젝트에 맞는 간단한 그리드 시스템을 생성하는 방법을 살펴보겠습니다.</p> + +<h3 id="그리드의_정의">그리드의 정의</h3> + +<p>본격적인 출발에 앞서 텍스트 편집기 및 브라우저 상에서 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/0-starting-point.html">시작 파일</a>을 다운로드하고 엽니다(<a href="https://mdn.github.io/learning-area/css/css-layout/grids/0-starting-point.html">여기에서 라이브로 볼 수도 있습니다</a>). 예를 들어, 당신은 일부 자식 항목이 있는 컨테이너 예제를 보게됩니다. 기본값으로 이들은 일반 대열로 표시되므로 상자들은 다른 대상 요소 바로 밑에 표시됩니다. 우리는 이 단원의 첫 번째 부분은 이 (시작) 파일을 가지고 작업할 것이며, 거기에 변경을 더해 그리드가 어떻게 동작하는지 확인하게 됩니다.</p> + +<p>{{cssxref("display")}} 속성에 <code>grid</code> 값을 사용해 그리드를 규정한다. 이로써 Flexbox와 마찬가지로 그리드 레이아웃으로 전환하며, 컨테이너의 직계 자식 전체가 그리드 아이템이 됩니다. 내려받은 시작 파일 내부 CSS 부분에 다음을 추가하세요:</p> + +<pre class="brush: css">.container { + display: grid; +}</pre> + +<p>가변상자와 달리 항목 무리는 즉각적으로 모양이 달리지지 않는다. <code>display: grid</code> 선언으로 열 그리드 하나가 당신에게 주어지며, 따라서 당신의 항목들은 일반 대열 속 행동 방식처럼 다른 대상 요소 바로 밑에 계속 표시된다.</p> + +<p>그리드 같은 모양세를 확인하려면 그리드에 몇 개의 열을 추가할 필요가 있다. 여기에 200픽셀 칼럼 3개를 추가해봅시다. 길이 단위나 백분율을 사용하여 그러한 열 트랙을 만들 수 있습니다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +}</pre> + +<p>CSS 규칙에 제2 선언을 추가한 다음 페이지를 다시 로드하면 생성된 그리드의 각 셀 안으로 그리드 항목 무리가 하나씩 재배열되는 것이 확인될 것이다.</p> + +<div id="격자_1"> +<div class="hidden"> +<h6 id="간단한_그리드_예제">간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> </pre> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 200px 200px 200px; +} </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_1', '100%', 400) }}</p> + +<h3 id="fr_단위를_포함한_가변_그리드">fr 단위를 포함한 가변 그리드</h3> + +<p>길이와 백분율을 사용하여 그리드를 생성하는 것 외에도 <strong><code>fr</code></strong> 단위를 사용하여 그리드 행과 열을 가변적으로 조정할 수 있다. 동 단위는 그리드 컨테이너 내부에 사용 가능한 공간에서 한 개의 분할 부분과 같다.</p> + +<p>트랙 목록을 다음과 같이 정의로 변경하여, 세 개의 <code>1fr</code> 트랙을 생성한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +}</pre> + +<p>이제 가변 트랙을 보유했다는 것이 확인될 것이다. <code>fr</code> 단위는 공간을 균등하게 분배하므로 예를 들어 다음과 같이 규정을 변경할 경우 트랙에 서로 다른 값을 부여할 수 있다:</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +}</pre> + +<p>첫 번째 트랙은 이제 사용 가능한 공간의 2fr을 얻고 다른 두 트랙은 1fr을 얻음으로써 첫 번째 트랙을 더 크게 만듭니다. <code>fr</code> 단위와 고정 길이 트랙을 혼합할 수 있습니다. 이러한 경우 고정 트랙들에 필요한 공간이 제외한 이후에 해당 공간이 다른 트랙에 분배됩니다.</p> + +<div id="격자_2"> +<div class="hidden"> +<h6 id="fr_단위를_포함하는_그리드_예제">fr 단위를 포함하는 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>Seven</div> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_2', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: <code>fr</code> 단위는 <em>전체</em> 공간이 아닌 <em>이용 가능한</em> 공간을 분배한다. 따라서 당신의 트랙 중 하나가 자기 내부에 뭔가 큰 공간을 차지한다면 공유할 수 있는 여유 공간이 줄어들 것이다.</p> +</div> + +<h3 id="트랙사이_간격">트랙사이 간격</h3> + +<p>우리가 트랙사이 간격을 생성하려면 열 사이 간격에 대해선 {{cssxref("grid-column-gap")}} 속성을 사용하고, 행 사이 간격에 대해선 {{cssxref("grid-row-gap")}}를 사용하고, 단번에 둘 다 설정하려면 {{cssxref("grid-gap")}}를 사용한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} +</pre> + +<p>이러한 간격은 길이 단위 또는 백분율이 될 수 있지만, <code>fr</code> 단위는 될 수 없습니다.</p> + +<div id="격자_3"> +<div class="hidden"> +<h6 id="fr_단위를_사용하는_간단한_그리드_예제">fr 단위를 사용하는 간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_3', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: <code>*gap</code> 속성은 예전에는 <code>grid-</code> 접두사를 사용하곤 했지만, 해당 CSS 규격은 변경되었다. 당시는 그들 속성을 여러 레이아웃 메서드 상에서 사용할 수 있게 하자는 취지였다. 현재 마이크로소프트 에지와 파이어폭스는 해당(grid-) 접두사가 없는 버전을 지원하며 접두사 버전은 별칭으로 유지되므로 한동안 사용하는 데 지장이 없을 것이다. 당신이 안전한 쪽을 택하려면 완전 무결한 코드를 담보하기 위해 두 가지 속성을 이중으로 추가할 수 있다.</p> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: 2fr 1fr 1fr; + grid-gap: 20px; + gap: 20px; +}</pre> + +<h3 id="트랙_목록의_반복">트랙 목록의 반복</h3> + +<p>반복 표기법을 사용하여 당신의 트랙 목록의 전체 또는 한 섹션을 반복할 수 있다. 트랙 목록을 다음 항목으로 변경하라.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 20px; +}</pre> + +<p>이제 당신은 이전과 마찬가지로 3개의 1fr 트랙을 얻을 수 있다. 반복 함수에 전달되는 첫 번째 값은 당신이 원하는 트랙 목록의 반복 횟수가 되며, 두 번째 값은 하나의 트랙 목록이며, 이는 당신이 반복되길 원하는 일개 트랙 또는 여러 트랙이 될 수도 있다.</p> + +<h3 id="암시적_그리드와_명시적_그리드">암시적 그리드와 명시적 그리드</h3> + +<p>지금까지는 열 트랙만 지정했지만, 콘텐츠를 저장하기 위해 행도 만들어지고 있다. 이것은 명시적 그리드 대항 암시적 그리드의 한 예다. 명시적 그리드는 당신이 <code>grid-template-columns</code> 또는 <code>grid-template-rows</code>를 사용하여 생성하는 것을 말한다. 암시적 그리드가 생성되는 시점은 콘텐츠가 해당 그리드 외부에 배치될 때이다. 예를 들어 콘텐츠가 행렬 내부에 진입할 시점이 된다. 명시적 및 암시적 그리드는 가변상자의 주축 및 교차축과 유사하다.</p> + +<p>기본값으로 암시적 그리드 상에 생성된 트랙은 <code>auto</code> 크기로 되며, 이는 일반적으로 콘텐츠를 알맞게 들여놓기에 충분히 크다는 것을 의미한다. 당신이 암시적 그리드 트랙에 크기를 지정하려면 {{cssxref("grid-auto-rows")}}와 {{cssxref("grid-auto-columns")}} 속성을 사용할 수 있다. 당신의 작업 CSS에 <code>100px</code>값을 <code>grid-auto-rows</code>에 추가하게 되면 생성된 행이 이제 100 픽셀 높이가 되는 걸 보게 된다.</p> + +<div id="격자_4"> +<div class="hidden"> +<h6 id="fr_단위를_사용하는_간단한_그리드_예제_2">fr 단위를 사용하는 간단한 그리드 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> + </pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: 100px; + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('그리드_4', '100%', 400) }}</p> + +<h3 id="minmax_함수">minmax() 함수</h3> + +<p>100픽셀 높이의 트랙은 100픽셀 이상의 트랙에 콘텐츠를 추가할 경우 별로 유용하지 않을 것이다. 그 경우 오버플로를 야기하니 말이다. <em>적어도</em> 100픽셀 높이의 트랙이 있고, 거기에 더 많은 콘텐츠가 들어가더라도 여전히 확장될 수 있다면 더 나을 수 있다. 웹에 관한 상당히 기본적인 사실은 어떤 것의 높이가 앞으로 얼마나 커질지 결코 모른다는 점이다. 추가 내용 또는 더 큰 글꼴 크기는 모든 면에서 픽셀 크기의 완전성을 추구하는 디자인의 경우 문제를 일으킬 수 있다.</p> + +<p><code>minmax</code>는 트랙의 최소 및 최대 크기를 설정할 수 있게 해준다. 예를 들어 <code>minmax(100px, auto)</code>. 최소 크기는 100 픽셀이지만 최대 크기는 <code>auto</code>로써 콘텐츠에 들어맞게 확장된다. 최소최대값을 사용하려면 <code>grid-auto-rows</code>를 변경해보라.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> + +<p>추가 콘텐츠를 추가하면 트랙이 확장되어 콘텐츠가 들어맞게 트랙이 확대되는 걸 보게될 겁니다. 정확히 행을 따라 확장이 일어난다는 점에 유의하십시오.</p> + +<h3 id="들어맞을_때까지_열_생성">들어맞을 때까지 열 생성</h3> + +<p>우리는 트랙 목록, 반복 표기법, <code>minmax()</code>등에 대해 우리가 배운 몇 가지를 결합하여 유용한 패턴을 만들 수 있다. 때로는 그리드 컨테이너에 들여놓기할 때 최대한 많은 열을 생성하라고 그리드에 요청할 수 있으면 도움이 된다. 우리는 그렇게 하려면 <code>repeat()</code> 표기법을 사용하여 <code>grid-template-columns</code>의 값을 설정하면 되지만, 숫자로 전달할 게 아니라 키워드 <code>auto-fill</code>을 사용했다. 동 함수의 두 번째 매개 변수의 경우 최소값은 우리가 갖고 싶은 최소 트랙 크기와 같고 최대값은 1fr이다.</p> + +<p>이를 당신의 파일에서 당장 시험해려면 아래 CSS를 사용하십시요:</p> + +<div id="격자_5"> +<div class="hidden"> +<h6 id="들어맞을_때까지_열_생성_2">들어맞을 때까지 열 생성</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container > div { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + </pre> + +<pre class="brush: html"><div class="container"> + <div>하나</div> + <div>둘</div> + <div>셋</div> + <div>넷</div> + <div>다덧</div> + <div>여섯</div> + <div>일곱</div> +</div> </pre> +</div> + +<pre class="brush: css">.container { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + grid-auto-rows: minmax(100px, auto); + grid-gap: 20px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('그리드_5', '100%', 400) }}</p> + +<p>이것이 작동하는 까닭은 그리드가 그리드 컨테이너에 들어갈 수 있는 200픽셀의 열을 최대한 많이 만들고, 그 뒤 전체 열 사이 남은 공간이 얼마가 돼건 공유하기 때문이다. 최대치 1fr이며, 이미 알고 있듯이 트랙 사이 공간을 고르게 분배한다.</p> + +<h2 id="라인_기반_배치">라인 기반 배치</h2> + +<p>이제 우리는 그리드를 만드는 것에서 그리드에 사물을 배치하는 것으로 넘어간다. 우리의 그리드에는 항상 라인이 있으며, 이 라인은 1에서 시작하며, 문서의 쓰기 모드와 관련이 있다. 따라서 영어에서는 열 라인 1은 그리드의 왼쪽에 위치하고 행 라인 1은 맨 위에 있습니다. 아랍어 열 라인 1은 아랍어가 오른쪽에서 왼쪽으로 쓰여지기 때문에 오른쪽에 놓이게 됩니다.</p> + +<p>시작 라인과 끝 라인을 지정하여 이러한 라인에 따라 사물을 배치할 수 있다. 다음의 속성을 사용하여 그렇게 할 수 있다:</p> + +<ul> + <li>{{cssxref("grid-column-start")}}</li> + <li>{{cssxref("grid-column-end")}}</li> + <li>{{cssxref("grid-row-start")}}</li> + <li>{{cssxref("grid-row-end")}}</li> +</ul> + +<p>이들 속성은 모두 라인 번호를 값으로 가질 수 있습니다. 약칭 속성을 사용할 수도 있습니다.</p> + +<ul> + <li>{{cssxref("grid-column")}}</li> + <li>{{cssxref("grid-row")}}</li> +</ul> + +<p>이를 통해 시작 라인과 끝 라인을 한 번에 지정할 수 있으며, 전진 슬래시인 <code>/</code> 문자로 구분한다.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/8-placement-starting-point.html">착수 파일로 이 파일을 다운로드하세요</a> 또는 <a href="https://mdn.github.io/learning-area/css/css-layout/grids/8-placement-starting-point.html">여기 라이브로도 보세요</a>. 이미 정의된 그리드와 윤곽이 잡힌 간단한 글이 있습니다. 자동 배치에 의해 항목들이 우리가 생성한 그리드 무리의 각 셀에 하나씩 배치하는 것을 볼 수 있습니다.</p> + +<p>대신 그리드 라인을 사용하여 우리 사이트의 모든 요소를 그리드에 배치합니다. 다음 CSS 규칙을 당해 CSS의 맨 아래에 추가세요:</p> + +<pre class="brush: css">header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +}</pre> + +<div id="격자_6"> +<div class="hidden"> +<h6 id="라인_기반_배치_2">라인 기반 배치</h6> + +<pre class="brush: css"> body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; + } + + .container { + display: grid; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; + } +header { + grid-column: 1 / 3; + grid-row: 1; +} + +article { + grid-column: 2; + grid-row: 2; +} + +aside { + grid-column: 1; + grid-row: 2; +} + +footer { + grid-column: 1 / 3; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} +</pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside> + <h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_6', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 마지막 열 또는 행 라인을 상대로 <code>-1</code> 값을 사용할 수 있으며, 음수값을 사용하여 끝에서 안쪽으로 카운트할 수도 있습니다. 그러나 이 값은 명시적 그리드에만 통합니다. <code>-1</code> 값은 암시적 그리드의 마지막 라인에 적용하지 못합니다.</p> +</div> + +<h2 id="grid-template-areas로_위치잡기">grid-template-areas로 위치잡기</h2> + +<p>그리드에 항목을 배치하는 다른 방식은 {{cssxref("grid-template-areas")}} 속성을 사용하여 당신의 디자인에 딸린 다양한 요소에 이름을 지정하는 것입니다.</p> + +<p>마지막 예제에서 라인 기반 위치잡기를 제거하고(또는 예제 파일을 다시 다운로드하여 새롭게 시작하거나), 다음 CSS를 추가한다.</p> + +<pre class="brush: css">.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +}</pre> + +<p>페이지를 새로고침하면, 우리가 어떤 라인 번호를 사용할 필요없이 방금 전과 같이 항목이 배치되었음을 알 수 있습니다!</p> + +<div id="격자_7"> +<div class="hidden"> +<h6 id="라인_기반_배치_3">라인 기반 배치</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + +.container { + display: grid; + grid-template-areas: + "header header" + "sidebar content" + "footer footer"; + grid-template-columns: 1fr 3fr; + grid-gap: 20px; +} + +header { + grid-area: header; +} + +article { + grid-area: content; +} + +aside { + grid-area: sidebar; +} + +footer { + grid-area: footer; +} + </pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_7', '100%', 400) }}</p> + +<p><code>grid-template-areas</code>에 대한 규칙은 다음과 같다.</p> + +<ul> + <li>그리드로 이뤄진 전체 셀을 채우도록 해야 합니다.</li> + <li>두 개의 셀을 합치려면 해당 이름을 반복하십시오.</li> + <li>셀을 비우려면 <code>.</code>(마침표)를 사용하세요.</li> + <li>영역은 반드시 직사각형이어야 한다. 예를 들어 L자 모양의 면적을 취할 수는 없다.</li> + <li>영역은 다른 위치에서 반복될 수 없습니다.</li> +</ul> + +<p>우리의 레이아웃을 마음대로 부릴 수 있습니다. 예를 들어, 콘텐츠와 사이드바 아래에만 위치하는 바닥글을 맡바닥까지 확대 점유하도록 변경할 수 있다. 이것은 CSS에서 정확히 무슨 일이 일어나고 있는지 있는 그대로 명백하게 레이아웃을 설명하는 매우 멋진 방법입니다.</p> + +<h2 id="CSS_그리드_그리드_프레임워크">CSS 그리드, 그리드 프레임워크</h2> + +<p>그리드 "프레임워크"는 대략 12 또는 16개의 열 그리드를 기반으로 하는 경향이 있으며, CSS 그리드도 포함하므로, 그러한 프레임워크를 발휘하기 위해 제 3의 타사 도구가 필요하지 않다. 이미 CSS 규격에 포함되어 있기 때문이다.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/11-grid-system-starting-point.html">착수 파일을 다운로드하세요.</a>. 여기에는 12개의 열 그리드로 정의된 컨테이너와 이전 두 예제에서 사용된 것과 동일한 마크업이 포함되어 있습니다. 이제 라인 기반 배치를 사용하여 우리의 콘텐츠를 12열 그리드 상에 배치할 수 있습니다.</p> + +<pre class="brush: css">header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +}</pre> + +<div id="격자_8"> +<div class="hidden"> +<h6 id="CSS_그리드_그리드_시스템">CSS_그리드_그리드_시스템</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + +.container { + display: grid; + grid-template-columns: repeat(12, minmax(0,1fr)); + grid-gap: 20px; +} + +header { + grid-column: 1 / 13; + grid-row: 1; +} + +article { + grid-column: 4 / 13; + grid-row: 2; +} + +aside { + grid-column: 1 / 4; + grid-row: 2; +} + +footer { + grid-column: 1 / 13; + grid-row: 3; +} + +header, +footer { + border-radius: 5px; + padding: 10px; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); +} + +aside { + border-right: 1px solid #999; +} + </pre> + +<pre class="brush: html"><div class="container"> + <header>이것은 나의 사랑스런 블로그입니다</header> + <article> + <h1>내 글</h1> + <p>Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + </article> + <aside><h2>Other things</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est.</p> + </aside> + <footer>Contact me@mysite.com</footer> +</div> + </pre> +</div> +</div> + +<p>{{ EmbedLiveSample('그리드_8', '100%', 400) }}</p> + +<p><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">파이어폭스 그리드 검사기</a>를 사용하여 당신의 디자인 상의 그리드 라인을 겹쳐놓으면 12개로 구성된 열 그리드가 작동하는 방법을 볼 수 있습니다.</p> + +<p><img alt="A 12 column grid overlaid on our design." src="https://mdn.mozillademos.org/files/16045/learn-grids-inspector.png" style="height: 1026px; width: 2028px;"></p> + +<h2 id="요약정리">요약정리</h2> + +<p>이 개요에서 우리는 CSS 그리드 레이아웃의 주요 특징을 둘러 보았습니다. 당신의 디자인 상에 사용할 수 있도록 합시다. CSS 규격에 대해 더 자세히 살펴보려면 그리드 레이아웃에 대한 안내서를 참조하십시오. 아래를 보면 찾아 볼 수 있습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/ko/docs/Web/CSS/CSS_Grid_Layout#Guides">CSS_그리드_안내서</a></li> + <li><a href="/ko/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">CSS 그리드 검사기: 그리드 레이아웃을 검사</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/index.html b/files/ko/learn/css/css_layout/index.html new file mode 100644 index 0000000000..b184282450 --- /dev/null +++ b/files/ko/learn/css/css_layout/index.html @@ -0,0 +1,76 @@ +--- +title: CSS 레이아웃 +slug: Learn/CSS/CSS_layout +tags: + - 가변상자 + - 격자 + - 다단 + - 단위 + - 부동 + - 부동체 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 조판 + - 초보자 + - 테이블 + - 학습 +translation_of: Learn/CSS/CSS_layout +--- +<div>{{LearnSidebar}}</div> + +<p>이 시점에서 우리는 이미 CSS 기본 사항, 텍스트 스타일링 방법, 콘텐츠가 안에 있는 상자를 스타일링하고 조작하는 방법을 살펴 보았습니다. 이제 뷰포트와 관련하여 상자를 올바른 장소에 배치하는 방법을 살펴볼 때입니다. 우리는 필요한 전제조건을 다루었기 때문에 이제 CSS 레이아웃에 깊이 뛰어들어 다른 디스플레이 설정, 플렉스박스, CSS 그리드, 포지셔닝과 같은 현대적인 레이아웃 도구, 그리고 당신이 여전히 알고 싶어할 만한 레거시 기술들을 살펴볼 수 있다.</p> + +<h2 id="선결사항">선결사항</h2> + +<p>이번 단위를 시작하기 전에 여러분은 이미 아래 내용을 익혔어야 합니다:</p> + +<ol> + <li><a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단위에서 논의했듯이 HTML에 대해 기본적인 친숙도가 있어야 합니다.</li> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 단위에서 논의한 만큼 CSS 기본 사항에 대해 부담이 없어야 합니다.</li> + <li><a href="/en-US/docs/Learn/CSS/Styling_boxes">상자 스타일링</a> 방법에 대한 이해가 있어야 합니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 여러분은 본인만의 파일을 생성할 능력이 없는 컴퓨터/태블릿/다른 장치에서 작업하고 있는 경우, <a href="http://jsbin.com/">JSBin</a>나 <a href="https://thimble.mozilla.org/">Thimble</a>과 같은 온라인 코딩 프로그램 상에서 코드 예제를 시험해볼 수 있다.</p> +</div> + +<h2 id="안내서">안내서</h2> + +<p>이 글은 CSS에서 이용할 수 있는 기본 레이아웃 도구 및 기술에 대한 지침을 제공합니다. 단원 말미에 웹페이지 하나를 예시하는 방식으로 레이아웃 매서드에 대한 이해도를 자가 점검하는데 도움이 되는 학습 평가가 있습니다.</p> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></dt> + <dd>이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></dt> + <dd>웹페이지의 엘리먼트 무리는 여러분이 무언가 변화를 주기전까지는 <em>normal flow</em>(일반 대열)에 따라 또래 엘리먼트들을 배치합니다. 이 글은 일반 대열을 설명하는데, 그 걸 토대로 일반 대열 자체를 변경하는 방법을 배우겠습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt> + <dd><a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/%EA%B0%80%EB%B3%80%EC%83%81%EC%9E%90%EC%9D%98_%EB%8C%80%ED%91%9C%EC%A0%81%EC%9D%B8_%EC%82%AC%EC%9A%A9%EB%A1%80">Flexbox</a>는 행과 열의 형태로 항목 무리를 배치하는 일차원 레이아웃 메서드이다. 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형된다. 이 글은 근간이 되는 내용 전체를 설명한다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드(Grids)</a></dt> + <dd>CSS 그리드 레이아웃(Grid Layout)은 웹페이지를 위한 이차원 레이아웃 시스템입니다. 이 기능을 통해 콘텐츠를 행과 열에 배치할 수 있으며 복잡한 레이아웃을 직접 직관적으로 구축할 수 있는 많은 기능이 있습니다. 이 글은 페이지 레이아웃을 시작하기 위해 필요한 모든 것을 알려드립니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></dt> + <dd>원래 텍스트 블록 내에서 부동 이미지를 위한 {{cssxref("float")}} 속성은 웹 페이지에서 다단 레이아웃을 생성할 용도로 가장 널리 사용되는 도구 중 하나로 자리매김했었습니다. Flexbox와 그리드의 출현과 함께 부동 속성은 이 글에서 설명하겠지만, 원래의 목적대로 돌아갔습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></dt> + <dd>당신이 일반 문서 레이아웃 대열에서 엘리먼트를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 엘리먼트 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 글은 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></dt> + <dd>CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 글은 그 기능을 어떻게 사용하는지 설명합니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></dt> + <dd>웹 기반 장치에 다양한 화면 크기가 등장함에 따라 반응형 웹 디자인(RWD) 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 레이아웃과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 글에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></dt> + <dd><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 CSS를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 레이아웃을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></dt> + <dd>그리드 시스템은 CSS 레이아웃에서 사용되는 매우 일반적인 기능이며, CSS 그리드 레이아웃(Grid Layout) 이전에는 부동체 또는 기타 레이아웃 기능을 이용하여 그리드 레이아웃(Grid Layout)이 구현되는 경향이 있었습니다. 자신의 레이아웃을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 여러분의 콘텐츠를 그 가상의 열 안에 콘텐츠 열을 끼워맞춥니다. 이 글에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></dt> + <dd> + <p>이 단위에서는 Flexbox 및 그리드를 여러분의 웹디자인을 위한 주 레이아웃 방법으로 사용할 것을 권장합니다. 그러나 이전 브라우저 또는 당신이 사용하는 메서드를 지원하지 않는 브라우저를 사용하는 사이트 방문자가 있습니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 글은 구식 기술의 사용자들을 차단하지 않고 현대적인 웹 기술을 사용하는 방법에 대해 설명합니다.</p> + </dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">학습 평가: 레이아웃 이해의 핵심 사항</a></dt> + <dd>웹페이지를 하나 예시하는 방식으로 서로 다른 레이아웃 메서드 지식을 테스트하는 학습 평가</dd> +</dl> + +<h2 id="참조_항목">참조 항목</h2> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">위치잡기 실례</a></dt> + <dd>이 글은 위치잡기로 당신이 할 수 있는 일의 종류를 설명하기 위해 실제 사례를 구축하는 방법을 제시합니다.</dd> +</dl> diff --git a/files/ko/learn/css/css_layout/introduction/index.html b/files/ko/learn/css/css_layout/introduction/index.html new file mode 100644 index 0000000000..aaf42a6979 --- /dev/null +++ b/files/ko/learn/css/css_layout/introduction/index.html @@ -0,0 +1,720 @@ +--- +title: CSS 레이아웃 입문서 +slug: Learn/CSS/CSS_layout/Introduction +tags: + - 가변상자 + - 격자 + - 글 + - 대열 + - 부동체 + - 씨에스에스 + - 위치잡기 + - 입문서 + - 조판 + - 초보용 + - 테이블 + - 학습 +translation_of: Learn/CSS/CSS_layout/Introduction +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">이 문서에서는 이전 모듈에서 이미 다뤘던 CSS 레이아웃 기능, 예를 들어 서로 다른 {{cssxref("display")}} 속성값의 차이 등을 복습하고, 이번 모듈에서 다룰 예정인 몇몇 CSS 개념을 소개합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>CSS 페이지 레이아웃 기술에 대한 개요를 제공합니다. 개별 기술은 후속 자습서에서 보다 자세하게 학습할 수 있습니다.</td> + </tr> + </tbody> +</table> + +<p>CSS 페이지 레이아웃 기술은 웹페이지에 포함될 요소들을 취합할 수 있게 해주며, 그들 요소가 일반 레이아웃 대열 상에 기본값 위치 기준과 부모 컨테이너, 또는 메인 뷰포인트 및 메인창과 비례해 어느 위치에 놓일 것인지를 제어한다. 우리가 이번 모듈에서 자세하게 다룰 페이지 레이아웃 기술은 다음과 같다.</p> + +<ul> + <li>보통 흐름(normal flow)</li> + <li>{{cssxref("display")}} 속성</li> + <li>flexbox</li> + <li>그리드</li> + <li>Floats</li> + <li>포지셔닝</li> + <li>테이블 레이아웃</li> + <li>다단 레이아웃</li> +</ul> + +<p>각각의 기술은 저마다 용도가 있고, 장단점이 있으며, 어떤 기술도 독립적인 용도를 갖추도록 설계되지는 않았다. 각 메서드가 어떤 용도로 마련된 것인지 이해하게 되면 해당 작업에 가장 적합한 도구가 어떤 것인지 파악하는 데 유리한 입지를 점하게 된다.</p> + +<h2 id="보통_흐름normal_flow">보통 흐름(normal flow)</h2> + +<p>보통 흐름(normal flow)은 당신이 페이지 레이아웃을 전혀 제어하지 않을 경우 브라우저가 기본값으로 HTML 페이지를 배치하는 방법을 말합니다. 간단한 HTML 예를 살펴봅시다:</p> + +<pre class="brush: html"><p>나는 고양이를 사랑한다.</p> + +<ul> + <li>고양이 먹이를 사세요</li> + <li>운동</li> + <li>기운내 친구야</li> +</ul> + +<p>여기가 끝!</p></pre> + +<p>기본적으로 브라우저는 이 코드를 다음과 같이 표시한다.</p> + +<p>{{ EmbedLiveSample('일반_대열', '100%', 200) }}</p> + +<p>소스 코드에 나타나는 순서 그대로 HTML 요소가 표시되는 방법에 주의하자. 요소가 상대 요소의 상위(上位)에 차곡 차곡 올려진다. 즉 첫 번째 단락이 나오고 순서가 없는 목록이 이어지고 두 번째 단락으로 이어진다.</p> + +<p>요소 집합이 상대 요소 바로 아래 나타나는 것을 <em>inline</em> 요소와 대비해 <em>block</em> 요소라고 기술한다.</p> + +<div class="note"> +<p><strong>참고</strong>: 블록 요소 상황에 해당하는 방향으로 배치되는 것을 일컽어 블록 방향이라고 기술한다. 영어와 같은 언어 상에서 블록 방향은 수직 대열을 갖게되며, 이는 가로쓰기 모드이다. 일본어와 같은 세로 쓰기 모드에 해당하는 언어 상에서 블록 방향은 수평 대열이 됩니다. (블록 관계와) 대척 관계인 인라인 방향은 (문장과 같은) 인라인 콘텐츠가 흘러가는 방향을 말한다.</p> +</div> + +<p>CSS를 사용하여 레이아웃을 만들 경우 당신은 요소 집합을 보통 흐름(normal flow)에서 벗어나도록 하는 것이다. 그러나 당신의 웹페이지의 다수 요소 집합의 경우는 보통 흐름(normal flow)이므로 정확히 당신이 필요로하는 레이아웃이 그대로 만들어질 것이다. 그런 까닭에 잘 구조화된 HTML 문서에서 시작하는 것이 아주 중요하다. 그런 뒤에 당신은 사물들이 기본값으로 배치된 방식과 대립해 싸우는게 아니라 협력해서 작업할 수 있게 된다.</p> + +<p>CSS에서 요소가 배치되는 방식을 변경시키는 메서드는 다음과 같다.</p> + +<ul> + <li><strong>{{cssxref("display")}} 속성</strong> — <code>block</code>, <code>inline</code> 또는 <code>inline-block</code>과 같은 기준 속성값은 보통 흐름(normal flow)속에서 요소가 동작하는 방식을 변경할 수 있다. (더 자세한 정보는 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">CSS 상자 유형</a>을 참조하세요). 그 뒤에 우리에게 <code>display</code> 속성값 지정을 통해 활성화될 수 있는 완전체 레이아웃 메서드가 주어진다. 예로 <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS 그리드</a>와 <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a>.</li> + <li><strong>Floats</strong> — {{cssxref("float")}} 속성의 값을 예로 <code>left</code>로 적용하면 흔히 메거진 레이아웃에 속한 이미지가 텍스트를 자신의 주변에 떠있게 하는 방식과 같이 블록 수준 요소가 어떤 요소의 한 쪽 측면으로 밀려나도록 할 수 있다.</li> + <li><strong>{{cssxref("position")}} 속성은</strong> — 다른 상자 내부에 들어가 상자의 정확한 위치를 제어할 수 있게 해준다. <code>정적</code> 포지셔닝는 기본값으로 보통 흐름(normal flow) 소속이지만, 다른 속성값을 사용해 요소들이 다르게 배치되도록 만들 수 있다. 예를 들어 브라우저 뷰포트의 왼쪽 최상단에 맞춰 (또는 비례해서) 위치를 고정시킬 수 있다.</li> + <li><strong>테이블 레이아웃</strong> — 이것은 HTML 테이블 구성원에 스타일을 지정하기 위해 마련된 기능이기는 하나 <code>display: table</code>와 관련 속성을 사용하여 비테이블 요소에서도 사용될 수 있다.</li> + <li><strong>다단 레이아웃</strong> — <a href="/en-US/docs/Web/CSS/CSS_Columns">다단 레이아웃</a> 속성은 당신이 신문 지상에서 볼 수 있듯이 블록 콘텐츠를 단 형태로 배치되도록 만들 수 있다.</li> +</ul> + +<h2 id="디스플레이_속성">디스플레이 속성</h2> + +<p>CSS 상에서 페이지 레이아웃을 완성하는 주요 메서드는 <code>display</code> 속성에 포함된 모든 속성값 지정을 통해 이뤄진다. 디스플레이 속성은 요소가 표시되는 기본값 변경을 허용한다. 보통 흐름(normal flow)상의 모든 요소는 한 가지 <code>display</code> 속성값을 갖고 있으며, 해당 요소의 기본 동작 방식을 지정하는 데 사용된다. 예를 들어 영어로 된 단락은 다른 대상 요소 바로 밑에 표시되는 것은 그들 요소의 스타일이 <code>display: block</code>으로 지정되었기 때문이다. 단락 내부 어떤 텍스트 주변에 링크를 만들면 그 링크는 나머지 텍스트와 함께 인라인을 유지하며 새 줄로 넘어가는 행갈이를 하지 않는다. 그런 까닭에 {{htmlelement("a")}} 요소는 기본값으로 <code>display: inline</code>가 된다.</p> + +<p>당신은 이러한 기본값 디스플레이 동작을 변경할 수 있다. 예를 들어 {{htmlelement("li")}} 요소는 기본값으로 <code>display: block</code>가 지정되는 것으로 우리 영어 문서 상에서 다른 대상 요소 바로 밑에 표시된다는 의미다. 디스플레이 속성값을 <code>inline</code>으로 변경하면 문장 속 단어의 동작과 마찬가지로 상대 바로 옆에 표시된다. 당신이 어느 요소라도 <code>display</code> 속성값을 변경할 수 있다는 것은 그 요소들이 어떤 모습을 띄게되든 관계없이 해당 HTML 요소의 의미론적 의의를 선택할 수 있다는 뜻이다. 요소가 보여지는 방식은 변경할 수 있는 부분이다.</p> + +<p>한 항목을 <code>block</code>에서 <code>inline</code>으로 바꾸거나, 그 반대로 바꿔 기본값진열 방식을 변경할 수 있을뿐만 아니라 하나의 <code>display</code> 속성값으로 시작해서 확대된 형태의 레이아웃 메서드로 일부 있다. 그러나 그것을 사용할 경우 대게는 추가적인 속성 호출이 요구된다. 레이아웃의 목적이 무엇인지 논할 때 가장 중요한 두 가지 속성값은 <code>display: flex</code>와 <code>display: grid</code>이다.</p> + +<h2 id="flexbox">flexbox</h2> + +<p>flexbox는 <a href="/ko/docs/Web/CSS/CSS_Flexible_Box_Layout">가변 상자 레이아웃</a> 모듈의 약칭으로 행이 됐건 열이 됐건 일차원 상에 사물을 배치할 경우 편리를 돕기 위해 마련되었다. flexbox를 사용하려면 당신이 진열하길 원하는 모든 요소의 부모 요소에 <code>display: flex</code>를 적용하고 나면 모든 직계 자식이 플렉스 항목이 된다. 우리는 간단한 예를 들어 이 점을 확인할 수 있다.</p> + +<p>아래 HTML 마크업을 보면<code>wrapper</code> 클래스에 해당하는 컨테이너 요소를 제공하고, 그 내부에 세 개의 {{htmlelement("div")}} 요소가 있다. 기본값으로 이들 요소들은 영어 문서 상에서 블록 요소로 상대 요소 밑에 표시된다.</p> + +<p>그러나 부모 요소에 <code>display: flex</code>를 부여하면 세개 항목이 자체적으로 단으로 배열된다. 그렇게 된 까닭은 그들 요소들이 <em>가변 항목</em>이 되었을 뿐만 아니라 flexbox가 그들 요소에 부여한 일부 초기값을 사용했기 때문이다. 그들은 행으로 표시되었는데, 그 까닭은 {{cssxref("flex-direction")}}의 초기값이 <code>row</code>이기 때문이다. 그들은 모두 항목 무리에서 키가 가장 큰 높이로 연장된 모양새가 되는데, 그 까닭은 {{cssxref("align-items")}} 속성의 초기값이 <code>stretch</code>이기 때문이다. 즉, 항목 무리가 가변 컨테이너의 높이에 맞춰 연장된다는 것으로 이번 경우에 키가 가장 큰 항목이 기준으로 정해진다. 항목 무리 전체가 가변 컨테이너의 초입에 맞춰 정렬하면서 행의 말미에 여분의 공간이 남겨진다.</p> + +<div id="가변_1"> +<div class="hidden"> +<h6 id="flexbox_예제_1">flexbox 예제 1</h6> + +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('가변_1', '300', '200') }}</p> + +<p>가변 콘테이너에 적용될 수 있는 상기한 속성이외에도 가변 항목에 적용될 수 있는 속성이 있다. 다른 것들 중에서 그들 속성들은 항목이 변형되는 방식을 변경할 수 있는데, 항목을 여유 공간에 맞춰 연장하거나 수축될 수 있다.</p> + +<p>이에 대한 간단한 예로 자식 항목 전체에 대한 {{cssxref("flex")}} 속성에 대해 속성값 <code>1</code>을 부가할 수 있다. 그로 인해 컨테이너 말미에 공간을 남기지 않고 항목 무리 전체가 확대되거나 채워지도록 만든다. 항목 무리보다 많은 공간이 있을 경우는 늘어날 것이고 적은 공간이 있으면 축소될 것이다. 게다가 HTML 마크업에 다른 요소를 추가하면 그 대상 요소를 위한 공간 생성을 위해 항목 무리 전체가 축소될 것이다. 그들은 그 요소가 뭐가됐건 동일한 공간 점유를 위해 크기가 조종된다.</p> + +<div id="가변_2"> +<div class="hidden"> +<h6 id="flexbox_예제_2">flexbox 예제 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: flex; +} + +.wrapper > div { + flex: 1; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('가변_2', '300', '200') }}</p> + +<div class="note"> +<p><strong>참고</strong>: 이 안내서는 flexbox 상에서 있을 수 있는 내용에 대한 짧은 입문서였다. 더 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a> 편을 참조하세요.</p> +</div> + +<h2 id="그리드_레이아웃">그리드 레이아웃</h2> + +<p>가변 상자는 일차원 레이아웃을 위해 마련되었지만, 그리드 레이아웃은 이차원 레이아웃을 위해 마련되었다. 즉 행과 열에 포함된 사물들을 배열한다.</p> + +<p>반복되는 얘기지만, 디스플레이 속성에 <code>display: grid</code>라는 특정 값을 지정하면 그리드 레이아웃으로 전환할 수 있다. 아래 예를 보면 가변 요소 사례에 비슷한 마크업을 사용했다. 하나의 컨테이너와 몇몇 자식 요소가 딸려있다. 우리는 <code>display: grid</code> 사용뿐만 아니라 {{cssxref("grid-template-rows")}}와 {{cssxref("grid-template-columns")}}라는 개별 속성을 활용하여 부모 요소를 상대로 일부 행과 열 궤도를 정의한다. 여기 각기 <code>1fr</code>값이 지정된 3열과 <code>100px</code>이 지정된 2행을 정의했다. 자식 요소 상에 굳이 어떤 규칙도 적용할 필요없이, 그 요소들이 우리가 생성한 그리드 안에 자동적으로 자리잡게 된다.</p> + +<div id="격자_1"> +<div class="hidden"> +<h6 id="그리드_예제_1">그리드 예제 1</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> + <div class="box4">넷</div> + <div class="box5">다섯</div> + <div class="box6">여섯</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('격자_1', '300', '330') }}</p> + +<p>그리드가 주어지고 나면 앞서 확인했듯 당신의 항목 무리를 그리드 상에 자동 배치하는 동작 방식이 아니라 명시적으로 위치를 지정할 수 있다. 아래 두 번째 예제에서 동일한 그리드를 정의했지만, 이번에는 세개의 자식 항목이 주어졌다. 우리는 {{cssxref("grid-column")}}와 {{cssxref("grid-row")}}를 사용해서 각 항목의 행과 열의 시작과 끝을 지정했다. 이로써 항목 무리가 차지하는 공간이 여러 궤도에 걸쳐 확대되었다.</p> + +<div id="격자_2"> +<div class="hidden"> +<h6 id="그리드_예제_2">그리드 예제 2</h6> + +<pre class="brush: css"> * {box-sizing: border-box;} + + .wrapper > div { + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + } + </pre> +</div> + +<pre class="brush: css">.wrapper { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-template-rows: 100px 100px; + grid-gap: 10px; +} + +.box1 { + grid-column: 2 / 4; + grid-row: 1; +} + +.box2 { + grid-column: 1; + grid-row: 1 / 3; +} + +.box3 { + grid-row: 2; + grid-column: 3; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="box1">하나</div> + <div class="box2">둘</div> + <div class="box3">셋</div> +</div> +</pre> +</div> + +<p>{{ EmbedLiveSample('격자_2', '300', '330') }}</p> + +<div class="note"> +<p><strong>참고</strong>: 이 두 예제는 그리드 레이아웃의 일부분일 뿐이며, 자세한 내용은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">그리드 레이아웃</a></p> +</div> + +<p>이 가이드의 나머지 부분은 페이지의 주요 레이아웃 구조로 보기엔 덜 중요하지만 특정 작업을 수행하는 데 여전히 도움이 될 수 있는 다른 레이아웃 방법을 다룬다. 각 레이아웃 작업의 특성을 이해함으로써 당신이 디자인 하는 특정 구성 요소를 들여다 볼 때 거기에 가장 적합한 레이아웃 유형이 종종 명확해 진다는 것을 조만간 알게 될 것이다.</p> + +<h2 id="Floats">Floats</h2> + +<p>요소를 부동시키면 보통 흐름(normal flow)속에 속한 해당 요소와 해당 요소를 뒤따르는 블록 수준 요소의 동작이 변경된다. 요소는 왼쪽 또는 오른쪽으로 이동하고 보통 흐름(normal flow)에서 벗어나게되며 주변 콘텐츠는 부유된 항목 주위로 떠다닙니다.</p> + +<p>이 {{cssxref("float")}} 속성은 네 가지 값을 가질 수 있다:</p> + +<ul> + <li><code>left</code> — 요소를 왼쪽에 띄웁니다.</li> + <li><code>right</code> — 요소를 오른쪽에 띄웁니다.</li> + <li><code>none</code> — 부동 여부를 전혀 지정하지 않는다. 이것이 기본값이다.</li> + <li><code>inherit</code> — 부동 속성의 값이 요소의 부모 요소에서 상속된다고 지정한다.</li> +</ul> + +<p>아래 예제에서 우리는 <code><div></code> 왼쪽을 띄우고 오른쪽에 {{cssxref("margin")}}을 주어 텍스트를 <code><div></code> 요소 자리에서 밀어낸다. 이것은 우리에게 텍스트가 그 상자를 감싸는 효과를 부여하며, 이는 현대 웹 디자인에서 사용되는 Floats에 대해 알아야할 내용의 대부분이다.</p> + +<div id="부동_1"> +<div class="hidden"> +<h6 id="Floats_예제">Floats 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +p { + line-height: 2; + word-spacing: 0.1rem; +} + +.box { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: html"><h1>간단한 부동 예제</h1> + +<div class="box">부동</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css"> +.box { + float: left; + width: 150px; + height: 150px; + margin-right: 30px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('부동_1', '100%', 600) }}</p> + +<div class="note"> +<p><strong>참고</strong>: Floats에 대한 설명은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 속성 편에서 충분히 다룹니다. flexbox 및 그리드 레이아웃과 같은 기술이 나오기 이전에 Floats는 열 레이아웃을 만드는 메서드로 사용되었다. 웹에서 이러한 메서드와 대면하는 경우도 여전히 있다. <a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a>에 관한 단원에서 그 내용을 다루게 된다.</p> +</div> + +<h2 id="포지셔닝_기술">포지셔닝 기술</h2> + +<p>포지셔닝를 통해 보통 흐름(normal flow)속에 있는 요소를 예상되는 기존의 배치 위치에서 벗어나 다른 위치로 이동시킬 수 있다. 포지셔닝는 메인 페이지 레이아웃을 생성하는 메서드가 아니라 페이지의 특정 항목의 위치를 관리하고 미세 조정하는 것에 관한 것이다.</p> + +<p>그러나 {{cssxref("position")}} 속성에 의존하는 특정 레이아웃 패턴을 상대할 경우 유용한 기술도 있다. 포지셔닝를 이해하는 것은 또한 보통 흐름(normal flow)을 이해하고, 항목을 보통 흐름(normal flow)에서 벗어나게 한다는 것이 무엇인지를 이해하는 데 도움이 된다.</p> + +<p>당신이 알아야 할 다섯 가지 포지셔닝 유형이 있다.</p> + +<ul> + <li><strong>정적 포지셔닝</strong>는 모든 요소에 기본값으로 부여된 속성이다. 즉, "문서 레이아웃 대열에 속하는 요소를 기존의 일반 위치에 들여놓는 것으로 여기서 특별할 것은 없다."라는 것을 의미한다.</li> + <li><strong>상대 포지셔닝</strong>페이지상의 요소 위치를 수정하여 그것을 보통 흐름(normal flow)상의 기존 위치와 비례해 이동토록 하는 것으로 페이지의 다른 요소와 겹치는 것도 해당한다.</li> + <li><strong>절대 포지셔닝</strong>는 요소를 페이지의 일반 레이아웃 대열에서 완전히 벗어난 곳으로 이동시켜 자체적인 개별 레이어 상에 놓는 것과 같다. 그곳으로부터 페이지의 <code><html></code> 요소(또는 가장 근접 위치에 있는 조상 요소)의 가장자리 기준에서 비례하는 위치에 고정할 수 있다. 이것은 다른 콘텐츠 패널이 서로 다른 요소 위에 놓여야 하는 동시에 표시 및 감추기를 맘대로 하는 탭 상자의 경우나 기본적으로 화면에서 벗어나지만 컨트롤 단추를 사용하여 화면상에 슬라이더 전환이 되도록 만들어진 정보 패널과 같은 복잡한 레이아웃 효과를 만드는 데 유용하다.</li> + <li><strong>고정 포지셔닝</strong>는 다른 요소가 아닌 브라우저 뷰포트 기준과 비례해 요소를 고정하는 것을 제외하고는 절대 포지셔닝와 매우 유사합니다. 이것은 나머지 콘텐츠 부분이 스크롤해야 보이는 화면 상에서 항상 동일한 위치에 머물러야 하는 영구적인 탐색 메뉴와 같은 효과를 만드는 데 유용합니다.</li> + <li><strong>스티키 포지셔닝</strong>는 하나의 요소를 <code>position: static</code>와 같이 작동하다가 뷰포트 기준에서 사전에 정의된 간격띄우기 지점에 도달한 순간 이후부터는 <code>position: fixed</code>와 같이 같이 작동하는 새로운 포지셔닝 메서드이다.</li> +</ul> + +<h3 id="간단한_포지셔닝_예제">간단한 포지셔닝 예제</h3> + +<p>이러한 페이지 레이아웃 기술에 친숙해지도록 몇 가지 간단한 예를 보여드리겠습니다. 예제는 다음과 같이 모두 동일한 HTML 특성을 갖고 있다:</p> + +<pre class="brush: html"><h1>포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">나는 기본 블록 수준 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<p>이 HTML은 다음과 같은 CSS를 기본값으로 사용하여 스타일링됩니다.</p> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> + +<p>렌더링된 출력은 다음과 같다:</p> + +<p>{{ EmbedLiveSample('간단한_포지셔닝_예제', '100%', 300) }}</p> + +<h3 id="상대_포지셔닝">상대 포지셔닝</h3> + +<p>상대 포지셔닝 통해 기본 대열 속에서 예상되는 기본값으로 주어지는 위치로부터 항목을 간격띄우기할 수 있다. 이것은 아이콘을 약간 아래로 이동하여 텍스트 레이블에 맞춰 정렬하는 것과 같은 작업을 수행할 수 있다는 의미다. 이를 위해 다음 규칙을 추가하여 상대적인 위치를 추가할 수 있습니다:</p> + +<pre class="brush: css">.positioned { + position: relative; + top: 30px; + left: 30px; +}</pre> + +<p>여기서 우리는 중간 단락에 {{cssxref("position")}} 값을<code>relative</code>로 부여하고(이것은 자체적으로 아무것도하지 않는다) 아울러 {{cssxref("top")}}와 {{cssxref("left")}} 속성도 추가한다. 이것은 영향을 받는 요소를 아래로 그리고 오른쪽으로 이동시키는 역할을 한다. 이것은 당신이 기대했던 것과 반대되는 것처럼 보일 수 있지만, 그것을 왼쪽과 상단면에서 밀리는 요소로 생각할 필요가 있다.</p> + +<p>이 코드를 추가하면 다음과 같은 결과가 나타난다.</p> + +<div id="상대적_1"> +<div class="hidden"> +<h6 id="상대적_포지셔닝_예제">상대적 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>상대적 포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">이것은 내가 상대적으로 포지셔닝한 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: relative; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('상대적_1', '100%', 300) }}</p> + +<h3 id="절대_포지셔닝">절대 포지셔닝</h3> + +<p>절대 포지셔닝는 보통 흐름(normal flow)에서 요소를 완전히 제거하고 컨테이너 블록의 가장자리로부터 간격띄우기값(오프셋)을 사용하여 배치하는 데 사용된다.</p> + +<p>위치 이동이 없던 원래의 예제로 회귀해서 절대 포지셔닝를 구현하기 위해 다음과 같은 CSS 규칙을 추가할 수 있다:</p> + +<pre class="brush: css">.positioned { + position: absolute; + top: 30px; + left: 30px; +}</pre> + +<p>여기서 우리는 중간 단락에 <code>absolute</code> {{cssxref("position")}} 값과 이전과 동일한 {{cssxref("top")}}과 {{cssxref("left")}}속성을 부여한다. 그러나 이 코드를 추가하면 다음과 같은 결과가 나온다.</p> + +<div id="절대_1"> +<div class="hidden"> +<h6 id="절대_포지셔닝_예제">절대 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>절대 포지셔닝</h1> + +<p>나는 기본 블록 수준 요소입니다.</p> +<p class="positioned">이것은 내가 절대적으로 포지셔닝한 요소입니다.</p> +<p>나는 기본 블록 수준 요소입니다.</p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 10px; + border-radius: 5px; +} +</pre> +</div> + +<pre class="brush: css">.positioned { + position: absolute; + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('절대_1', '100%', 300) }}</p> + +<p>이건 아주 달라! 위치 지정 요소는 이제 페이지 레이아웃의 나머지 부분과 완전히 분리되어 그 것 위에 놓여있다. 나머지 두 단락은 이제 원래 위치에 있던 자기 형제가 존재하지 않은 듯이 나란히 놓여 있다. {{cssxref("top")}}과 {{cssxref("left")}} 속성은 상대적 위치 지정 요소에 대해 미치는 것과는 다른 영향을 절대적 위치 지정 요소에 대해 미친다. 이 경우 간격띄우기값(오프셋)은 페이지의 좌측 최상단을 기준으로 계산되었다. 여기서 컨테이너가 되는 부모 요소를 변경할 수 있으며 <a href="/en-US/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a>에 관한 단원에서 해당 내용을 살펴보겠다.</p> + +<h3 id="고정_포지셔닝">고정 포지셔닝</h3> + +<p>고정 포지셔닝는 절대 포지셔닝와 같은 방식으로 문서 대열에서 요소를 제거한다. 그러나 컨테이너 위치로부터 간격띄우기를 적용하는 게 아니라 뷰포트를 기준으로 적용된다. 해당 항목이 뷰포트 기준에 비례하여 고정되기 때문에 해당 항목 아래로 페이지가 스크롤할 때 고정된 메뉴 항목과 같은 효과를 생성할 수 있다.</p> + +<p>이번 예제의 경우 페이지를 스크롤할 수 있도록 텍스트 형태의 세 단락으로 구성된 HTML에 상자 하나를 <code>position: fixed</code>로 지정했다.</p> + +<pre class="brush: html"><h1>고정 포지셔닝</h1> + +<div class="positioned">고정</div> + +<p>단락 1.</p> +<p>단락 2.</p> +<p>단락 3.</p> +</pre> + +<div id="고정_1"> +<div class="hidden"> +<h6 id="고정_포지셔닝_예제">고정 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>고정 포지셔닝</h1> + +<div class="positioned">고정</div> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +</pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: fixed; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('고정_1', '100%', 200) }}</p> + +<h3 id="흡착_포지셔닝">흡착 포지셔닝</h3> + +<p>흡착 포지셔닝는 우리의 선택을 기다리며 대기중인 마지막 포지셔닝 메서드다. 이것은 기본값인 정적 포지셔닝와 고정 포지셔닝의 혼합형이다. 항목이 <code>position: sticky</code>로 지정된 경우 해당 항목은 뷰포트 기준에서 우리가 정의한 간격띄우기 지점에 도달하기 전까지 보통 흐름(normal flow) 상에서 스크롤된다. 그 지점에 마치 <code>position: fixed</code>가 적용된 것처럼 "철썩" 붙게 된다.</p> + +<div id="흡착_1"> +<div class="hidden"> +<h6 id="흡착_포지셔닝_예제">흡착 포지셔닝 예제</h6> + +<pre class="brush: html"><h1>흡착 포지셔닝</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">흡착</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 포지셔닝에 대해 더 알아보고 싶다면 <a href="/kr/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a> 단원을 보라.</p> +</div> + +<h2 id="테이블_레이아웃">테이블 레이아웃</h2> + +<p>HTML 테이블은 표로 나타낸 데이터를 표시하기에는 무난했다. 그러나 (수년 전, 심지어 기초적인 CSS가 여러 브라우저에서 안정적으로 지원되기 이전에도) 웹 개발자들은 머리글, 바닥글, 서로 다른 단 등을 여러가지 테이블 행과 열에 집어넣어 웹페이지 전체 레이아웃을 짜는데 테이블을 사용하기도 했다. 이것은 당시에는 먹혔지만, 많은 문제가 상존했다. 테이블 레이아웃은 유연하지 않고, 마크업이 과도하고, 디버그하기 어렵고, 의미론적으로 맞지 않았다(예: 스크린 리더 사용자는 테이블 레이아웃을 탐색하는 데 문제가 있다).</p> + +<p>테이블 마크업을 사용할 때 테이블이 웹 페이지에 보여지는 방식의 재원(財源)은 테이블 레이아웃을 정의하는 CSS 속성 집합이다. 이러한 속성은 테이블이 아닌 요소를 배치하는 데 사용할 수 있으며, 이 용법은 때때로 "CSS 테이블 용법"으로 기술된다.</p> + +<p>아래 예는 이러한 용법을 보여준다. 레이아웃에 CSS 테이블을 사용하는 것은 이 시점에서 낡은 메서드로 간주되어야 한다. flexbox 또는 그리드 레이아웃이 지원되지 않던 매우 오래된 브라우저를 사용하는 사람의 경우에 해당된다.</p> + +<p>예제를 살펴보자. 우선, HTML 양식을 생성하는 몇 가지 간단한 마크업 사례다. 개별 입력 요소에는 레이블이 달려있으며, 단락 안에는 캡션도 포함시켰다. 각 한 쌍을 이루는 레이블과 입력 요소는 레이아웃 목적에 따라 {{htmlelement("div")}} 요소에 둘러싸여 있다.</p> + +<pre class="brush: html"><form> + <p>우선, 이름과 나이를 말씀해주세요</p> + <div> + <label for="이름">이름:</label> + <input type="text" id="이름"> + </div> + <div> + <label for="성">성:</label> + <input type="text" id="성"> + </div> + <div> + <label for="나이">나이:</label> + <input type="text" id="나이"> + </div> +</form></pre> + +<p>이제 우리 예제에 해당되는 CSS 차례다. CSS의 대부분은 {{cssxref("display")}} 속성을 사용한 것을 제외하면 대체로 평범한 내용이다. {{htmlelement("form")}}와 복수의 {{htmlelement("div")}}, {{htmlelement("label")}}, {{htmlelement("input")}}는 각기 테이블과 복수의 테이블 행, 테이블 셀을 표시하라는 주문을 받는다. 기본적으로 그들은 HTML 테이블 마크업과 같이 동작하며 기본값으로 레이블과 입력 양식 요소를 멋지게 정렬시킨다. 이제 우리가 해야할 일은 모든 요소가 좀더 멋지게 보이도록 크기와 여백을 조금 추가하는 것이다. 그러면 일이 마무리된다.</p> + +<p>눈치 챘겠지만, 캡션 단락은 <code>display: table-caption;</code>가 부여되어 테이블 {{htmlelement("caption")}}과 같이 동작하게 만들었고, 또한 <code>display: table-caption;</code>를 부여하며 해당 마크업이 소스 코드에서 <code><input></code> 요소보다 선행함에도 해당 캡션이 스타일 목적에 따라 테이블 하단에 놓이도록 했다. 이렇듯 약간의 유연성이 허용된다.</p> + +<pre class="brush: css">html { + font-family: sans-serif; +} + +form { + display: table; + margin: 0 auto; +} + +form div { + display: table-row; +} + +form label, form input { + display: table-cell; + margin-bottom: 10px; +} + +form label { + width: 200px; + padding-right: 5%; + text-align: right; +} + +form input { + width: 300px; +} + +form p { + display: table-caption; + caption-side: bottom; + width: 300px; + color: #999; + font-style: italic; +}</pre> + +<p>이것은 우리에게 다음과 같은 결과를 제공합니다.</p> + +<p>{{ EmbedLiveSample('테이블_레이아웃', '100%', '170') }}</p> + +<p>이 예제 역시 여기 <a href="https://mdn.github.io/learning-area/css/styling-boxes/box-model-recap/css-tables-example.html">CSS 테이블 예제</a>에서 라이브로 볼 수 있고, 이곳 <a href="https://github.com/mdn/learning-area/blob/master/css/styling-boxes/box-model-recap/css-tables-example.html">소스 코드</a>에서도 역시 볼 수 있다.</p> + +<h2 id="다단_레이아웃">다단 레이아웃</h2> + +<p>다단 레이아웃 모듈은 텍스트가 신문지상에 나열되는 방식과 비슷하게 내용을 단 형태로 레이아웃할 수 있는 방법을 제공한다. 단을 따라 위아래 읽기는 사용자가 위아래로 스크롤하도록 강제하길 원하지 않는다면 웹 상황에서 덜 유용하다. 다만 콘텐츠를 단에 배치하는 것은 유용한 기술일 수 있다.</p> + +<p>한 블록을 다단 컨테이너 속으로 들여넣으려면 {{cssxref("column-count")}} 속성을 사용하여 브라우저에게 우리가 몇 단으로 나누길 원하는지 밝히거나 {{cssxref("column-width")}} 속성을 사용하여 브라우저에게 몇 단이 됐건 최소 해당 너비만한 단으로 컨테이너를 채우라고 말하면 된다.</p> + +<p>아래 예제에서 내부에 일명 <code>container</code> 클래스 해당하는 <code><div></code> 요소를 포함하는 HTML 블록을 가지고 시작한다.</p> + +<pre class="brush: html"><div class="container"> + <h1>다단 레이아웃</h1> + + <p>단락 1.</p> + <p>단락 2.</p> + +</div> +</pre> + +<p>우리는 해당 컨테이너에 200픽셀의 단 너비를 사용해서 브라우저가 컨테이너에 맞아 떨어지도록 최대 200픽셀의 단을 만들며, 그 뒤에 생성된 단 사이 나머지 공간을 나눠쓰게 된다.</p> + +<div id="다단_1"> +<div class="hidden"> +<h6 id="다단_예제">다단 예제</h6> + +<pre class="brush: html"> <div class="container"> + <h1>다단 레이아웃</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + + </div> + </pre> + +<pre class="brush: css">body { max-width: 800px; margin: 0 auto; } </pre> +</div> + +<pre class="brush: css"> .container { + column-width: 200px; + }</pre> +</div> + +<p>{{ EmbedLiveSample('다단_1', '100%', 200) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이번 글에서는 알아야 할 모든 레이아웃 기술에 대한 요약을 간단하게 제공했습니다. 개별 기술에 대한 자세한 내용을 계속 읽어보세요!</p> + +<p>{{NextMenu("Learn/CSS/CSS_layout/Normal_Flow", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">보통 흐름(normal flow)</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">포지셔닝</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Responsive_Design">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%AF%B8%EB%94%94%EC%96%B4_%EC%BF%BC%EB%A6%AC_%EC%B4%88%EB%B3%B4%EC%9E%90_%EC%95%88%EB%82%B4%EC%84%9C">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/legacy_layout_methods/index.html b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html new file mode 100644 index 0000000000..aca6565fd7 --- /dev/null +++ b/files/ko/learn/css/css_layout/legacy_layout_methods/index.html @@ -0,0 +1,588 @@ +--- +title: 레거시 조판 메서드 +slug: Learn/CSS/CSS_layout/Legacy_Layout_Methods +tags: + - 격자 시스템 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Legacy_Layout_Methods +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">격자 시스템은 씨에스에스 조판에서 사용되는 매우 일반적인 기능이며, 씨에스에스 격자 조판 이전에는 부동체 또는 기타 조판 기능을 이용하여 격자 조판이 구현되는 경향이 있었습니다. 당신의 조판을 정해진 수의 열(예를 들어 4, 6 또는 12열)이라 상상한 뒤 당신의 콘텐츠 열을 그 가상의 열 안에 끼워맞춥니다. 이 문서에서 우리는 이 오래된 메서드가 어떻게 작동하는지 탐구할 것입니다. 이는 여러분이 오래된 프로젝트에 몸을 담게 될 경우에 그들 메서드의 사용 방법에 대한 이해를 돕기 위함입니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문</a> 학습), 씨에스에스의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">박스 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>씨에스에스 격자 조판 이전에 사용된 격자 조판 시스템의 기본 개념을 브라우저에서 사용할 수 있습니다.</td> + </tr> + </tbody> +</table> + +<h2 id="씨에스에스_격자_조판_이전의_조판_및_격자_시스템">씨에스에스 격자 조판 이전의 조판 및 격자 시스템</h2> + +<p>씨에스에스가 아주 최근까지 내장된 격자 시스템을 갖고 있지 않았고, 그 대신 격자와 같은 디자인 생성을 위해 최적화에 못 미치는 다양한 방법을 사용했다니 디자인 배경의 경력자 관점에서 보면 놀랍게 보일 듯합니다. 우리는 이제 이것을 "래거시"라고 부릅니다.</p> + +<p>새로운 프로젝트의 경우 모든 조판의 기초를 형성하기 위해 대체로 씨에스에스 격자 조판이 하나 이상의 다른 현대 조판 메서드와 연동되어 사용됩니다. 그러나 여러분은 이러한 레거시 메서드를 사용하는 "격자 시스템"을 수시로 접하게 될겁니다. 그들 레거시 메서드의 작동 방식, 그리고 씨에스에스 격자 조판과 다른 이유에 대해 이해할 가치가 있습니다.</p> + +<p>이번 단원은 부동체와 가변상자 작동 방식을 기반으로 한 격자 시스템과 격자 프레임워크가 어떻게 작동하는지 설명합니다. 당신이 격자 조판을 공부한 상태라면 이 모든 것이 얼마나 복잡해 보이는지 놀랄 겁니다! 이러한 지식은 새로운 메서드를 지원하지 않는 브라우저를 위한 대체 코드를 작성해야 할 경우에 도움이 될 뿐만 아니라 이러한 유형의 시스템을 사용하는 기존 프로젝트에서 작업할 수 있게 해줄 것입니다.</p> + +<p>우리가 이들 격자 시스템을 탐구할 때, 그것들 중 어느 것도 씨에스에스 격자 조판(CSS Grid Layout)이 격자를 만드는 방식으로 격자를 만들지는 않는다는 사실을 염두에 두어야 합니다. 그들은 항목의 크기를 부여하고, 항목 무리 주변을 밀어내어 격자 <em>모양</em>처럼 정렬해 보여주는 식으로 작동합니다.</p> + +<h2 id="2열_조판">2열 조판</h2> + +<p>가능한 가장 간단한 예시인 두 개의 열 조판으로 시작하겠습니다. 아래 내용을 따라하려면 당신의 컴퓨터에 <code>index.html</code> 파일을 새로 작성하여, 거기에 <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">간단한 HTML 템플릿</a>으로 채우고, 파일 내부의 적절한 위치에 아래 코드를 삽입하면 됩니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>우선, 우리는 칼럼에 넣을 몇 가지 콘텐츠가 필요합니다. 현재 에이치티엠엘의 바디 내부에 있는 것을 아래 내용으로 대체하십시요:</p> + +<pre class="brush: html"><h1>2열 조판 예제</h1> +<div> + <h2>첫 번째 열</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>두 번째 열</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> + +<p>각 열에는 자체 콘텐츠를 포함하게 되고, 모든 콘텐츠를 한꺼번에 조작할 수 있게 해주는 외부 요소가 필요합니다. 이번 예제에서 우리는 {{htmlelement("div")}}를 선택했지만, 당신은 {{htmlelement("article")}}와 복수의 {{htmlelement("section")}}, {{htmlelement("aside")}}, 그 밖에 무엇이 됐건 한층 의미적으로 적절한 것을 선택할 수 있습니다.</p> + +<p>이제 씨에스에스 내용입니다. 우선 다음을 HTML에 적용해 몇 가지 기본적인 설정을 제공합니다.</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +}</pre> + +<p>에이치티엠엘 바디 요소는 900px의 너비가 될 때까지 뷰포트 너비의 90%를 차지할 것이며, 이 경우 그 너비에 고정될 것이며, 뷰포트 안에 중심부에 자신을 위치시킬 겁니다. 기본값으로 바디 요소의 자녀들({{htmlelement("h1")}}와 두 개의 {{htmlelement("div")}}는 바디 너비 100%까지 확장될 것입니다. 두 개의 {{htmlelement("div")}}가 나란히 부동하길 원한다면, 자녀 요소의 너비를 부모 요소의 너비의 총합계가 100% 또는 그 이하로 설정해 상대 요소와 나란히 들어맞을 수 있도록 해야 합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; +} + +div:nth-of-type(2) { + width: 48%; +}</pre> + +<p>여기서 우리는 두 요소의 너비를 부모 요소의 48%로 설정했습니다. 너비의 총합은 96%로써 결국 4% 남는 공간이 두 열 사이의 배수구 역할을 하게 됩니다. 이제 우리는 열을 부동(浮動)시킬 필요가 있습니다. 다음과 같이:</p> + +<pre class="brush: css">div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +}</pre> + +<p>이 모든 것을 종합하면 다음과 같은 결과가 나와야 합니다.</p> + +<div id="부동_2열"> +<div class="hidden"> +<h6 id="단순한_2열_조판">단순한 2열 조판</h6> + +<pre class="brush: html"><h1>2 column layout example</h1> + +<div> + <h2>첫 번째 열</h2> + <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> +</div> + +<div> + <h2>두 번째 열</h2> + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 0 auto; +} + +div:nth-of-type(1) { + width: 48%; + float: left; +} + +div:nth-of-type(2) { + width: 48%; + float: right; +} +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('부동_2열', '100%', 520) }}</p> + +<p>여기서 여러분은 우리가 모든 너비에 대해 백분율을 사용하고 있음을 알아차릴 것입니다. 이것은 <strong>liquid layout</strong>을 생성하기 때문에 꽤 좋은 전략입니다. 이것은 서로 다른 화면 크기에 적응하고 더 작은 화면 크기에서 열 너비에 대해 동일한 비율을 유지하게 됩니다. 브라우저 창의 너비를 조정해 보십시오. 이같은 특징은 반응형 웹 디자인을 위한 귀중한 도구입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 예제가 작종하는 장면을 여기서 <a href="http://mdn.github.io/learning-area/css/css-layout/floats/0_two-column-layout.html">0_two-column-layout.html</a> 볼 수 있습니다. (또한, 여기 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/floats/0_two-column-layout.html">소스 코드</a>)도 있다.</p> +</div> + +<h2 id="간단한_레거시_격자_프레임워크_생성하기">간단한 레거시 격자 프레임워크 생성하기</h2> + +<p>레거시 프레임 워크의 대부분은 격자처럼 보이는 것을 만들기 위해한 열을 다른 열 옆에 부동시키기 위해 {{cssxref("float")}} 속성의 동작을 이용합니다. 부동을 포함한 격자 생성 과정을 통해 이 방법이 어떻게 작동하는지 여러분에게 보여주고, 여러분이 <a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동 및 해제</a> 단원에서 배운 것을 바탕으로 능력을 배가하기 위해 더 발전된 개념을 도입합니다.</p> + +<p>격자 프레임워크를 생성할 수 있는 가장 편리하게 유형은 고정 너비입니다. 즉, 우리는 우리가 목표로 하는 디자인의 총 너비, 우리가 원하는 열의 수, 배수로의 너비 및 열의 너비를 계산할 필요가 있습니다. 대신 브라우저 너비에 따라 커지고 축소되는 열이 있는 격자상에 디자인을 배치하기로 한다면 열 무리에 대한 백분율 너비와 열 사이 배수로 너비를 계산해야 할 겁니다.</p> + +<p>다음 절에서는 두 가지를 어떻게 생성할지 살펴볼 것입니다. 우리는 12개의 열 격자를 생성할 것입니다. 12열이 6, 4, 3, 2로 잘 나눌 수 있다는 점을 감안할 때, 매우 일반적인 선택입니다.</p> + +<h3 id="간단한_고정_너비_격자">간단한 고정 너비 격자</h3> + +<p>먼저 고정 너비 열을 사용하는 격자 시스템을 생성해 봅시다.</p> + +<p>먼저, 우리 예제인 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid.html">simple-grid.html</a> 사본 파일을 만듭니다. 여기에는 바디 부분에 다음과 같은 마크업을 포함하고 있습니다.</p> + +<pre class="brush: html"><div class="wrapper"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col span1">13</div> + <div class="col span6">14</div> + <div class="col span3">15</div> + <div class="col span2">16</div> + </div> +</div></pre> + +<p>우리의 목표는 이것을 12열 격자상에 2행 격자를 시연하는 것입니다. 상단 행은 개별 열의 크기를 나타내고 두 번째 행은 격자 크기가 서로 다른 영역입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13901/simple-grid-finished.png" style="display: block; height: 50px; margin: 0px auto; width: 952px;"></p> + +<p>{{htmlelement("style")}} 요소에는 외곽(래퍼) 컨테이너에 980픽셀의 너비를 부여하는 아래와 같은 코드를 추가하고 오른쪽에 패딩으로는 20픽셀 우측을 추가합니다. 이로써 열 및 배수로의 총 너비를 위해 960픽셀이 주어집니다. 이 경우, 사이트의 모든 요소에 {{cssxref("box-sizing")}}을 <code>border-box</code>로 설정했기 때문에 패딩은 총 콘텐츠 너비에서 제외할 수 있습니다(자세한 설명은 <a href="/en-US/docs/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">상자 모델의 전면 변경</a>을 참조하세요).</p> + +<pre class="brush: css">* { + box-sizing: border-box; +} + +body { + width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 20px; +}</pre> + +<p>이제 격자의 각 행을 둘러싸는 행 컨테이너를 사용하여 한 행을 다른 행으로부터 정리하여 구분합니다. 다음과 같은 규칙을 이전 규칙 아래에 추가하십시요:</p> + +<pre class="brush: css">.row { + clear: both; +}</pre> + +<p>이렇게 정리를 적용한다는 것은 요소 무리가 딸린 각각의 행을 요소 무리로 가득 채울 필요가 없다는 것을 의미합니다. 행은 계속 분리된 채로 있으며, 서로 간섭하지 않습니다.</p> + +<p>열 사이의 배수로는 20픽셀 너비입니다. 컨테이너의 우측 편에 패딩 20픽셀을 부여해 균형을 잡기 위해 첫 번째 열을 포함하여 각 열의 왼편에 여백의 형태로 배수로를 생성했습니다. 그래서 우리는 총 12개의 배수로 가지고 있습니다. 따라서 12 x 20 = 240입니다.</p> + +<p>우리는 총 너비 960 픽셀에서 배수로 부분을 빼야 함으로 우리의 열 무리를 위해 720픽셀이 주어집니다. 당장에 그것을 12로 나눈다면, 각 열은 60 픽셀이어야 한다는 것을 알 수 있습니다.</p> + +<p>다음 단계는 클래스 <code>.col</code>에 대한 규칙을 생성하는 일입니다. 동 클래스에 속한 요소를 왼쪽으로 부동시키고, 배수구를 형성하기 위해 20픽셀의 {{cssxref("margin-left")}}와 60픽셀의 {{cssxref("width")}} 값을 동 요소에 부여합니다. 다음 규칙을 당신의 씨에스에스의 맨 아래에 추가하십시요:</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 20px; + width: 60px; + background: rgb(255, 150, 150); +}</pre> + +<p>이제 단일 열 무리 형태의 상단 행은 격자처럼 깔끔하게 배치됩니다.</p> + +<div class="note"> +<p><strong>주석</strong>: 각 열에 밝은 빨간색 색상을 부여하여 각 공간이 얼마나 많은지 정확하게 볼 수 있습니다.</p> +</div> + +<p>두 개 이상의 열을 하나로 합치길 원하는 조판 컨테이너에 대해선 해당 컨테이너에 {{cssxref("width")}} 값을 필요한(합치기 할) 열 갯수에 맞춰(아울러 열 사이 배수구 숫자까지 포함해) 조정하기 위해 특별한 클래스를 부여할 필요가 있습니다. 우리는 컨테이너 무리가 2열에서 12열까지 (원하는 열 갯수만큼) 하나로 합치기할 수 있도록 추가 클래스를 만들 필요가 있습니다. 각 열의 너비는 (하나로 합쳐질) 해당 열 갯수의 열 너비와 배수구 너비를 합산한 결과입니다. 여기서 배수구 숫자는 항상 열 갯수에서 하나가 빠집니다.</p> + +<p>당신의 씨에스에스 맨 아래에 다음을 추가하십시요.</p> + +<pre class="brush: css">/* Two column widths (120px) plus one gutter width (20px) */ +.col.span2 { width: 140px; } +/* Three column widths (180px) plus two gutter widths (40px) */ +.col.span3 { width: 220px; } +/* And so on... */ +.col.span4 { width: 300px; } +.col.span5 { width: 380px; } +.col.span6 { width: 460px; } +.col.span7 { width: 540px; } +.col.span8 { width: 620px; } +.col.span9 { width: 700px; } +.col.span10 { width: 780px; } +.col.span11 { width: 860px; } +.col.span12 { width: 940px; }</pre> + +<p>이러한 클래스를 생성해 놓았다면 격자에 서로 다른 너비의 열 무리를 배치할 수 있습니다. 페이지를 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p> + +<div class="note"> +<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/simple-grid-finished.html">라이브로도 보세요</a>).</p> +</div> + +<p>당신의 요소 무리에 적용한 클래스를 수정하거나 일부 컨테이너를 추가 및 제거해보며 당신이 어떻게 조판에 변경을 가할 수 있는지 확인하십시오 예를 들어 두 번째 행을 이렇게 만들 수 있습니다:</p> + +<pre class="brush: css"><div class="row"> + <div class="col span8">13</div> + <div class="col span4">14</div> +</div></pre> + +<p>이제 격자 시스템이 작동합니다. 여러분은 단순히 행 무리를 정의하고 각 행에 열 갯수를 정의한 다음 각 컨테이너에 필요한 내용을 채울 수 있습니다. 대단하죠!</p> + +<h3 id="유동_격자_생성하기">유동 격자 생성하기</h3> + +<p>우리 격자는 잘 작동하지만, 고정 너비를 가지고 있습니다. 우리는 브라우저 {{Glossary("viewport")}}에서 사용 가능한 공간과 함께 확대되고 축소될 가변 (유동) 격자를 정말로 원합니다. 이를 위해 기준 픽셀 너비를 백분율로 바꿀 수 있습니다.</p> + +<p>고정 너비를 유연한 백분율 기반으로 변환하는 방정식은 다음과 같습니다.</p> + +<pre>target / context = result</pre> + +<p>열 너비의 경우 목표 너비는 60픽셀이고 콘텐츠는 래퍼 클래스의 총합 960픽셀입니다. 우리는 백분율을 계산하기 위해 다음을 사용할 수 있습니다.</p> + +<pre>60 / 960 = 0.0625</pre> + +<p>그리고 나서 우리는 소수점을 2자리 옮기면 백분율 6.25%가 주어집니다. 그래서 우리의 씨에스에스에서 60픽셀의 열 너비를 6.25%로 대체할 수 있습니다.</p> + +<p>우리는 여러분의 배수로 너비에도 똑같이 적용해야 합니다.</p> + +<pre>20 / 960 = 0.02083333333</pre> + +<p>따라서 우리는 <code>.col</code> 규칙에 있는 20픽셀의 {{cssxref("margin-left")}}과 <code>.wrapper</code> 규칙에 있는 20픽셀의 {{cssxref("padding-right")}}를 2.08333333%로 대체해야 합니다.</p> + +<h4 id="여러분의_격자_업데이트_하기">여러분의 격자 업데이트 하기</h4> + +<p>이번 절을 시작하려면 이전 예제 페이지의 새 사본을 만들거나 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/simple-grid-finished.html">simple-grid-finished.html</a>를 착수파일로 사용하십시요.</p> + +<p>다음과 같이 (<code>.wrapper</code> 선택기에 해당하는) 두 번째 씨에스에스 규칙을 업데이트 하십시요:</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +}</pre> + +<p>우리는 백분율 너비를 부여했을뿐만 아니라 조판이 과도하게 확대되는 것을 막기 위해 {{cssxref("max-width")}} 속성을 추가했습니다.</p> + +<p>다음은 아래와 같이 (<code>.col</code> 선택기에 해당하는) 네 번째 씨에스에스 규칙을 업데이트 하십시요:</p> + +<pre class="brush: css">.col { + float: left; + margin-left: 2.08333333%; + width: 6.25%; + background: rgb(255, 150, 150); +}</pre> + +<p>이제 약간 노동력이 투여되어야 할 부분이 있습니다. 픽셀 너비보다는 백분율을 사용하기 위해 모든 <code>.col.span</code> 규칙을 업데이트해야 합니다. 계산기를 사용하려면 시간이 좀 걸립니다. 여러분들의 노력을 아끼기 위해, 아래와 같이 여러분을 대신에 우리가 마무리지었습니다.</p> + +<p>다음을 통해 씨에스에스 규칙의 하위 블록을 업데이트합니다.</p> + +<pre class="brush: css">/* Two column widths (12.5%) plus one gutter width (2.08333333%) */ +.col.span2 { width: 14.58333333%; } +/* Three column widths (18.75%) plus two gutter widths (4.1666666) */ +.col.span3 { width: 22.91666666%; } +/* And so on... */ +.col.span4 { width: 31.24999999%; } +.col.span5 { width: 39.58333332%; } +.col.span6 { width: 47.91666665%; } +.col.span7 { width: 56.24999998%; } +.col.span8 { width: 64.58333331%; } +.col.span9 { width: 72.91666664%; } +.col.span10 { width: 81.24999997%; } +.col.span11 { width: 89.5833333%; } +.col.span12 { width: 97.91666663%; }</pre> + +<p>이제 코드를 저장하고 브라우저에 내용을 불러들이면 뷰포트 너비를 변경해보십시오. 열 너비가 멋지게 조정되는 것을 볼 수 있어야 합니다.</p> + +<div class="note"> +<p><strong>참조</strong>: 위의 예제를 제대로 적용하기가 어렵다면 깃허브에 있는 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">완성된 버전</a>과 비교해보라. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid.html">라이브로도 보세요</a>).</p> +</div> + +<h3 id="calc_함수를_사용한_편리한_계산법">calc() 함수를 사용한 편리한 계산법</h3> + +<p>씨에스에스 내부에서 직접 calc() 함수를 사용하여 수학 계산을 할 수 있습니다. 이것은 여러분의 씨에스에스 값에 단순한 수학 방정식을 삽입하고 값이 무엇인지 계산할 수 있게 해줍니다. 복잡한 수학이 있을 때 특히 유용하며, 예를 들어 "나는 이 요소의 높이가 항상 부모의 높이의 100% 마이너스 50px가 되기를 원한다"와 같은 서로 다른 단위를 사용하는 셈법까지 계산할 수 있습니다. <a href="/ko/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API#Keeping_the_interface_constrained_to_the_viewport_regardless_of_device_height_with_calc()">MediaRecorder API 자습서에 있는 예제를 보십시요</a>.</p> + +<p>어쨌든, 다시 여러분의 격자로 복귀합시다! 여러분의 격자에서 한 열 이상을 하나로 합치기하고자 하는 어떤 열은 총 너비가 6.25%이고, 거기에 하나로 합치기할 열 갯수를 곱하고, 거기에 2.08333333%를 배수로 갯수로 곱하기합니다(실제 배수로의 갯수는 항상 열 갯수에서 하나 빼기가 됩니다.) 여러분은 <code>calc()</code> 함수을 통해서 여러분이 이러한 셈법을 너비 값 내부에서 바로 계산을 할 수 있으므로, 4열 합치기할 항목에 대해서는 다음과 같이 할 수 있습니다.</p> + +<pre class="brush: css">.col.span4 { + width: calc((6.25%*4) + (2.08333333%*3)); +}</pre> + +<p>여러분의 씨에스에스 규칙의 하단 블록을 다음 값으로 대체한 다음 브라우저에서 다시 불러들여 동일한 결과를 얻을 수 있는지 확인하십시오:</p> + +<pre class="brush: css">.col.span2 { width: calc((6.25%*2) + 2.08333333%); } +.col.span3 { width: calc((6.25%*3) + (2.08333333%*2)); } +.col.span4 { width: calc((6.25%*4) + (2.08333333%*3)); } +.col.span5 { width: calc((6.25%*5) + (2.08333333%*4)); } +.col.span6 { width: calc((6.25%*6) + (2.08333333%*5)); } +.col.span7 { width: calc((6.25%*7) + (2.08333333%*6)); } +.col.span8 { width: calc((6.25%*8) + (2.08333333%*7)); } +.col.span9 { width: calc((6.25%*9) + (2.08333333%*8)); } +.col.span10 { width: calc((6.25%*10) + (2.08333333%*9)); } +.col.span11 { width: calc((6.25%*11) + (2.08333333%*10)); } +.col.span12 { width: calc((6.25%*12) + (2.08333333%*11)); }</pre> + +<div class="note"> +<p><strong>참고</strong>: 여러분은 최종 버전을 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-calc.html">fluid-grid-calc.html</a>에서 확인할 수 있습니다. (<a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-calc.html">라이브로도 보세요</a>).</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 여러분의 실습 과정에서 이 같은 내용이 제대로 작동되지 않았다면 여러분의 브라우저가 <code>calc()</code> 함수를 지원하지 않기 때문일 수 있습니다. 다만 이 함수는 멀게는 인터넷 익스플로러 9까지 브라우저 구분없이 지원됩니다.</p> +</div> + +<h3 id="말_되는_VS_“말_안되는”_격자_시스템">말 되는 VS “말 안되는” 격자 시스템</h3> + +<p>조판을 정의하기 위해 여러분의 마크업에 클래스를 추가하면 콘텐츠와 마크업이 시각적 프리젠테이션과 결부됩니다. 당신은 때때로 콘텐츠를 설명하는 클래스에 말되는 이름을 사용하기보다는 콘텐츠가 어떻게 보일지 설명하는 "말 안되는" 이름을 사용하는 씨에스에스 클래스 용례를 접하게 됩니다. 여기서 <code>span2</code>, <code>span3</code>, 기타 등등과 같은 클래스의 경우가 그렇습니다.</p> + +<p>이런 식의 접근 방법만 있는게 아닙니다. 대신 여러분이 격자를 결정한 다음 말 되게 명명된 기존 클래스 규칙에 크기 정보를 추가할 수 있습니다. 예를 들어, 여러분이 8열을 하나로 합치기 원하는 {{htmlelement("div")}} 요소에 <code>content</code>라는 클래스를 부여할 경우 <code>span8</code> 클래스가 출처인 너비 계산값을 복사해 쓸 수 있는데, 그와 같은 규칙은 이렇게 제공됩니다:</p> + +<pre class="brush: css">.content { + width: calc((6.25%*8) + (2.08333333%*7)); +}</pre> + +<div class="note"> +<p><strong>참고</strong>: 당신이 <a href="http://sass-lang.com/">Sass</a>와 같은 전처리기를 사용하려면, 당신을 위해 해당 값을 삽입해주는 간단한 <code>maxin</code>를 생성할 수 있다.</p> +</div> + +<h3 id="격자_내부에_컨테이너_오프셋_가동">격자 내부에 컨테이너 오프셋 가동</h3> + +<p>우리가 생성한 격자는 컨테이너 무리 전체를 격자의 왼쪽편과 일치시켜 출발하길 원하는 경우에 잘 작동합니다. 첫 번째 컨테이너 또는 컨테이너 사이에 빈 열 공간을 남기고 싶다면 여러분의 사이트에 왼쪽 여백을 추가하여 격자를 시각적으로 밀어 넣을 수 있는 오프셋 클래스를 생성해야 합니다. 또 다시 수학을!</p> + +<p>이렇게 해봅시다.</p> + +<p>이전 코드에서 출발하거나, <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid.html">fluid-grid.html</a>을 착수 파일로 사용합니다.</p> + +<p>컨테이너 요소를 한 열 너비만큼 밀어낼 클래스를 여러분의 씨에스에스 안에 생성합니다. 다음을 당신의 씨에스에스의 맨 아래에 추가하세요:</p> + +<pre class="brush: css">.offset-by-one { + margin-left: calc(6.25% + (2.08333333%*2)); +}</pre> + +<p>Or if you prefer to calculate the percentages yourself, use this one:</p> + +<pre class="brush: css">.offset-by-one { + margin-left: 10.41666666%; +}</pre> + +<p>이제 여러분이 왼편에 하나의 열 너비의 빈 공간을 남기길 원하는 컨테이너는 어느 것이든 이 클래스를 추가할 수 있습니다. 예를 들면 여러분의 에이치티엠엘에 이런 내용이 있다면:</p> + +<pre class="brush: html"><div class="col span6">14</div></pre> + +<p>그걸 다음으로 대체하세요.</p> + +<pre class="brush: html"><div class="col span5 offset-by-one">14</div></pre> + +<div class="note"> +<p><strong>참고</strong>: 간격띄우기를 위한 공간을 만들기 위해, 합쳐질 열의 갯수를 줄여야 한다는 걸 놓치지 마세요!</p> +</div> + +<p>달라진 모습을 보려면 브라우저에 불러들이거나 새로고침을 하세요. 아니면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/fluid-grid-offset.html">fluid-grid-offset.html</a> 예제가 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/fluid-grid-offset.html">실제 실행</a>되는 장면을 보세요. 완성된 예는 다음과 같이 보여야 합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13903/offset-grid-finished.png" style="display: block; height: 47px; margin: 0px auto; width: 944px;"></p> + +<div class="note"> +<p><strong>참고</strong>: 추가 연습의 하나로 여러분은 <code>offset-by-two</code>(2칸 간격띄우기) 클래스를 구현할 수 있습니가?</p> +</div> + +<h3 id="부동_격자_제한">부동 격자 제한</h3> + +<p>이런 시스템을 사용할 때는 총 너비가 정확하게 합산되는지, 행이 수용할 수 있는 것보다 더 많은 열을 하나로 합치려는 요소 무리를 행에 포함하지 않도록 주의해야 합니다. 부동체가 작동하는 방식 때문에 격자 열의 갯수가 해당 격자에 비해 너무 과대해지면 끝 부분에 있는 요소 무리가 다음 행으로 떨어지면서 격자가 깨집니다.</p> + +<p>또한 요소 무리의 콘텐츠가 그들 요소들이 점유하는 행보다 넓어지면, 대열이탈되어 엉망으로 보일 것이라는 점을 염두에 두십시오.</p> + +<p>이 시스템의 가장 큰 한계는 본질적으로 1차원이라는 점에 있습니다. 우리가 지금 여러 열에 걸쳐 요소를 하나로 합치도록 처리하자는 것이지 행 처리가 아닙니다. 이러한 오래된 조판 메서드는 요소의 높이를 명시적으로 설정하지 않고서는 요소의 높이를 제어하기가 매우 어렵습니다. 이는 매우 유연하지 않은 접근 방식이기도 합니다. 이는 여러분의 콘텐츠가 특정 높이라고 예상될 경우에만 먹힙니다.</p> + +<h2 id="가변상자_격자">가변상자 격자?</h2> + +<p><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>에 대한 이전 기사를 읽으면 가변상자가 격자 시스템을 생성하는 데 이상적인 해결책이라고 생각할 수 있습니다. 이용할 수 있는 가변상자 기반 격자 시스템이 많이 있으며, 가변상자는 상기한 내용에서 격자를 만들 때 이미 발견한 많은 문제를 해결할 수 있습니다.</p> + +<p>그러나 가변상자는 격자 시스템처럼 디자인되지 않았으며 그런 식의 시스템으로 사용할 때 일련의 새로운 도전 과제를 던져줍니다. 간단한 예로 위에서 사용한 것과 동일한 예제 마크업을 채택해 아래의 씨에스에스를 사용하여 <code>wrapper</code>와 <code>row</code> 및 <code>col</code> 클래스를 사용하여 스타일링할 수 있습니다.</p> + +<pre class="brush: css">body { + width: 90%; + max-width: 980px; + margin: 0 auto; +} + +.wrapper { + padding-right: 2.08333333%; +} + + +.row { + display: flex; +} + +.col { + margin-left: 2.08333333%; + margin-bottom: 1em; + width: 6.25%; + flex: 1 1 auto; + background: rgb(255,150,150); +}</pre> + +<p>이 대체 요소를 여러분의 예제에서 만들거나, 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/flexbox-grid.html">flexbox-grid.html</a> 예제 코드를 볼 수 있습니다(<a href="http://mdn.github.io/learning-area/css/css-layout/grids/flexbox-grid.html">실제 실행</a> 장면도 참조하세요).</p> + +<p>여기에서 우리는 각 행을 가변 컨테이너로 탈바꿈하고 있습니다. 가변상자 기반 격자가 있다고 하더라도 요소를 다합쳐 100% 미만를 차지하는 요소 무리를 확보하려면 여러분은 여전히 행이 필요합니다. 우리는 해당 콘테이너를 <code>display: flex</code>로 설정했습니다.</p> + +<p>우리는 <code>.col</code> 클래스상에 {{cssxref("flex")}} 속성의 첫 번째 값인 ({{cssxref("flex-grow")}})를 1로 설정하여 항목 무리가 확장할 수 있게 하고, 두 번째 속성값인 ({{cssxref("flex-shrink")}})를 1로 설정하여 항목 무리가 축소할 수 있게 하며 세 번째 값인 ({{cssxref("flex-basis")}})를 <code>auto</code>로 설정했습니다. 우리의 요소는 {{cssxref("width")}}(너비)가 설정되어 있고, <code>auto</code> 값을 통해 해당 너비값을 <code>flex-basis</code> 값으로 사용하게 됩니다.</p> + +<p>맨 위 라인에는 격자 위에 12개의 깔끔한 상자가 있고, 뷰포트 너비를 변경할 때 상자는 똑같이 확장하고 수축합니다. 그러나 다음 행에서는 4개의 항목만 있으며, 이들은 60px 기준에서 확장하고 축소됩니다. 그 중 단 4개만 상위 행에 있는 항목보다 훨씬 더 많이 확장할 수 있습니다. 그 결과 두 번째 행에서 모두 같은 너비를 차지합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13905/flexbox-grid-incomplete.png" style="display: block; height: 71px; margin: 0px auto; width: 944px;"></p> + +<p>이를 수정하려면 해당 요소에 대해 <code>flex-basis</code>가 사용하는 값을 대체할 너비를 제공하기 위해 <code>span</code> 클래스를 포함해야 합니다.</p> + +<p>또한 상위 항목 무리가 사용하는 격자를 존중하지 않습니다. 왜냐하면 그들은 그것에 대해 아무것도 모르기 때문입니다.</p> + +<p>가변상자는 디자인 자체로 <strong>one-dimensional</strong>입니다. 그것은 1차원 즉 행이나 열을 다룹니다. 열과 행에 대해 엄격한 격자를 만들 수는 없습니다. 즉, 여러분의 격자에 가변상자를 사용하려면 부동 조판에서와 같이 백분율을 계산해야 합니다.</p> + +<p>당신이 참여하는 프로젝트에서 부동체보다 가변상자가 제공하는 공간 배분 능력이나 추가적인 정렬 기능을 이유로 여전히 가변상자 '격자'를 선택해 사용할 수도 있습니다. 하지만 당신이 사용하는 것이 원래 설계된 목적 이외의 다른 목적의 도구를 사용하고 있다는 것을 알아야 합니다. 그래서 당신은 이런 느낌이 들지도 모르겠다. 내가 원하는 최종 결과를 얻으려는 나에게 이놈이 추가적인 장애물을 통과하도록 만들고 있구나.</p> + +<h2 id="제3자_격자_시스템">제3자 격자 시스템</h2> + +<p>이제 우리는 격자 셈법의 배경이 되는 수학을 이해하게 되면서, 널리 이용되고 있는 제3자 격자 시스템 중 일부를 살펴 볼만한 좋은 여건을 갖췄습니다. 웹에서 "씨에스에스 격자 프레임워크"를 검색하면 선택할 수 있는 옵션 목록이 엄청납니다. <a href="http://getbootstrap.com/">Bootstrap</a>와 <a href="http://foundation.zurb.com/">Foundation</a>같은 인기 프레임워크에는 격자 시스템이 포함되어 있습니다. 또한 씨에스에스 혹은 전처리기를 사용하여 개발된 독립형 격자 시스템도 있습니다.</p> + +<p>이 독립형 시스템 중 하나를 살펴봅니다. 이 시스템은 격자 프레임워크를 사용하는 일반적인 기술을 보여줍니다. 우리가 사용할 격자는 단순한 씨에스에스 프레임워크인 Skeleton의 일부입니다.</p> + +<p>시작하려면 <a href="http://getskeleton.com/">Skeleton website</a>를 방문하고 ZIP 파일을 다운로드하기 위해 "다운로드"를 선택합니다. 압축파일을 풀고 skeleton.css와 normalize.css를 새 폴더에 복사하십시요.</p> + +<p><a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton.html">html-skeleton.html</a>파일의 복사본을 만들어, skeleton과 normalize 씨에스에스 파일이 위치한 폴더와 같은 폴더에 저장합니다.</p> + +<p>다음과 같은 내용을 복사본 파일의 헤드 섹션에 skeleton과 normalize 씨에스에스 파일에 포함시킵니다:</p> + +<pre class="brush: html"><link href="normalize.css" rel="stylesheet"> +<link href="skeleton.css" rel="stylesheet"></pre> + +<p>Skeleton에는 격자 시스템 이외에도 많은 내용이 포함되어 있습니다. 타이포그래피를 위한 씨에스에스 및 착수점으로 사용할 수 있는 다른 페이지 요소도 포함되어 있습니다. 하지만 지금은 이들을 기본값으로 남겨둘 겁이다. 우리가 정말로 관심을 갖고 있는 것은 격자입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: <a href="/en-US/docs/">Normalize</a>는 니콜라스 겔러거가 작성한 정말로 유용한 소형 씨에스에스 라이브러리로, 자동으로 몇 가지 유용한 기본 조판의 수정을 수행하고, 기본 요소 스타일링을 브라우저를 막론하고 보다 일관되게 만들어 줍니다.</p> +</div> + +<p>우리는 이전 예와 비슷한 에이치티엠엘을 사용할 것입니다. 다음을 여려분의 에이치티엠엘 바디에 추가하십시요:</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="col">1</div> + <div class="col">2</div> + <div class="col">3</div> + <div class="col">4</div> + <div class="col">5</div> + <div class="col">6</div> + <div class="col">7</div> + <div class="col">8</div> + <div class="col">9</div> + <div class="col">10</div> + <div class="col">11</div> + <div class="col">12</div> + </div> + <div class="row"> + <div class="col">13</div> + <div class="col">14</div> + <div class="col">15</div> + <div class="col">16</div> + </div> +</div></pre> + +<p><br> + Skeleton을 사용하기 위해서는 <code>container</code> 클래스를 랩퍼(바깥쪽) {{htmlelement("div")}}에 부여할 필요가 있습니다. 이 내용은 이미 우리 에이치티엠엘에 포함되어 있습니다. 이것은 최대 너비가 960픽셀인 콘텐츠를 중심부에 위치시킵니다. 이제 상자의 너비가 어떻게 960픽셀을 절대 초과할 수 없는지 볼 수 있습니다.</p> + +<p>이 클래스를 적용할 때 사용되는 씨에스에스를 보려면 skeleton.css 파일을 직접 볼 수 있습니다. <code><div></code>는 <code>auto</code> 좌우 여백 을 사용하여 중심부 위치에 놓이고, 20픽셀의 패딩을 좌우로 적용한다. 또한 Skeleton은 {{cssxref("box-sizing")}} 속성을 우리가 이전에 했던 것처럼 <code>border-box</code>로 설정하므로 이 요소의 패딩과 경계가 전체 너비에 포함됩니다.</p> + +<pre class="brush: css">.container { + position: relative; + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 20px; + box-sizing: border-box; +}</pre> + +<p>요소는 행 안에 있는 경우에만 격자의 일부가 될 수 있으므로, 이전 예제와 마찬가지로 추가적인 <code><div></code>가 필요하거나 <code>content</code>와 <code><div></code>, 실제 콘텐츠 컨테이너 <code><div></code> 무리 사이에 중첩된 <code>row</code> 클래스가 부여된 다른 요소가 필요합니다. 우리는 이미 이것을 완성했습니다.</p> + +<p>이제 컨테이너 상자를 정리해 봅시다. Skeleton은 12개의 열 격자 기반입니다. 맨 위 라인의 상자 전체는 그 상자 무리를 하나의 열로 합치기 위해 모두 <code>one column</code>이란 클래스가 필요합니다.</p> + +<p>아래에 나온 에이치티엠엘 조각 내용을 지금 추가하십시오.</p> + +<pre class="brush: html"><div class="container"> + <div class="row"> + <div class="one column">1</div> + <div class="one column">2</div> + <div class="one column">3</div> + /* and so on */ + </div> +</div></pre> + +<p>다음으로 아래와 같이 하나로 합치기할 열의 수를 설명하는 클래스를 두 번째 행에 놓인 컨테이너에 부여합니다.</p> + +<pre class="brush: html"><div class="row"> + <div class="one column">13</div> + <div class="six columns">14</div> + <div class="three columns">15</div> + <div class="two columns">16</div> +</div></pre> + +<p>에이치티엠엘 파일을 저장하고 브라우저에 불러들여 효과를 확인하십시오.</p> + +<div class="note"> +<p><strong>참고</strong>:위의 예제를 제대로 적용하기가 어렵다면, 그것을 우리의 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/grids/html-skeleton-finished.html">html-skeleton-finished.html</a> 파일과 비교해 보십시요. (그것을 <a href="http://mdn.github.io/learning-area/css/css-layout/grids/html-skeleton-finished.html">라이브로도 보세요</a>).</p> +</div> + +<p>당신이 (앞서 다운로드한) skeleton.css 내용을 보면 어떻게 작동하는지 알 수 있습니다. 예를 들어, Skeleton 파일에는 다음과 같이 "three columns" 클래스가 적용되는 요소를 스타일링하기 위한 정의가 부여되어 있습니다.</p> + +<pre class="brush: css">.three.columns { width: 22%; }</pre> + +<p>모든 Skeleton(또는 다른 격자 프레임워크)은 여러분의 마크업에 추가하여 사용할 수 있는 미리 정의된 클래스를 설정하는 것입니다. 해당 백분율을 계산하는 작업은 마치 당신이 직접 한 것과 똑같습니다.</p> + +<p>보시다시피, 우리는 Skeleton을 사용할 때 씨에스에스를 거의 쓰지 않아도 됩니다. 그것은(Skeleton) 당신의 마크업에 클래스를 추가할 때 우리를 대신해 모든 부동 요소를 처리합니다. 격자 시스템에 대한 프레임워크를 사용하여 만들어진 무언가에 조판에 대한 책임을 넘겨주는 이러한 능력을 갖춘 Skeleton은 설득력있는 선택입니다. 그러나 요즘 씨에스에스 격자 조판도 있고해서 많은 개발자가 씨에스에스가 제공하는 내장형 고유 격자를 사용하기 위해 이러한 프레임 워크에서 멀어지고 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 다양한 격자 시스템이 어떻게 만들어지는지 이해하게 되었는데, 이는 구형 사이트에서 작업할 때와 씨에스에스 격자 조판이 제공하는 기본 격자와 이들 구형 시스템 간의 차이를 이해하는 데 유용합니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout/Supporting_Older_Browsers", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/multiple-column_layout/index.html b/files/ko/learn/css/css_layout/multiple-column_layout/index.html new file mode 100644 index 0000000000..70f13c6c39 --- /dev/null +++ b/files/ko/learn/css/css_layout/multiple-column_layout/index.html @@ -0,0 +1,415 @@ +--- +title: 다단 레이아웃 +slug: Learn/CSS/CSS_layout/Multiple-column_Layout +tags: + - CSS 붕괴 + - 다단 + - 다단 레이아웃 + - 안내서 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Multiple-column_Layout +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">CSS 다단 레이아웃 규격은 신문에서 볼 수 있듯이 콘텐츠를 단으로 배치하는 방법을 제공합니다. 이 문서는 그 기능을 어떻게 사용하는지 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문서</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>신문에서 찾을 수 있는 것과 같은 웹 페이지상에 다단 레이아웃을 만드는 방법을 학습합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="기본_사례">기본 사례</h2> + +<p>이제 다단 레이아웃을 사용하는 방법을 탐색할 것입니다. 이를 일컬어 <em>multicol</em>(다단)로 통칭합니다. 아래 내용을 따라하려면 <a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/multicol/0-starting-point.html">다단 착수 파일</a>을 다운로드하고 적절한 장소에 CSS를 추가할 수 있습니다. 해당 섹션의 맨 아래에는 최종 코드가 어떻게 생겼는지에 대한 실제 예제가 있습니다.</p> + +<p>우리의 착수 파일에는 아주 간단한 HTML이 포함되어 있습니다. 그 내용은 제목과 일부 단락이 내부에 있는 <code>container</code> 클래스 래퍼입니다.</p> + +<p>컨테이너 클래스에 해당하는 {{htmlelement("div")}}는 다단 컨테이너가 될 예정입니다. {{cssxref("column-count")}} 혹은 {{cssxref("column-width")}} 속성 중의 하나를 사용해서 다단으로 전환합니다. <code>column-count</code> 속성은 당신이 부여하는 값만큼 다단을 생성하게 되며, 당신의 스타일시트에 다음과 같은 CSS를 추가하고 페이지를 새로고침하면 당신은 삼단 레이아웃을 얻게 됩니다:</p> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> + +<p>당신이 생성하는 단은 가변 너비를 갖게됩니다. 말하자면 브라우저가 각 단에 할당한 공간의 크기를 계산합니다.<</p> + +<div id="다단_1"> +<div class="hidden"> +<h6 id="단의_갯수_예제">단의 갯수 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} + </pre> +</div> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div> +</pre> + +<pre class="brush: css">.container { + column-count: 3; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('다단_1', '100%', 400) }}</p> + +<p>다음과 같이 <code>column-width</code>를 사용하여 당신의 CSS를 변경하세요:</p> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> + +<p>이제 브라우저는 당신이 지정한 크기의 단을 최대한 많이 제공합니다. 남은 공간은 현존하는 단 사이 공평하게 배분됩니다. 즉, 컨테이너가 해당 너비로 정확히 나뉠 수 없는 경우를 제외하고는 지정한 너비를 정확히 얻을 수 없습니다.</p> + +<div id="다단_2"> +<div class="hidden"> +<h6 id="단_너비_예제">단 너비 예제</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> + +<pre class="brush: css">.container { + column-width: 200px; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('다단_2', '100%', 400) }}</p> + +<h2 id="다단_스타일링">다단 스타일링</h2> + +<p>다단으로 작성된 단은 개별적으로 스타일링할 수 없습니다. 하나의 단을 다른 단보다 크게 만들거나 단일 단의 배경 또는 텍스트 색상을 변경할 수 있는 방법이 없습니다. 단이 표시되는 방식을 바꿀 수 있는 기회는 두 가지가 주어집니다.</p> + +<ul> + <li>{{cssxref("column-gap")}}를 사용해 다단 사이 간격의 크리를 변경하기.</li> + <li>{{cssxref("column-rule")}}를 가지고 다단 사이 규칙을 추가하기.</li> +</ul> + +<p>상기 예제 용례에서 <code>column-gap</code> 속성을 추가해 간격의 크기를 변경하세요:</p> + +<pre class="brush: css">.container { + column-width: 200px; + column-gap: 20px; +}</pre> + +<p>서로 다른 값을 가지고 마음대로 부릴 수 있습니다. 모든 길이 단위를 속성이 허용한다는 말입니다. 이제 <code>column-rule</code>를 가지고 다단 사이 규칙을 추가하세요. 이전 단원에서 접했던 {{cssxref("border")}} 속성과 비슷한 방식으로 <code>column-rule</code>는 {{cssxref("column-rule-color")}}와 {{cssxref("column-rule-style")}} {{cssxref("column-rule-width")}}의 약칭이며 <code>border</code>와 동일한 값을 허용합니다.</p> + +<pre class="brush: css">.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<p>다른 스타일과 색상 규칙을 추가하세요</p> + +<div id="다단_3"> +<div class="hidden"> +<h6 id="다단_스타일링_2">다단 스타일링</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} +.container { + column-count: 3; + column-gap: 20px; + column-rule: 4px dotted rgb(79, 185, 227); +}</pre> + +<pre class="brush: html"><div class="container"> + <h1>간단한 다단 예제</h1> + + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. + Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. + Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse + ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit + quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + + <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique + elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit + cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis + dis parturient montes, nascetur ridiculus mus.</p> +</div></pre> +</div> +</div> + +<p>{{ EmbedLiveSample('다단_3', '100%', 400) }}</p> + +<p>주목할 점은 규칙이 자체적으로 폭을 점유하지 않는다는 것입니다. 규칙이 적용된 내용은 당신이 <code>column-gap</code>으로 생성된 간격을 가로질러 놓여 있습니다. 규칙을 따라 양쪽에 더 많은 공간을 만들려면 <code>column-gap</code> 크기를 늘려야 합니다.</p> + +<h2 id="Spanning_columns">Spanning columns</h2> + +<p>다단 레이아웃에 의해 콘텐츠가 span across 됩니다. 그것은 본질적으로 페이지 미디어상에 콘텐츠가 작동하는 것과 같은 방식으로 작동합니다. 예를 들면 웹페이지 인쇄가 그렇습니다. 콘텐츠를 다단 컨테이너로 만들면 다단으로 나눠지고, 그것이 가능해진 결과로 콘텐츠는 깨집니다.</p> + +<p>때때로, 이런 깨짐 현상은 발생하는 위치에 따라 독서를 저해하는 경험을 낳을 것입니다. 아래의 실제 사용례에서 나는 다단을 사용하여 일련의 상자를 배치했는데, 각각에는 머리글과 약간의 텍스트가 들어 있습니다. 다단 사이가 단편화할 경우 제목은 텍스트와 분리됩니다.</p> + +<div id="다단_4"> +<div class="hidden"> +<h6 id="카드_용례">카드 용례</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> +</div> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('다단_4', '100%', 600) }}</p> + +<p>이러한 동작을 제어하기 위해 <a href="/en-US/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a> 규격에 있는 속성을 사용할 수 있습니다. 우리는 이 규격에 있는 속성을 통해 다단과 페이지 미디어에 포함된 콘텐츠가 깨지는 것을 제어할 수 있습니다. 예를 들어, <code>.card</code> 클래스에 대한 규칙에 <code>avoid</code> 값을 사용한 {{cssxref("break-inside")}}을 추가하세요. 이것은 머리글과 텍스트로 구성된 컨테이너입니다. 따라서 우리는 이 상자를 분열하고 싶지 않습니다.</p> + +<p>현 시점에 이전 속성인 <code>page-break-inside: avoid</code>을 최상의 브라우저 지원을 위해 추가할 가치가 있습니다.</p> + +<pre class="brush: css">.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207,232,220); + border: 2px solid rgb(79,185,227); + padding: 10px; + margin: 0 0 1em 0; +} +</pre> + +<p>페이지를 새로고침하면 상자가 하나의 형태를 갖추고 있어야 합니다.</p> + +<div id="다단_5"> +<div class="hidden"> +<h6 id="다단_단편">다단 단편</h6> + +<pre class="brush: css">body { + width: 90%; + max-width: 900px; + margin: 2em auto; + font: .9em/1.2 Arial, Helvetica, sans-serif; +} </pre> + +<pre class="brush: html"><div class="container"> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + + <div class="card"> + <h2>나는 머리글이다.</h2> + <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat + vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies + tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci + vel, viverra egestas ligula.</p> + </div> + +</div> +</pre> +</div> + +<pre class="brush: css">.container { + column-width: 250px; + column-gap: 20px; +} + +.card { + break-inside: avoid; + page-break-inside: avoid; + background-color: rgb(207, 232, 220); + border: 2px solid rgb(79, 185, 227); + padding: 10px; + margin: 0 0 1em 0; +}</pre> +</div> + +<p>{{ EmbedLiveSample('다단_5', '100%', 600) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 당신이 현재 설계 중인 레이아웃 메서드를 선택할 때 맘껏 사용할 수 있는 다단 레이아웃의 기본 기능과 다른 도구를 사용하는 방법을 알게 되었습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="/kr/docs/Web/CSS/CSS_Fragmentation">CSS 붕괴</a></li> + <li><a href="/kr/docs/Web/CSS/CSS_Columns/Using_multi-column_layouts">다단 레이아웃 사용하기</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">레이아웃 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html new file mode 100644 index 0000000000..cf13a1421c --- /dev/null +++ b/files/ko/learn/css/css_layout/미디어_쿼리_초보자_안내서/index.html @@ -0,0 +1,424 @@ +--- +title: 미디어 쿼리 초보자 안내서 +slug: Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서 +tags: + - 미디어 쿼리 + - 씨에스에스 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Media_queries +--- +<p>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<p><strong>CSS Media Query</strong>는 예를 들어 "뷰포트가 480 픽셀보다 넓다."라고 여러분이 지정한 규칙에 브라우저 및 장치 환경이 일치하는 경우에만 씨에스에스를 적용할 수 있는 방법을 제공합니다. 미디어 쿼리는 반응형 웹 디자인의 핵심 부분이다. 뷰포트의 크기에 따라 서로 다른 조판을 생성할 수 있기 때문이다. 그러나 예를들면 사용자는 마우스가 아닌 터치스크린을 사용하는지와 같이 실행 중인 사이트 환경에 대한 여러 내용들을 탐지하는 데도 사용할 수 있습니다. 이번 단원에서는 먼저 미디어 쿼리에 사용된 구문에 대해 배우고, 이어 해당 구문을 가공의 예제에서 사용하여 간단한 디자인이 어떻게 반응할 수 있는지 살펴보겠습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>미디어 쿼리를 사용하는 방법과 그걸 이용해 반응형 디자인을 생성하기 위한 가장 대표적인 접근법 파악하기.</td> + </tr> + </tbody> +</table> + +<h2 id="미디어_쿼리_기본">미디어 쿼리 기본</h2> + +<p>가장 간단한 미디어 쿼리 구문은 다음과 같습니다:</p> + +<pre class="brush: css">@media <em>media-type</em> and (<em>media-feature-rule</em>) { + /* CSS rules go here */ +}</pre> + +<p>미디어 쿼리 구문의 구성 요소:</p> + +<ul> + <li>여기 코드가 어떤 미디어를 위한 것인지 브라우저에 알려주는 미디어 유형(예를 들어, 인쇄 또는 화면).</li> + <li>괄호로 묶은 씨에스에스 규칙이 적용되기 위해 전달되어야 하는 규칙 또는 조건문 격인 미디어 표현식.</li> + <li>조건문을 통과하고 미디어 유형이 올바른 경우 적용되는 씨에스에스 규칙 집합.</li> +</ul> + +<h3 id="미디어_유형">미디어 유형</h3> + +<p>당신이 지정할 수 있는 미디어 유형</p> + +<ul> + <li><code>all</code></li> + <li><code>print</code></li> + <li><code>screen</code></li> + <li><code>speech</code></li> +</ul> + +<p>다음 미디어 쿼리는 페이지가 인쇄된 경우에만 본문을 12pt로 설정합니다. 페이지가 브라우저에 로드될 때에는 적용되지 않습니다.</p> + +<pre class="brush: css"><code>@media print { + body { + font-size: 12pt; + } +}</code></pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 수준 3 미디어 쿼리 규격에 정의된 여러 가지 다른 미디어 유형이 있습니다. 이들은 사장되었으니 피해야 합니다.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 미디어 유형은 선택사항입니다. 미디어 쿼리에 미디어 유형을 표시하지 않으면 미디어 쿼리는 기본값으로 모든 미디어 유형에 대한 것으로 해석됩니다.</p> +</div> + +<h3 id="미디어_기능_규칙">미디어 기능 규칙</h3> + +<p>미디어 유형을 지정한 뒤에 규칙을 적용할 미디어 기능을 선정할 수 있습니다.</p> + +<h4 id="너비와_높이">너비와 높이</h4> + +<p>반응형 디자인을(그리고 광범위한 브라우저 지원이 되도록) 만들기 위해 가장 자주 탐문하는 기능은 뷰포트 너비이며, <code>min-width</code>와 <code>max-width</code>, <code>width</code> 등의 미디어 기능을 활용하여 뷰포트가 특정 너비 이상 또는 이하인 경우 씨에스에스를 적용할 수 있습니다.</p> + +<p>이러한 특징들은 다른 화면 크기에 반응하는 조판을 생성하는 데 사용됩니다. 예를 들어 뷰포트가 정확히 600픽셀인 경우 본문 색상을 빨간색으로 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p> + +<pre class="brush: css"><code>@media screen and (width: 600px) { + body { + color: red; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/width.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/width.html">소스를 보세요</a>.</p> + +<p><code>width</code>(및 <code>height</code>) 미디어 기능은 범위 지정에 사용될 수 있다. 따라서 <code>min-</code> or <code>max-</code> 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있다. 예를 들어 뷰포트가 400 픽셀보다 좁은 경우 색깔을 파란색으로 만들기 위해 <code>max-width</code>:를 사용할 수 있다.</p> + +<pre class="brush: css"><code>@media screen and (max-width: 400px) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/max-width.html">이 예제를</a>를 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/max-width.html">소스를 보세요</a>.</p> + +<p>실제로 최소값 또는 최대값을 사용하는 것이 반응형 디자인인 경우에 훨씬 유용하므로 <code>width</code> 또는 <code>height</code> 값을 사용하는 경우는 좀처럼 흔치앖습니다.</p> + +<p>미디어 쿼리 규격 수준 4 및 5에 소개된 최신 기능 중 일부가 제한적으로 브라우저 지원이 되지만, 당신이 테스트할 수 있는 다른 여러 미디어 기능이 있습니다. 각 기능은 브라우저 지원 정보와 함께 MDN에 문서화되어 있으니만큼 당신은 <a href="/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#Media_features">미디어 쿼리 사용: 미디어 기능</a>에서 전체 목록을 찾을 수 있습니다.</p> + +<h4 id="방향성">방향성</h4> + +<p>잘 지원되는 미디어 기능 중 하나는 <code>orientation</code>로 세로 모드인지 가로 모드인지를 검사할 수 있도록 해줍니다. 장치가 가로 방향에 있는 경우 본문 텍스트 색상을 변경하려면 다음과 같은 미디어 쿼리를 사용합니다.</p> + +<pre class="brush: css"><code>@media (orientation: landscape) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/orientation.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/orientation.html">소스를 보세요</a>.</p> + +<p>표준 데스크톱 뷰에는 가로 방향이 주종을 이루고 있으며, 이 가로 방향에서 잘 작동하는 디자인은 휴대폰 또는 태블릿상에서 세로 모드로 볼 때 잘 작동하지 않을 수 있습니다. (가로/세로 모드의) 방향성 테스트는 여러분이 세로 모드의 장치에 최적화된 조판을 생성할 수 있게 도움을 줄 수 있습니다.</p> + +<h4 id="포인팅_장치의_사용">포인팅 장치의 사용</h4> + +<p>수준 4 규격의 일부로 <code>hover</code> 미디어 기능이 도입되었다. 이 기능은 사용자가 요소 위에 (마우스 커서를) 올릴 수 있는 능력을 가진 조건인지를 시험할 수 있다는 것을 의미합니다. 본질적으로 사람들이 어떤 종류의 포인팅 장치를 사용하는지를 말합니다. 터치 스크린 및 키보드 네비게이션은 요소 위에 식별자를 올릴 수 없습니다.</p> + +<pre class="brush: css"><code>@media (hover: hover) { + body { + color: rebeccapurple; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/hover.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/hover.html">소스를 보세요</a>.</p> + +<p>사용자가 포인팅 장치를 사용할 수 없다고 파악했다면 기본적으로 대화형 기능을 표시할 수 있습니다. 포인팅 장치를 사용할 수 있는 사용자의 경우 링크에 마우스를 올리는 기능을 이용하도록 선택할 수 있습니다.</p> + +<p>마찬가지로 <code>pointer</code> 미디어 기능이 수준 4 규격에 포함되어 있다. 이것은 <code>none</code>과 <code>fine</code> <code>coarse</code>의 세 가지 값을 취할 수 있다. <code>fine</code> 포인터는 마우스나 트랙패드와 같은 것이다. 이 값으로 사용자가 작은 영역을 정확하게 공략할 수 있게 된다. <code>coarse</code> 포인터는 터치스크린상에 손가락을 말한다. <code>none</code> 값은 사용자가 포인팅 장치가 없다는 의미이다. 아마도 키보드 단독 또는 음성 명령으로 탐색하고 있다고 하겠다.</p> + +<p><code>pointer</code> 사용이 당신에게 주는 잇점이 있다면 사용자가 화면상에서 상호 작용하는 유형에 반응하는 더 나은 인터페이스를 설계할 수 있다는 것입니다. 예를 들어, 사용자가 터치스크린으로 장치와 상호 작용하고 있다는 것을 알면 히트 영역을 더 크게 만들 수 있습니다.</p> + +<h2 id="더_복잡한_미디어_쿼리">더 복잡한 미디어 쿼리</h2> + +<p>당신은 가능한 모든 이종의 미디어 쿼리를 가지고 그것들을 결합하거나, 쿼리 목록을 만들고 싶을 수도 있다. 그 중 어느 경우가 (조건문과) 일치할 수 있습니다.</p> + +<h3 id="논리곱_미디어_쿼리">"논리곱" 미디어 쿼리</h3> + +<p><code>and</code>를 사용해 미디어 기능을 결합할 수 있습니다. 이는 마치 앞에서 미디어 유형과 기능을 결합하기 위해 <code>and</code>를 사용했던 방식과 같습니다. 예를 들어, <code>min-width</code>와 <code>orientation</code>의 논리곱 조건을 테스트해보고 싶을 수도 있습니다. 여기서 에이치티엠엘 본문 텍스트가 파란색이 되는 유일한 경우는 뷰포트의 너비가 최소 400픽셀 이상이고 장치가 가로 모드인 경우에만 해당합니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 400px) and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/and.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/and.html">소스를 보세요</a>.</p> + +<h3 id="논리합_미디어_쿼리">"논리합" 미디어 쿼리</h3> + +<p>만약 여러분에게 쿼리는 잔뜩있는 데, 그 중 일도 일치할 수 없다면, 여러분은 해당 쿼리들을 콤마로 분리할 수 있습니다. 아래 예제에서 뷰포트가 최소 400픽셀 너비 또는 장치가 가로 보기 방향이라면 텍스트는 파란색이 될 것입니다. 둘 중 하나라도 사실이 아니라면 쿼리의 조건문은 일치합니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 400px), screen and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/or.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/or.html">소스를 보세요</a>.</p> + +<p>"</p> + +<h3 id="부정_논리_미디어_쿼리">"부정 논리" 미디어 쿼리</h3> + +<p><code>not</code> 연산자를 사용하여 전체 미디어 쿼리를 부정할 수 있습니다. 이것은 미디어 쿼리의 전체 의미를 반대로 뒤집습니다. 따라서 다음 예에서 텍스트는 보기 방향이 세로일 경우에만 파란색이 됩니다.</p> + +<pre class="brush: css"><code>@media not all and (orientation: landscape) { + body { + color: blue; + } +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/not.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/not.html">소스를 보세요</a>.</p> + +<h2 id="분기점을_선정하는_방법">분기점을 선정하는 방법</h2> + +<p>반응형 디자인 초창기에는 많은 디자이너가 매우 구체적인 화면 크기를 공략 대상으로 삼으려고 시도했습니다. 인기있는 휴대폰 및 태블릿 화면의 크기 목록이 공개되어 해당 기기의 뷰포트와 깔끔하게 일치하도록 디자인을 만들 수 있게 되었습니다.</p> + +<p>지금은 엄청나게 다양한 크기의 지나치게 너무 많은 장치가 있어 그런 방식은 현실성이 없습니다. 즉, 모든 디자인마다 (기기의) 특정 크기에 맞추는 공략보다 더 나은 접근 방법은 콘텐츠가 어떤 식으로든 깨지기 시작하는 해당 (기기의) 크기에 해당하는 디자인을 변경하는 것입니다. 어쩌면 선 길이가 너무 길어지거나 상자 형태의 사이드바가 찌그러져 읽기가 어려워질 수도 있습니다. 그 지경이 되면 미디어 쿼리를 사용하여 이용할 수 있는 공간 대비 개선된 형태의 사이트가 나오도록 디자인을 변경해야할 지점인 것입니다. 이는 사용 기기의 정확한 화면 크기가 무엇이든 상관없이 모든 범주에 맞는 전방위적인 접금법을 말합니다. 미디어 쿼리가 도입되는 지점을 <strong>breakpoints</strong>라고 합니다.</p> + +<p>Firefox DevTools의 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>는 이러한 분기점이 어느 부분이 될지 알아내는 데 매우 유용합니다. 동 툴은 미디어 쿼리를 추가하고 디자인을 조정하면서 콘텐츠가 개선되는 위치를 파악하기 위해 뷰포트를 쉽게 크거나 작게 만들 수 있습니다.</p> + +<p><img alt="파이어폭스 개발툴상에 조판 갈무리" src="https://mdn.mozillademos.org/files/16867/rwd-mode.png" style="height: 917px; width: 1443px;"></p> + +<h2 id="능동_학습_모바일_우선_반응형_디자인">능동 학습: 모바일 우선 반응형 디자인</h2> + +<p>대체로 반응형 디자인에 대한 두 가지 접근법을 취할 수 있습니다. 데스크톱 또는 가장 넓은 뷰로 시작한 뒤 뷰포트의 축소에 맞춰 요소를 주변으로 이동시키기 위한 분기점을 추가하거나 가장 작은 뷰로 시작한 뒤에 뷰포트의 크기 확대에 맞춰 조판을 추가할 수 있습니다. 이 두 번째 접근법은 <strong>mobile first</strong> 반응형 디자인으로 설명되며 종종 선호되는 최상의 접근법입니다.</p> + + + +<p>가장 작은 장치용 뷰는 일반 대열에서 나타나는 것처럼 종종 단순한 단일 열 형태의 콘텐츠가 됩니다. 즉 여러분은 작은 장치용이라 많은 조판을 할 필요가 없다는 말입니다. 다시말해 소스를 순서대로 잘 정렬하면 기본값으로 읽을 수 있는 조판이 됩니다.</p> + +<p>아래의 길라잡이는 매우 간단한 조판으로 동 접근 방식을 안내해 줄 것입니다. 사이트 제작 과정에서는 미디어 쿼리내에서 조정할 수 있는 것이 더 많을 수 있지만, 그 접근 방식은 정확히 동일하게 됩니다.</p> + +<h3 id="길라잡이_간단한_모바일_우선_조판">길라잡이: 간단한 모바일 우선 조판</h3> + +<p>우리는 조판에 포함된 다양한 요소에 배경색을 추가하기 위해 일정한 씨에스에스를 적용한 에이치티엠엘 문서를 가지고 출발합니다.</p> + +<pre class="brush: css"><code>* { + box-sizing: border-box; +} + +body { + width: 90%; + margin: 2em auto; + font: 1em/1.3 Arial, Helvetica, sans-serif; +} + +a:link, +a:visited { + color: #333; +} + +nav ul, + aside ul { + list-style: none; + padding: 0; +} + +nav a:link, +nav a:visited { + background-color: rgba(207, 232, 220, 0.2); + border: 2px solid rgb(79, 185, 227); + text-decoration: none; + display: block; + padding: 10px; + color: #333; + font-weight: bold; +} + +nav a:hover { + background-color: rgba(207, 232, 220, 0.7); +} + +.related { + background-color: rgba(79, 185, 227, 0.3); + border: 1px solid rgb(79, 185, 227); + padding: 10px; +} + +.sidebar { + background-color: rgba(207, 232, 220, 0.5); + padding: 10px; +} + +article { + margin-bottom: 1em; +} +</code></pre> + +<p>우리는 우리가 조판에 변경을 가하지는 않았지만, 문서의 원본은 콘텐츠를 읽을 수 있는 방식으로 순서대로 정렬됩니다. 이것은 중요한 첫 번째 단계이며, 콘텐츠가 화면 읽기 프로그램(tts)에 의해 소리내여 읽혀질 경우 콘텐츠가 (읽을 문자열를) 이해될 수도록 보장합니다.</p> + +<pre class="brush: html"><code><body> + <div class="wrapper"> + <header> + <nav> + <ul> + <li><a href="">사이트 소개</a></li> + <li><a href="">연락처</a></li> + <li><a href="">우리팀 안내</a></li> + <li><a href="">블로그</a></li> + </ul> + </nav> + </header> + <main> + <article> + <div class="content"> + <h1>채식주의자!</h1> + <p> + ... + </p> + </aside> + </article> + + <aside class="sidebar"> + <h2>채식에 관한 외부 링크</h2> + <ul> + <li> + ... + </li> + </ul> + </aside> + </main> + + <footer><p>&copy;2019</p></footer> + </div> + </body> +</code></pre> + +<p>이 간단한 조판은 모바일에서도 잘 작동한다. 우리가 파이어폭스 데브툴 내부 반응형 디자인 모드에서 조판을 본다면, 우리는 그것이 사이트의 직관적인 모바일 뷰로 보더라도 꽤 잘 작동한다는 것을 알 수 있다.</p> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step1.html">이 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">소스를 보세요</a>.</p> + +<p><strong>당신이 우리의 진행 과정대로 이 예제를 실행해보려면 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step1.html">step1.html</a>의 사본을 당신 컴퓨터에 만드세요.</strong></p> + +<p>이 지점부터는 반응형 디자인 모드뷰가 점차 확대되어 라인 길이가 상당히 길어지는 모습을 확인할 정도가 되며, 수평선 형태의 탐색 메뉴가 표시될 공간을 갖추고 있습니다. 여기에서 우리는 첫 번째 미디어 쿼리를 추가할 것입니다. 사용자가 텍스트 크기를 늘리게 되면, 텍스트 크기가 작은 장비를 가진 사람과 비교해 비슷한 라인 길이지만 뷰포트가 확대되는 순간에 분기점이 발생한다는 의미입니다. 따라서 우리는 ems 단위를 사용할 것입니다.</p> + +<p><strong>아래 코드를 step1.html 씨에스에스의 하단에 추가하세요.</strong></p> + +<pre class="brush: css"><code>@media screen and (min-width: 40em) { + article { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + nav ul { + display: flex; + } + + nav li { + flex: 1; + } +} +</code></pre> + +<p>이 씨에스에스는 문서 안에 있는 문서 콘텐츠와 aside 요소 내부 관련 정보까지 2단 조판을 우리에게 제공합니다. 또한 우리는 가변상자를 사용하여 탐색 메뉴를 일렬로 배치했습니다.</p> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step2.html">2단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step2.html">소스를 보세요</a>.</p> + +<p>사이드바가 새 단을 형성할 수 있는 충분한 공간이 있다고 느낄 때까지 너비를 계속 확장합니다. 미디어 쿼리안에서 주요 요소를 두 개의 열 형태의 격자로 만들 것입니다. 그런 다음 두 개의 사이드바가 서로 나란히 정렬되도록 문서의 {{cssxref("margin-bottom")}}을 제거해야하며, 바닥글 상단에 {{cssxref("border")}}(테두리)를 추가하게 됩니다. 일반적으로 이러한 미세 조정은 각 분기점 도달시 디자인을 좋게 보이게 하기 위해 여러분이 할 일입니다.</p> + +<p><strong>다시 한 번 아래 코드를 step1.html 씨에스에스의 하단에 추가합니다.</strong></p> + +<pre class="brush: css"><code>@media screen and (min-width: 70em) { + main { + display: grid; + grid-template-columns: 3fr 1fr; + column-gap: 20px; + } + + article { + margin-bottom: 0; + } + + footer { + border-top: 1px solid #ccc; + margin-top: 2em; + } +}</code> +</pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/step3.html">3단계</a> 파일을 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/step3.html">소스를 보세요</a>.</p> + +<p>최종 예제를 다른 너비로 보면 사용 가능한 너비에 따라 디자인이 반응하고 단일 열, 2열 또는 3열로 작동하는 방법을 볼 수 있습니다. 이것은 모바일 우선 반응형 디자인의 아주 간단한 예입니다.</p> + +<h2 id="당신에게_정말_미디어_쿼리가_필요할까요">당신에게 정말 미디어 쿼리가 필요할까요?</h2> + +<p>가변상자, 격자 및 다단 조판은 모두 굳이 미디어 쿼리를 필요로 하지 않고도 가변적이며 심지어 반응형 구성 요소를 만들 수 있는 방법을 제공합니다. 미디어 쿼리를 추가하지 않고도 이러한 조판 메서드를 사용해 원하는 것을 달성할 수 있는지 고려할 가치가 있습니다. 예를 들어, 여러분은 적어도 200 픽셀 너비의 카드 집합을 원할 수 있으며, 최대 200 픽셀이라면 주요 문서 부분에 맞아떨어질 수 있습니다. 이는 미디어 쿼리를 전혀 사용하지 않고 격자 조판만으로 얻을 수 있습니다.</p> + +<p>이것은 아래 용법으로 달성될 수 있습니다.</p> + +<pre class="brush: html"><code><ul class="grid"> + <li> + <h2>카드 1</h2> + <p>...</p> + </li> + <li> + <h2>카드 2</h2> + <p>...</p> + </li> + <li> + <h2>카드 3</h2> + <p>...</p> + </li> + <li> + <h2>카드 4</h2> + <p>...</p> + </li> + <li> + <h2>카드 5</h2> + <p>...</p> + </li> +</ul></code></pre> + +<pre class="brush: css"><code>.grid { + list-style: none; + margin: 0; + padding: 0; + display: grid; + gap: 20px; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); +} + +.grid li { + border: 1px solid #666; + padding: 10px; +}</code></pre> + +<p><a href="https://mdn.github.io/css-examples/learn/media-queries/grid.html">이 격자 예제를</a> 브라우저에서 열거나 <a href="https://github.com/mdn/css-examples/blob/master/learn/media-queries/grid.html">소스를 보세요</a>.</p> + +<p>상기 예제를 브라우저에서 열면 화면을 넓히거나 좁히거나 하여 열 트랙 수가 변경되는 것을 확인할 수 있습니다. 이 방법의 좋은 점은 격자가 뷰포트 너비를 보는 게 아니라 해당 구성 요소에 맞춰 이용할 수 있는 너비를 살핀다는 것입니다. 당신에게 미디어 쿼리가 전혀 필요하지 않을수도! 있다는 제안으로 이번 절을 마감하는 것은 이상하게 보일 수도 있습니다. 그러나 실제로 미디어 쿼리로 강화된 현대적 조판 메서드를 잘 사용하면 최상의 결과를 얻을 수 있습니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>여러분은 이 단원에서 미디어 쿼리에 대해 배웠으며 모바일 우선 반응형 디자인을 실제로 생성하는 방법도 알아 보았습니다.</p> + +<p>우리가 만든 것을 시작점로 더 많은 미디어 쿼리 조건을 테스트할 수 있습니다. 예를 들어, 방문자가 <code>pointer</code> 미디어 기능을 사용하여 거친 포인터를 가지고 있는 것을 감지하면 탐색 메뉴의 크기를 변경할 수 있습니다.</p> + +<p>또한 서로 다른 구성 요소를 추가하고 미디어 쿼리를 추가한다든지 또는 가변상자나 격자와 같은 조판 방법을 사용하는 것이 구성 요소를 반응형으로 만드는 가장 적절한 방법인지 여부를 실험할 수 있습니다. 바른 방식 혹은 그른 방식 따윈 없습니다. 말하자면 어떤 것이 디자인과 콘텐츠에 가장 적합한지 실험하고 관찰해야 합니다.</p> + + + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Responsive_Design", "Learn/CSS/CSS_layout/Legacy_Layout_Methods", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/반응형_디자인/index.html b/files/ko/learn/css/css_layout/반응형_디자인/index.html new file mode 100644 index 0000000000..b1311448c7 --- /dev/null +++ b/files/ko/learn/css/css_layout/반응형_디자인/index.html @@ -0,0 +1,333 @@ +--- +title: 반응형 디자인 +slug: Learn/CSS/CSS_layout/반응형_디자인 +tags: + - 가변상장 + - 격자 + - 다단 + - 미디어 쿼리 + - 반응형 웹 디자인 + - 유동 격자 + - 이미지 + - 타이포크래피 +translation_of: Learn/CSS/CSS_layout/Responsive_Design +--- +<div>{{learnsidebar}}{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</div> + +<p>웹디자인 초창기에는 페이지를 구축할 때 매우 구체적인 화면 크기를 공략 대상으로 삼았습니다. 사용자가 웹디자이너가 예상한 것보다 크거나 작은 화면의 기기를 가지고 있다면 원하지 않는 스크롤 막대에서부터 지나치게 긴 길이의 라인, 사용 공간이 부족하게 되는 결과를 낳습니다. 다양한 화면 크기가 등장함에 따라 <em>responsive web design</em> 개념이 등장했습니다. 말하자면 서로 다른 화면 너비와 해상도 등에 맞게 웹 페이지가 조판과 모양을 변경할 수 있는 일련의 실례를 집대성한 것입니다. 이 아이디어가 우리가 멀티 디바이스 웹에 대한 설계 방식을 바꾸게 만든 장본인입니다. 이 문서에서 우리는 그 내용을 숙달하기 위해 당신이 알아야하는 주요 기술을 이해하도록 도울 것입니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초인 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>를 공부하세요), 그리고 씨에스에스의 작동 방식을 파악하기 위해 (<a href="/en-US/docs/Learn/CSS/First_steps">씨에스에스 첫걸음</a>과 <a href="/ko/docs/Learn/CSS/Building_blocks">씨에스에스 구성 블록</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>반응형 디자인의 역사와 핵심적인 계념 파악하기</td> + </tr> + </tbody> +</table> + +<h2 id="웹사이트_조판_역사">웹사이트 조판 역사</h2> + +<p>역사의 어느 시점 여러분이 웹 사이트를 디자인할 때 두 가지 옵션이 있었습니다.</p> + +<ul> + <li>여러분은 웹브라우저 창에 요소를 연장하도록 하는 <em>liquid</em>(유동) 사이트를 만들 수 있습니다.</li> + <li>픽셀 크기가 고정되어 있는 <em>fixed width</em> 사이트를 만들 수 있었습니다.</li> +</ul> + +<p>이러한 두 가지 접근법은 사이트를 디자인하는 사람의 화면에서 가장 보기 좋은 웹 사이트로 귀결되는 경향이 있었습니다! 유동 사이트는 (아래에서 볼 수 있듯이) 디자이너의 화면보다 더 작은 화면에는 찌부러진 디자인이 나오고, 더 큰 화면에는 읽을 수 없을 정도로 길이가 긴 라인을 만들어냅니다.</p> + +<figure><img alt="두 개의 열이 있는 조판이 모바일 크기 뷰포트에서 찌부러집니다." src="https://mdn.mozillademos.org/files/16834/mdn-rwd-liquid.png" style="display: block; height: 406px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여기 간단한 유동 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/liquid-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/liquid-width.html">소스 코드</a>. 예제를 보면 브라우저 창을 안팎으로 드래그하여 서로 다른 크기에 반응해 어떻게 보이는지 확인합니다.</p> +</div> + +<p>고정 폭 사이트는 (아래에서 보듯) 사이트 너비보다 작은 화면상에 수평 스크롤 막대가 생기는 위험이 있고 더 큰 화면상에서는 웹디자인 가장자리에 많은 흰색 공간이 생길 위험이 있습니다.</p> + +<figure><img alt="이동 뷰포트에 수평 스크롤 막대가 있는 조판입니다." src="https://mdn.mozillademos.org/files/16835/mdn-rwd-fixed.png" style="display: block; height: 411px; width: 300px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여기 간단한 고정 너비 조판을 보세요: <a href="https://mdn.github.io/css-examples/learn/rwd/fixed-width.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/fixed-width.html">소스 코드</a>. 역시 브라우저 창 크기를 변경할 때 결과를 관찰하세요.</p> +</div> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 상단 화면는 파이어폭스 개발툴 안에서 <a href="/en-US/docs/Tools/Responsive_Design_Mode">반응형 디자인 모드</a>을 사용해 갈무리 한 것입니다.</p> +</div> + +<p>모바일 웹이 첫 번째 피처폰의 등장으로 현실화되기 시작하면서 모바일을 수용하고자 하는 회사들은 일반적으로 (종종 <em>m.example.com</em> 또는 <em>example.mobi</em> 이런 식의) 서로 다른 URL를 사용하여 그들의 사이트의 특별한 모바일 버전을 만들게 됩니다. 이는 해당 사이트의 두 가지 별도 버전을 개발하고 최신 상태로 유지해야 한다는 것을 의미했습니다.</p> + +<p>게다가, 이러한 모바일 사이트들을 경험해보면 종종 매우 축소된 기능을 제공합니다. 모바일 장치가 더욱 강력해지고 전체 웹 사이트를 표시할 수 있게 되면서, 그러한 기능 축소 모바일 버전 사이트에 갖힌 자신을 발견한 모바일 사용자들은 그들이 알고 있는 해당 사이트의 전체 기능이 있는 데스크탑 버전의 정보에 접근할 수 없었기에 좌절감을 안겨주었습니다.</p> + +<h2 id="반응형_디자인의_전신_가변_조판">반응형 디자인의 전신 가변 조판</h2> + +<p>유동 및 고정 너비의 웹사이트 구축 방법의 단점을 해결하기 위해 여러 가지 접근법이 개발되었습니다. 2004년 카메론 아담스는 다양한 화면 해상도에 적응할 수 있는 디자인을 만드는 방법을 설명하는 <a href="http://www.themaninblue.com/writing/perspective/2004/09/21/">해상도 의존 조판</a>이라는 제목의 게시물을 작성했습니다. 이 접근방식은 화면 해상도를 감지하고 정확한 씨에스에스를 로드하려면 자바스크립트가 필요했습니다.</p> + +<p>조이 미클리 길렌워터는 그녀의 <a href="http://zomigi.com/blog/voices-that-matter-slides-available/">작업</a>을 통해 화면을 채우는 것과 완전히 고정된 화면 크기 사이를 만족시키는 평균값을 찾으려고 시도하는 등 가변적인 사이트를 만들 수 있는 다양한 방법을 기술하고 공식화하는 데 산파 역할을 했습니다.</p> + +<h2 id="반응형_디자인">반응형 디자인</h2> + +<p>반응형 디자인이라는 용어는 <a href="https://alistapart.com/article/responsive-web-design/">2010년 이단 마르코트가 만든 신조어로</a> 세 가지 기술을 조합한 용법을 설명하고 있습니다.</p> + +<ol> + <li>첫 번째는 이미 길렌워터에 의해 탐구되고 있던 유동 격자라는 아이디어였으며, 마르코트의 <a href="https://alistapart.com/article/fluidgrids/">유동 격자</a>란(2009년 <code>A List Apart</code>에 발표) 문서에서 읽을 수 있다.</li> + <li>두 번째 기술은 <a href="http://unstoppablerobotninja.com/entry/fluid-images">유동 이미지</a>라는 개념이다. <code>max-width</code> 속성을 <code>100%</code>로 설정하는 매우 간단한 기술을 사용하면 이미지의 포함된 열이 이미지의 고유 크기보다 좁아지면 이미지가 더 작아지지만 더 커지지는 않습니다. 이것은 이미지가 대열이탈이 아니라 가변적인 크기의 열에 맞게 축소될 수 있지만 열이 이미지보다 넓어지면 확대되지 않고 픽셀화될 수 있습니다.</li> + <li>세 번째 핵심 구성요소는 <a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>였습니다. 미디어 쿼리는카메론 아담스가 앞서 자바스크립의 사용을 탐구했던 조판 전환 유형을 씨에스에스만을 사용하여 실현합니다. 모든 화면 크기마다 하나씩 조판을 부여하기 보다는 조판을 변경할 수 있었다. 사이드바를 작은 화면에 맞게 재배치하거나 대체 탐색 매뉴를 표시할 수 있습니다.</li> +</ol> + +<p><strong>반응형 웹 디자인은 별도의 기술이 아니다</strong>라는 것을 이해하는 것이 중요합니다. 즉, 웹 디자인에 대한 접근 방식이나 콘텐츠를 보는데 사용되는 장치에 <em>반응</em>할 수 있는 조판 생성에 사용되는 모범 사례 집합을 기술하는 데 사용되는 용어다. 마르코트의 원래 연구에서 이것은 (부동체를 사용하는) 가변 격자와 미디어 쿼리를 의미했지만, 그의 문서가 쓰여진지 거의 10년 만에 반응형으로 동작하는 것이 기본값이 되었다. 현대의 씨에스에스 조판 메서드는 본질적으로 반응형이며 반응형 사이트 설계를 쉽게하기 위해 웹 플랫폼에 새로운 요소들이 내장되어 있습니다.</p> + +<p>이 문서의 나머지 절에서는 반응형 사이트를 만들 때 사용할 수 있는 다양한 웹 플랫폼 기능에 대해 안내할 것입니다.</p> + +<h2 id="미디어_쿼리">미디어 쿼리</h2> + +<p>반응형 디자인은 오롯이 미디어 쿼리 때문에 등장할 수 있었습니다. 미디어 쿼리 수준 3 규격은 2009년 권장사항 후보가 되었으며, 이는 브라우저에서 구현할 준비가 되어 있음을 의미합니다. 미디어 쿼리에서는 일련의 테스트를 실행할 수 있습니다(예로 사용자의 화면이 특정 너비나 특정 해성도보다 큰지 여하에 따라). 씨에스에스를 선택적으로 적용하여 사용자의 필요에 따라 페이지를 적절하게 스타일링합니다.</p> + +<p>예를 들어, 아래 미디어 쿼리는 현재 웹 페이지가 화면 미디어로 표시되고 있는지(따라서 인쇄된 문서가 아님) 확인하며 뷰포트는 적어도 800픽셀 너비인지 테스트합니다. <code>.container</code> 선택기는 씨에스에스는 이 두 가지가 사실인 경우에만 적용됩니다.</p> + +<pre class="brush: css"><code>@media screen and (min-width: 800px) { + .container { + margin: 1em 2em; + } +} </code> +</pre> + +<p>스타일시트에 여러 미디어 쿼리를 추가하여 다양한 화면 크기에 맞는 최적의 전체 조판 또는 조판의 일부를 조정할 수 있습니다. 미디어 쿼리가 도입되고 조판이 변경된 지점을 <em>breakpoints</em>(분기점)라고 합니다.</p> + +<p>미디어 쿼리를 사용할 때 일반적인 접근법은 좁은 화면 장치(예: 휴대폰)에 대한 간단한 단일 열 조판을 만든 다음, 큰 화면인지 점검하고, 화면 폭이 충분하다는 것을 알게 될 때 다단 조판을 구현하는 것이다. 이를 <strong>모바일 우선</strong> 디자인이라고 표현하는 경우가 많다.</p> + +<p><a href="/ko/docs/Web/CSS/Media_Queries">미디어 쿼리</a>에 대한 MDN 문서를 더 찾아보십시요.</p> + +<h2 id="가변_격자">가변 격자</h2> + +<p>반응형 사이트는 분기점 전후로 자체 조판을 변경할 뿐만 아니라 가변 격자상에도 동일하게 구축됩니다. 가변 격자는 현존하는 모든 장치 크기를 공략 대상으로 삼을 필요가 없으며, 그 대상에 대한 완벽한 픽셀 조판을 구축할 필요가 없다는 것을 의미합니다. 완벽한 픽셀 접근 방식은 존재하는 다양한 크기의 장치들이 엄청나게 많고, 적어도 데스크톱에서는 사람들이 항상 브라우저 창을 최대화하지는 않는다는 사실을 감안할 때 불가능할 것입니다.</p> + +<p>가변 격자를 사용하면 요소를 분기점에 추가하고, 콘텐츠가 불량으로 보이기 시작하는 지점에서 디자인을 변경할 수 있습니다. 예를 들어, 화면 크기가 커지면 라인 길이가 읽을 수 없게 길어지거나 상자가 좁아질 때 각 라인에 두 단어로 찌브러집니다.</p> + +<p>반응형 디자인 초창기에는 조판 기능을 수행하는 유일한 옵션은 <a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">부동체</a>를 사용하는 것이 었습니다. 가변 부동 조판은 각 요소에 백분율 너비를 부여하고 조판 전체의 너비가 100%를 넘지 않도록 보장함으로써 달성되었습니다. 마르코트는 유동 격자와 관련 그의 원래 작품에서 픽셀을 사용하여 설계된 조판을 채택하여 백분율로 변환하는 공식을 상세히 설명했습니다.</p> + +<pre><code>target / context = result </code> +</pre> + +<p>예를 들어, 목표 열 크기가 60픽셀이고, 거기에 들어갈 상황(혹은 컨테이너)가 이 960픽셀이면, 씨에스에스에서 사용할 수 있는 값을 얻기 위해 우선 60픽셀을 960픽셀로 나누고 거기에 소수점을 오른쪽으로 두칸 이동합니다.</p> + +<pre class="brush: css"><code>.col { + width: 6.25%; /* 60 / 960 = 0.0625 */ +} </code> +</pre> + +<p>이 접근 방식은 오늘날 웹상에 여러 곳에서 발견될 것이며, 여기 우리의 <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 조판 메서드</a> 문서의 조판 절에 문서화되어 있습니다. 여러분이 업무 중에 이 접근법을 사용하는 웹 사이트를 발견할 가능성이 높기 때문에 부동 기반의 가변 조판을 사용하여 현대적인 사이트를 구축하지는 않겠지만, 그 내용을 이해할 가치는 있습니다.</p> + +<p>다음 예제에서는 미디어 쿼리와 가변 격자를 사용하여 간단한 반응형 디자인를 보여줍니다. 좁은 화면상에서는 상자가 상대 요소 위해 겹겹이 쌓여지는 조판 형태로 표시됩니다.</p> + +<figure><img alt="상자 무리가 상대 요소의 상단에 수직으로 겹겹이 쌓이는 모바일뷰 조판입니다." src="https://mdn.mozillademos.org/files/16836/mdn-rwd-mobile.png" style="display: block; height: 407px; width: 300px;"> +<p>On wider screens they move to two columns:</p> + +<figcaption></figcaption> +</figure> + +<figure><img alt="2단 조판이 적용된 데스크탑 뷰입니다." src="https://mdn.mozillademos.org/files/16837/mdn-rwd-desktop.png" style="display: block; height: 217px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>주석</strong>: 여러분은 여기서 <a href="https://mdn.github.io/css-examples/learn/rwd/float-based-rwd.html">실례</a>를 찾아볼 수 있으며, 이 예제에 대한 <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/float-based-rwd.html">소스 코드</a>를 깃허브에서 찾을 수 있습니다.</p> +</div> + +<h2 id="현대_조판_기술">현대 조판 기술</h2> + +<p><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a>과 <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a>와 <a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">격자</a>와 같은 현대 조판 메서드는 기본값으로 응답형입니다. 그것들은 모두 여러분이 가변 격자를 만들려 한다고 가정하고 그렇게 동작하도록 편리한 방법을 제공합니다.</p> + +<h3 id="다단">다단</h3> + +<p>이러한 조판 메서드 중 가장 오래된 것은 다단입니다. 여러분이 <code>column-count</code>를 지정하면, 이는 여러분이 콘텐츠를 나누고자 하는 단의 숫자를 나타냅니다. 그런 다음 브라우저는 다단의 크기를 화면 크기에 따라 변경되는 크기로 계산합니다.</p> + +<pre class="brush: css"><code>.container { + column-count: 3; +} </code> +</pre> + +<p><code>column-width</code>을 지정하는 대신 <em>minimum</em> 너비를 지정하는 것입니다. 브라우저는 컨테이너에 안착할 수 있는 만큼으로 지정한 해당 너비를 가진 열을 최대한 많이 생성하고 난 뒤에 다음 모든 열 사이에서 나머지 공간을 공유합니다. 따라서 열의 수는 공간이 얼마나 되는지에 따라 달라집니다.</p> + +<pre class="brush: css"><code>.container { + column-width: 10em; +} </code> +</pre> + +<h3 id="가변상자">가변상자</h3> + +<p>가변상자에서 가변 항목은 초깃값 동작으로 컨테이너의 공간에 따라 항목 사이의 공간을 축소하고 분배합니다. <code>flex-grow</code> 및 <code>flex-shrink</code> 값을 변경하면 해당 항목에 주어진 주변 공간이 남거나 모질라게 될 경우 원하는 동작 방식을 표기할 수 있습니다.</p> + +<p>아래 예제에서 가변 항목은 가변 컨테이너 안에서 각각 동일한 양의 공간을 차지하며, <a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox#가변_항목의_가변_크기_조정">가변상자: 가변 항목의 가변 크기 조정</a>에서 설명했듯이 <code>flex: 1</code>식의 약칭을 사용할 수 있습니다.</p> + +<pre class="brush: css"><code>.container { + display: flex; +} + +.item { + flex: 1; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 예제로써 상기된 간단한 반응형 조판을 재구축했는데 이번에는 가변상자를 사용했습니다. 여러분은 더 이상 낮설은 백분율 값을 사용하여 열의 크기를 계산할 필요가 없는 방법을 보게 됩니다: <a href="https://mdn.github.io/css-examples/learn/rwd/flex-based-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/flex-based-rwd.html">소스 코드</a>.</p> +</div> + +<h3 id="씨에스에스_격자">씨에스에스 격자</h3> + +<p>씨에스에스 격자 조판에서 <code>fr</code> 단위는 격자 트랙 전역에 걸쳐 이용할 수 있는 공간을 분배할 수 있습니다. 다음 예에서는 <code>1fr</code> 크기의 트랙 3개가 있는 격자 컨테이너를 만듭니다. 이렇게 하면 3개의 열 트랙이 생성되며, 각 트랙은 컨테이너에 있는 사용 가능한 공간\의 한 부분을 차지합니다. 여러분은 <a href="ko/docs/Learn/CSS/CSS_layout/Grids#fr_단위를_포함하는_가변_격자">fr 단위를 포함한 가변 격자</a>라는 격자 조판 학습 주제에서 격자를 생성하는 이같은 접근 방식에 대해 자세히 알 수 있습니다.</p> + +<pre class="brush: css"><code>.container { + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} </code> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 격자 조판 버전은 .wrapper <a href="https://mdn.github.io/css-examples/learn/rwd/grid-based-rwd.html">예제</a>상에 열을 정의할 수 있으므로 더 간단합니다: <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/grid-based-rwd.html">소스 코드</a>.</p> +</div> + +<h2 id="반응형_이미지">반응형 이미지</h2> + +<p>반응 이미지에 대한 가장 간단한 접근법은 반응형 디자인에 관한 마르코트의 초창기 문서에서 설명한 바와 같습니다. 기본적으로 필요한 최대 크기의 이미지를 촬영하여 그것을 축소할 수 있습니다. 이것은 오늘날에도 사용되는 접근법이며 대부분의 스타일 시트에서 다음과 같은 씨에스에스를 어디선가는 발견할 수 있습니다.</p> + +<pre class="brush: css"><code>img { + max-width: 100%: +} </code> +</pre> + +<p>이 접근법에는 명백한 단점이 있습니다. 해당 이미지는 고유 크기보다 훨씬 작게 표시될 수 있어 대역폭 낭비입니다. 다시말해 모바일 사용자는 브라우저 창에서 실제로 보는 것의 몇 배 크기의 이미지를 다운로드하게 되니 낭비입니다. 또한, 데스크톱과 같은 이미지 가로 세로 비율을 모바일에서 원하지 않을 수도 있습니다. 예를 들어, 모바일의 경우 정사각형 이미지가 좋을 수 있지만 데스크톱상에는 같은 이미지를 가로 보기처럼 장면을 보여줍니다. 또는 모바일 상의 이미지의 크기가 작다는 것을 이해하면서도 서로 다른 이미지를 모두 보여주고 싶을 경우가 있습니다. 말하자면 작은 화면 크기에서 더 쉽게 해석될 수 있는 이미지를 말합니다. 이런 것들은 단순히 이미지를 축소해서는 달성할 수 없습니다.</p> + +<p>반응형 이미지는 <code><a href="/en-US/docs/Web/HTML/Element/picture"><picture></a></code> 요소와 <code><a href="/en-US/docs/Web/HTML/Element/img"><img></a></code>, <code>srcset</code>과 <code>sizes</code> 속성은 이러한 문제를 모두 해결합니다. 여러분은 "힌트"(이미지에 가장 적합한 화면 크기와 해상도를 설명하는 메타 데이터)와 함께 여러 크기를 제공할 수 있으며, 브라우저는 각 장치에 가장 적합한 이미지를 선택하며, 사용자가 사용하고 있는 장치에 적합한 이미지 크기를 다운로드할 수 있도록 담보합니다.</p> + +<p>또한 다른 화면 크기에서 사용되는 이미지를 <em>art direct</em>할 수 있으므로 서로 다른 화면 크기에 대해 서로 다른 자르기 또는 완전히 다른 이미지를 제공할 수 있습니다.</p> + +<p>이곳 MDN 사이트의 에이치티엠엘 학습 섹션에서 <a href="/ko/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">반응형 이미지</a>에 대한 자세한 안내서를 찾을 수 있습니다.</p> + +<h2 id="반응형_타이포그래피">반응형 타이포그래피</h2> + +<p>반응형 타이포그래피 개념은 이전 작업에서 다루지 않은 반응형 디자인의 요소입니다. 본질적으로, 이것은 화면 부동산의 크기가 더 작아지거나 더 커지거나하는 것을 반영하기 위해 미디어 쿼리 구문 안에서 폰트 크기를 변경하는 것을 말합니다.</p> + +<p>이 예제에서 우리는 수준 1 머리글을 <code>4rem</code>로 설정하려고 합니다. 즉, 기본 글꼴 크기의 4배입니다. 정말 큰 제목이네요! 우리는 더 큰 화면 크기상에서만 이 코끼리만한 머리글을 원하기 때문에, 우리는 먼저 더 작은 머리글을 만들고, 미디어 쿼리를 사용해 조건에 맞으면 그것을 더 큰 크기로 덮어쓰기 하면됩니다. 여기서 조건은 사용자가 적어도 1200px의 화면 크기의 기기를 가진 경우가 해당됩니다.</p> + +<pre class="brush: css"><code>html { + font-size: 1em; +} + +h1 { + font-size: 2rem; +} + +@media (min-width: 1200px) { + h1 { + font-size: 4rem; + } +} </code> +</pre> + +<p>상기한 반응형 격자 예제를 편집했고, 거기에 더해 이미 제시된 메서드를 사용하는 응답형 유형을 포함시켰습니다. 조판이 2개의 열 버전으로 이동함에 따라 머리글 크기가 어떻게 전환하는지 볼 수 있습니다.</p> + +<p>모바일에서는 머리글이 더 작다:</p> + +<figure><img alt="머리글 크기가 작은 스택 모양의 조판입니다." src="https://mdn.mozillademos.org/files/16838/mdn-rwd-font-mobile.png" style="display: block; height: 407px; width: 300px;"> +<p>On desktop however we see the larger heading size:</p> + +<figcaption></figcaption> +</figure> + +<figure><img alt="큰 머리글이 딸린 두개의 열 조판입니다." src="https://mdn.mozillademos.org/files/16839/mdn-rwd-font-desktop.png" style="display: block; height: 169px; width: 600px;"> +<figcaption></figcaption> +</figure> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 이 예제의 실제 구현 장면: <a href="https://mdn.github.io/css-examples/learn/rwd/type-rwd.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-rwd.html">소스 코드</a>.</p> +</div> + +<p>타이포그래피에 대한 이러한 접근 방식이 보여주듯이, 미디어 쿼리를 제한하여 페이지 조판만 변경할 필요는 없습니다. 그들 접근법을 사용하여 어떤 요소라도 조정해서 대체 화면 크기에 맞는 더 유용하고 매력적인 요소를 만들 수 있다.</p> + +<h3 id="반응형_타이포그래피에_대한_뷰포트_단위_사용하기">반응형 타이포그래피에 대한 뷰포트 단위 사용하기</h3> + +<p>흥미로운 접근 방식은 반응형 타이포그래피를 사용하기 위해 뷰포트 단위 <code>vw</code>를 사용할 수 있다는 점이다. <code>1vw</code>는 뷰포트 너비의 1%와 동일하며, <code>vw</code>를 사용하여 글꼴 크기를 설정하면 항상 뷰포트 크기와 관련이 있다는 것을 의미한다.</p> + +<pre class="brush: css">h1 { + font-size: 6vw; +}</pre> + +<p>위의 작업 수행에서의 문제는 사용자가 vw 단위를 사용하여 텍스트 집합을 확대/축소하는 기능을 상실하는 데 있다. <strong>따라서 여러분은 뷰포트 단위만으로 텍스트를 설정해서는 안 된다</strong>.</p> + +<p>해결책이 하나 있다. <code><a href="/en-US/docs/Web/CSS/calc">calc()</a></code>를 사용하는 것이다. 즉, <code>em</code>와 같은 고정된 크기를 사용하여 속성값 집합에 <code>vw</code> 단위를 추가하면 텍스트는 여전히 확대/축소할 수 있다. 본질적으로 <code>vw</code> 단위는 확대/축소 값에 더해 추가된다.</p> + +<pre class="brush: css">h1 { + font-size: calc(1.5rem + 3vw); +}</pre> + +<p>즉, 머리글에 대한 폰트 크기를 한 번만 지정하면 된다. 크기를 모바일용으로 따로 설정할 게 아니라 미디어 쿼리 내에서 크기를 재정의한다는 말이다. 그러면 뷰포트의 크기가 커질수록 글꼴은 점차 커진다.</p> + +<div class="blockIndicator note"> +<p>이에 대한 예제의 실현: <a href="https://mdn.github.io/css-examples/learn/rwd/type-vw.html">예제</a>, <a href="https://github.com/mdn/css-examples/blob/master/learn/rwd/type-vw.html">소스 코드</a>.</p> +</div> + +<h2 id="뷰포트_메타_테그">뷰포트 메타 테그</h2> + +<p>응답형 페이지의 에이치티엠엘 소스를 보면 일반적으로 문서의 <code><head></code>에서 다음과 같은 {{htmlelement("meta")}} 태그를 볼 수 있다.</p> + +<pre class="brush: html"><code><meta name="viewport" content="width=device-width,initial-scale=1"></code> +</pre> + +<p>이 메타 태그는 뷰포트의 너비를 장치의 너비로 설정하여 문서를 의도한 크기의 100%로 확장해야 한다고 모바일 브라우저에게 알려줍니다. 이로써 여러분이 의도한 대로 모바일에 최적화된 크기로 문서를 표시합니다.</p> + +<p>왜 이런 것이 필요할까요? 모바일 브라우저는 뷰포트 너비에 대해 거짓말을 하는 경향이 있기 때문이다.</p> + +<p>이 메타 태그는 원래 iPhone이 출시되고 사람들이 작은 전화 화면에서 웹 사이트를 보기 시작했을 때 대부분의 사이트가 모바일 최적화되지 않았기 때문에 존재합니다. 따라서 모바일 브라우저는 뷰포트 너비를 960픽셀로 설정하게 됩니다. 해당 너비로 페이지를 렌더링하고, 그 결과를 데스크톱 조판의 확대 버전으로 표시합니다. 다른 모바일 브라우저(예를 들어 구글 안드로이드)도 똑같은 일을 합니다. 사용자들은 웹사이트를 확대하고 이리저리 끌어 옮기며(panning) 그들이 관심을 갖는 부분을 볼 수 있었지만, 모양이 형편 없었습니다. 만약 여러분이 반응형 디자인이 아닌 사이트를 우연히 발견하게 된다면, 여러분은 오늘날에도 이런 걸 보게 될 것입니다.</p> + +<p>문제는 분기점과 미디어 쿼리를 포함하는 응답형 디자인이 모바일 브라우저에서 의도한 대로 작동하지 않는다는 점에 있습니다. 여러분이 480px 뷰포트 너비나 그 이하에서 시작하는 좁은 화면 조판을 갖고 있고 뷰포트가 960px로 설정되어 있다면 좁은 화면 조판을 모바일에서 절대 볼 수 없게 된다. <code>width=device-width</code>를 설정하면 애플의 기본값인 <code>width=960px</code>를 장치의 실재 너비로 재지정하므로 당신의 미디어 쿼리가 의도한 대로 작동합니다.</p> + +<p>따라서 에이치티엠엘 문서의 헤더 부분에 상기 에이치티엠엘 라인을 <em>항상</em> 포함해야 합니다.</p> + +<p>뷰포트 메타 태그와 함께 사용할 수 있는 다른 설정이 있지만 일반적으로 상기 에이치티엠엘 라인이면 여러분이 사용하고자 하는 내용에 해당합니다.</p> + +<ul> + <li><code>initial-scale</code>: 페이지의 초기 확대/축소 지정은 1로 설정된다.</li> + <li><code>height</code>: 뷰포트 높이를 특정값으로 지정합니다.</li> + <li><code>minimum-scale</code>: 최소 확대/축소 수준을 설정합니다.</li> + <li><code>maximum-scale</code>: 최대 확대/축소 수준을 설정합니다.</li> + <li><code>user-scalable</code>: <code>no</code>값을 지정하게 되면 확대/축소를 방지합니다.</li> +</ul> + +<p>여러분은 <code>minimum-scale</code>와 <code>maximum-scale</code> 사용을 피해야하며, 특히 <code>user-scalable</code>를 <code>no</code>로 설정하는 것도 피해야 합니다. 사용자는 필요한 만큼 확대하거나 축소할 수 있어야 합니다.이를 방지하면 접근성 문제가 발생합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 뷰포트 메타 태그를 대체하기 위해 고안된 씨에스에스 @ 규칙이 있습니다. <a href="/ko/docs/Web/CSS/@viewport">@viewport</a> 그러나 브라우저 지원이 매우 형편없습니다. 그것은 인터넷 익스플로러와 에지에서 구현되었지만, 일단 크롬 기반 에지가 출시되면 더 이상 에지 브라우저의 일부가 되지 않게 됩니다.</p> +</div> + +<h2 id="요약정리">요약정리</h2> + +<p>반응형 디자인은 디자인이 보여지는 당해 환경에서 반응하는 사이트 및 애플리케이션 디자인을 말합니다. 그것은 많은 씨에스에스와 에이치티엠엘 기능과 기술을 망라하며 이제 기본값으로 우리가 웹사이트를 구축할 때 필수적인 방법입니다. 여러분이 휴대폰으로 방문하는 사이트를 생각해보세요. 데스크톱 버전이 축소된 사이트, 또는 사물을 찾기 위해 옆으로 스크롤해야 하는 사이트를 우연히 발견한다는 것은 상당히 이례적인 일일 것입니다. 그렇게 된 것은 웹이 반응형으로 디자인하는 접근방식으로 옮겨갔기 때문입니다.</p> + +<p>또한 이번 단원에서 배운 조판 메서드의 도움으로 반응형 디자인을 달성하기가 훨씬 쉬워졌습니다. 여러분이 당대 웹 개발에 신출내기라면, 반응형 디자인 초창기보다 훨씬 많은 도구가 마련되어 있으니 맘껏 이용하십시요. 따라서 당신이 참조하고 있는 어떤 자료의 연혁을 확인할 가치가 있습니다. 역사적 기록 문서로서 여전히 유용하지만, 사이트 방문자가 이용하는 장치가 무엇이건 관계없이 우아하고 유용한 디자인을 훨씬 쉽게 생성하려면 씨에스에스와 에이치티엠엘의 현대적 용법이 정답입니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout/Media_queries", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/위치잡기/index.html b/files/ko/learn/css/css_layout/위치잡기/index.html new file mode 100644 index 0000000000..76a491ae0e --- /dev/null +++ b/files/ko/learn/css/css_layout/위치잡기/index.html @@ -0,0 +1,585 @@ +--- +title: 위치잡기 +slug: Learn/CSS/CSS_layout/위치잡기 +tags: + - 고정 + - 글 + - 상대 + - 씨에스에스 + - 안내서 + - 위치잡기 + - 절대 + - 조판 + - 초보자 + - 코딩스크립팅 +translation_of: Learn/CSS/CSS_layout/Positioning +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</div> + +<p class="summary">당신이 일반 문서 조판 대열에서 요소를 끄집어 내어, 그것이 다르게 행동하게 만들수 있게 해주는 것이 위치잡기다. 예를 들어 상대 요소 위에 놓거나 브라우저 뷰 포트 내부의 동일한 위치를 항상 유지하게 해준다. 이 문서는 서로 다른 {{cssxref("position")}} 값을 설명하고, 그 걸 사용하는 방법에 대해서도 설명한다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>에이치티엠엘의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">에이치티엠엘 입문서</a>)와 씨에스에스 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">씨에스에스 입문서</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>씨에스에스 위치잡기가 작동하는 방법 배우기</td> + </tr> + </tbody> +</table> + +<p>가능하면 우리 깃허브 저장소에 있는 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/0_basic-flow.html">0_basic-flow.html</a></code> 파일의 사본을 가지고 당신의 컴퓨터상에서 해당 연습을 함께 따라해보시길 바랍니다. (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/0_basic-flow.html">여기 소스 코드</a>)가 있으니 그걸 착수 파일로 이용하십시요.</p> + +<h2 id="위치잡기_소개">위치잡기 소개</h2> + +<p>크게봐서 위치잡기의 개념은 위에서 설명했듯 기본 문서 대열에 따른 동작을 무시하고 흥미로운 효과를 낼 수 있도록 하는 것입니다. 조판 내부의 일부 상자의 위치를 기본 조판 대열 위치에서 약간 변경한다거나, 약간 기묘하거나, 편치않은 느낌을 주고 싶다면 어떨까? 위치잡기가 바로 당신의 도구입니다. 또는 페이지의 다른 부분의 상위에 부동(浮動)하는 사용자 인터페이스 요소를 만들고 싶다라거나 아울러 페이지가 스크롤된 정도와 상관없이 항상 브라우저 창 내부의 동일한 위치에 놓이게 하고 싶다면? 위치잡기는 그런 조판 작업을 가능하게 합니다.</p> + +<p>에이치티엠엘 요소에 적용될 수 있는 여러 가지 유형의 위치잡기가 존재합니다. 어떤 요소상에 특정 유형의 위치잡기가 활성화되도록 하기 위해 {{cssxref("position")}} 속성을 사용합니다.</p> + +<h3 id="정적_위치잡기">정적 위치잡기</h3> + +<p>정적 위치잡기는 모든 요소에 주어지는 기본값입니다. 즉, "요소를 문서 조판 대열상에 일반 위치에 배치하라는 것으로 여기서 특별한 것은 없습니다."</p> + +<p>이를 입증한다거나, 이어질 섹션에서 다룰 예제를 설정하려면 먼저 에이치티엠엘상에 두 번째 {{htmlelement("p")}} 요소에 <code>positioned</code>라는 클래스를 추가하십시오:</p> + +<pre class="brush: html"><p class="positioned"> ... </p></pre> + +<p>이제 다음과 같은 규칙을 당신의 씨에스에스 하단에 추가하십시요:</p> + +<pre class="brush: css">.positioned { + position: static; + background: yellow; +}</pre> + +<p>이제 저장하고 새로고침하면 두 번째 단락의 배경 색깔이 업데이트된 것을 제외하고 다른 차이가 없다는 것이 확인될 것입니다. 아무 문제없습니다. 앞에서 얘기했듯이 정적 위치잡기는 기본값으로 주어진 동작입니다!</p> + +<div class="note"> +<p><strong>주석</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/1_static-positioning.html">1_static-positioning.html</a></code>에서 볼 수 있습니다.(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/1_static-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h3 id="상대_위치잡기">상대 위치잡기</h3> + +<p>상대 위치잡기는 우리가 살펴 첫 번째 위치 유형입니다. 이것은 정적 위치 결정과 매우 유사합니다. 단, 일단 정상 조판 대열상에 위치잡기할 요소가 자리를 잡고나면 페이지의 다른 요소와 중첩되는 것을 포함하여 최종 위치를 수정할 수 있습니다. 당신의 코드에 있는 <code>position</code> 선언을 업데이트하십시요.</p> + +<pre class="brush: css">position: relative;</pre> + +<p>현 시점에서 저장하고 새로 고침하면 전혀 변경된 결과가 확인되지 않습니다. 그럼 요소의 위치를 어떻게 수정할까요? 다음 절에서 설명하겠지만, {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}을 사용해야 합니다.</p> + +<h3 id="상하_좌우_위치잡기_소개">상하 좌우 위치잡기 소개</h3> + +<p>{{cssxref("top")}}, {{cssxref("bottom")}}와 {{cssxref("left")}}, and {{cssxref("right")}}는 {{cssxref("position")}}과 나란히 사용되어 기준 위치에 비례해 정확한 위치잡기를 지정한다. 이를 시험하려면 다음 선언문을 씨에스에스 <code>.positioned</code> 규칙에 추가하십시오:</p> + +<pre>top: 30px; +left: 30px;</pre> + +<div class="note"> +<p><strong>참고</strong>: 이러한 속성의 값은 당신이 논리적으로 예상할 수 있는 모든 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">단위</a>를 취할 수 있습니다. 예로 pixels, mm, rems, % 등이 해당한다.</p> +</div> + +<p>이제 저장하고 새로고침하면 다음과 같은 내용의 결과를 얻을 것입니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>상대 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: relative; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('상하_좌우_위치잡기_소개', '100%', 500) }}</p> + +<p>근사하죠, 그쵸? 좋습니다. 그러나 이것은 아마도 여러분이 기대했던 것이 아니었을 것입니다. 우리가 좌측 상단을 지정했는데 왜 우측 하단으로 이동했을까요? 처음에는 비논리적으로 들릴지 모르지만, 이것은 상대적 위치잡기가 작용하는 방식일 뿐입니다. 즉, 위치가 지정된 상자의 특정 측면을 밀어서 반대 방향으로 움직이는 보이지 않는 힘이 있다고 생각할 필요가 있습니다. 예를 들어, <code>top: 30px;</code>를 지정하면 힘은 상자 상단을 밀어서 30px 아래로 이동하게 만듭니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/2_relative-positioning.html">2_relative-positioning.html</a></code>에서 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/2_relative-positioning.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="절대_위치잡기">절대 위치잡기</h3> + +<p>절대적인 위치 결정은 매우 다른 결과를 가져옵니다. 당신의 소스 코드에 다음과 같이 위치 선언을 변경해 보겠습니다.</p> + +<pre>position: absolute;</pre> + +<p>지금 저장한 다음에 새로고침하면 다음과 같은 것이 확인되어야 합니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>절대 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">기본적으로 우리는 부모 요소의 너비 100%에 걸쳐 있습니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('절대_위치잡기', '100%', 420) }}</p> + +<p>우선, 위치잡기 요소가 원래 있었어야 했던 문서 대열 속 위치에 있던 간격은 더 이상 존재하지 않는다는 점에 유의하십시오. 즉 간격이 더 이상 존재하지 않는 것처럼 첫 번째와 세 번째 요소가 붙어 버렸습니다! 어떤 면에서는, 이것은 사실입니다. 절대적으로 위치한 요소는 더 이상 일반 문서 조판 대열에서 존재하지 않습니다. 대신 다른 모든 것과는 별개로 독자적인 레이어상에 놓여 있습니다. 이것은 매우 유용합니다. 즉, 페이지의 다른 요소의 위치와 간섭하지 않는 격리된 사용자 인터페이스 기능을 만들 수 있습니다. 예를 들어 팝업 정보 상자 및 제어 메뉴, 롤오버 패널, 페이지 어느 곳에서나 끌어서 놓기할 수 있는 유저 인터페이스 페이지 등등…</p> + +<p>둘째, 요소의 위치가 변경되었음을 알아차립시다. 이는 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}가 절대 위치잡기에 해당해 다른 방식으로 작동하기 때문입니다. 요소가 진입해야 하는 방향을 지정하기 보다는 요소가 (부모) 콘테이너 요소의 상하좌우 측면으로부터 떨어지는 간격을 지정되어야 합니다. 따라서 이 경우, 내 말은 절대 위치잡기 요소는 "콘테이너 요소"의 상단에서 30px, 왼쪽에서 30px에 위치에 놓여야 한다는 말입니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신이 필요하다면 요소의 크기를 재지정하기 위해 {{cssxref("top")}}, {{cssxref("bottom")}}과 {{cssxref("left")}}, {{cssxref("right")}}를 사용할 수 있습니다. 당신이 위치잡기한 요소에 <code>top: 0; bottom: 0; left: 0; right: 0;</code>과 <code>margin: 0;</code>를 지정한 뒤 어떻게 되냐 보십시요! 해보고 다시 원상태로 돌리십시요...</p> +</div> + +<div class="note"> +<p><strong>주석</strong>: 그렇습니다. 여백이 위치잡기한 요소에 여전히 영향을 미칩니다. 그러나 마진 축소 영향은 업습니다.</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: 당신은 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/3_absolute-positioning.html">3_absolute-positioning.html</a></code>에서 예제를 확인할 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/3_absolute-positioning.html">소스 코드를 보세요</a>).</p> +</div> + +<h3 id="위치잡기_상황">위치잡기 상황</h3> + +<p>어떤 요소가 절대 위치잡기의 기준이 되는 "콘테이너 요소"입니까? 이것은 위치잡기 요소의 조상에 지정된 위치 속성의 여하에 따라 많이 달라집니다. (See <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#Identifying_the_containing_block">콘테이너 블록 식별하기</a>).</p> + +<p>조상 요소가 명시적으로 정의된 위치 속성을 가지고 있지 않으면 초깃값으로 모든 조상 요소에 정적 위치가 부여됩니다. 그에 따른 결과, 절대적 위치잡기한 요소는 <strong>initial containing block</strong>에 포함되게 됩니다. 초기 콘테이너 블록은 브라우저 뷰포트 크기의 용적을 가지며, 자신도 {{htmlelement("html")}} 요소를 포함하는 블록입니다. 간단히 말해서, 절대적 위치잡기한 요소는 {{htmlelement("html")}} 요소의 외부에 포함되어 초기 뷰포트 기준과 비례한 곳에 위치하게 됩니다.</p> + +<p>위치잡기한 요소는 에이치티엠엘 소스의 {{htmlelement("body")}} 안에 중첩되지만 최종 조판에서는 페이지의 가장자리 상단과 왼쪽에서 30px 떨어져 있습니다. 우리는 요소의 절대적 위치잡기에서 어떤 요소에 비례해 위치잡기할지 기준이 되는 <strong>positioning context</strong>(위치잡기 상황)을 변경할 수 있습니다. 이것은 조상 요소 중 하나를 기준으로 위치잡기 설정이 이뤄집니다. 다시말해 요소의 내부에 중첩된 요소 중 하나가 기준이 됩니다(내부에 중첩되지 않은 요소를 기준삼아 비례적으로 위치시킬 수 없습니다). 이를 증명하기 위해 다음과 같은 선언을 <code>body</code> 규칙에 추가하십시요:</p> + +<pre>position: relative;</pre> + +<p>이로써 다음과 같은 결과가 나와야 합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><h1>위치잡기 상황</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('위치잡기_상황', '100%', 420) }}</p> + +<p>위치잡기한 요소는 이제 기준이 되는 {{htmlelement("body")}} 요소와 비례한 위치에 놓이게 된다.</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/4_positioning-context.html">4_positioning-context.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/4_positioning-context.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="z-인덱스_소개">z-인덱스 소개</h3> + +<p>이 모든 절대적 위치잡기는 제법 재미나지만, 아직 고려하지 않은 또 다른 것이 있습니다. 요소가 겹치기 시작하면 어떤 요소가 다른 요소 위에 나타나는지 결정하는 기준은 무엇입니까? 지금까지 우리가 본 예제에서, 우리는 위치잡기 상황 속에 단 하나의 위치잡기할 요소만 주어졌습니다. 그리고 그것은 상위에 나타납니다. 왜냐면 위치잡기 요소가 비 위치잡기 요소보다 우위를 점하기 때문입니다. 하나 이상의 요소가 있을 때는 어떨까요?</p> + +<p>다음을 씨에스에스에 추가해 첫 단락도 절대적 위치잡기 대상으로 만들어 봅시다.</p> + +<pre>p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; +}</pre> + +<p>이 시점에서 당신이 보게될 것은 첫 번째 단락이 녹색으로 칠해지고, 문서 대열을 벗어나 원래 위치에서 약간 위에 자리를 잡습니다. 또한, 두 개의 단락이 겹치는 원래의 <code>.positioned</code> 클래스가 지정된 단락 아래에 겹겹이 포개집니다. 이렇게 되는 까닭은 <code>.positioned</code> 클래스로 지정된 단락이 소스 순서상에 두 번째 단락이고 소스 순서상에 뒤에 있는 위치잡기한 요소가 소스 순서상 앞서는 위치잡기한 요소보다 우위를 점하기 때문입니다.</p> + +<p>스택 순서를 변경할 수 있습니까? 네, {{cssxref("z-index")}} 속성을 사용하면 가능합니다. z-인덱스는 z축을 가리킵니다. 당신은 앞서 배경 이미지와 그림자 오프셋을 떨어뜨리는 것과 같은 사물의 위치를 파악하는 방법을 찾는 과정에서 웹 페이지를 수평(x축)과 수직(y축) 좌표로 논의한 학습 과정을 기억하실 겁니다. (0,0)은 페이지(또는 요소)의 상단 왼쪽에 있으며, x-축 및 y-축은 페이지의 오른쪽 및 아래쪽으로 진행합니다(가로쓰기 언어의 경우를 말합니다).</p> + +<p>웹 페이지에는 z축이 있습니다. 스크린 표면으로부터 진행하는 가상 라인, 즉 사용자 얼굴 쪽으로 향하는(당신이 화면 위에 놓고 싶은 것을 망론한다). {{cssxref("z-index")}} 값은 위치잡기한 요소가 해당 축상에 놓일 경우에 영향을 미칩니다. 양수 값은 스택 상단으로 이동하고 음수 값은 스택 아래로 이동합니다(역주: 상단으로 겹겹이 쌓이거나 하단으로 겹겹이 쌓여진다) 기본값으로 위치잡기한 요소는 모두 <code>z-index</code>가 <code>auto</code> 값을 가지며, 이는 사실상 0입니다.</p> + +<p>스택 순서를 변경하려면 다음 선언을 <code>p:nth-of-type(1)</code> rule: 규칙에 추가하십시오.</p> + +<pre>z-index: 1;</pre> + +<p>이제 녹색 단락이 상단에 놓여진 완성된 예가 보여야 합니다.</p> + +<div class="hidden"> +<pre class="brush: html"><h1>z-인덱스</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">이제 나는 <code>&lt;html&gt;</code> 요소가 아닌 <code>&lt;body&gt;</code> 요소를 기준으로 비례하여 절대적 위치잡기합니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; + position: relative; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +.positioned { + position: absolute; + background: yellow; + top: 30px; + left: 30px; +} + +p:nth-of-type(1) { + position: absolute; + background: lime; + top: 10px; + right: 30px; + z-index: 1; +} +</pre> +</div> + +<p>{{ EmbedLiveSample('z-인덱스_소개', '100%', 400) }}</p> + +<p>z-인덱스는 단위가 없는 인덱스 값만 허용한다는 점에 유의하자; 하나의 요소가 Z축 위로 23픽셀이 되도록 지정할 수 없습니다. 그런 식으론 작동하지 않습니다. 높은 값의 요소는 낮은 값 요소의 위로 간니다. 그러니 당신이 어떤 값을 사용할 지에 달려있습니다. 2와 3을 사용하면 300과 40000과 같은 효과를 얻을 수 있습니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/5_z-index.html">5_z-index.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/5_z-index.html">소스 코드 보기</a>).</p> +</div> + +<h3 id="고정_위치잡기">고정 위치잡기</h3> + +<p>이제 고정 위치잡기를 살펴보자. 이것은 절대 위치잡기와 정확히 같은 방식으로 작동합니다.단 한 가지 핵심 차이점이 있습니다. 절대 위치잡기는 {{htmlelement("html")}} 요소나 가까운 조상 요소를 기준으로 비례해 요소를 고정시키지만, 고정 위치잡기는 브라우저 뷰 포트 자체를 기준으로 비례해 요소를 고정합니다. 즉, 탐색 메뉴가 계속 자리를 지키는 것과 같이 제자리에 고정된 유용한 사용자 인터페이스 항목을 생성할 수 있습니다.</p> + +<p>우리가 무슨 얘기를 하는지 보여주기 위해 간단한 예를 들어봅시다. 먼저 씨에스에스에서 기존 <code>p:nth-of-type(1)</code>과 <code>.positioned</code> 규칙을 삭제합니다.</p> + +<p>이제 <code>position: relative;</code> 선언을 지우고, 다음과 같이 고정 높이를 추가하는 규칙을 <code>body</code> 규칙에 업데이트합니다:</p> + +<pre>body { + width: 500px; + height: 1400px; + margin: 0 auto; +}</pre> + +<p>이제 우리는 {{htmlelement("h1")}} 요소에 <code>position: fixed;</code>를 부여하고, 그걸 뷰 포트의 상단 중앙에 놓게 합니다. 다음 규칙을 씨에스에스에 추가하세요.</p> + +<pre>h1 { + position: fixed; + top: 0; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +}</pre> + +<p>화면 상단에 고정시키려면 <code>top: 0;</code>이 요구됩니다. 그런 다음 제목에 콘텐츠 열과 동일한 너비를 부여하고 콘텐츠를 중앙에 놓기 위해 오래됐지만, 신뢰감을 주는 <code>margin: 0 auto;</code>를 사용합니다. 그런 다음 제목에 흰색 배경과 패딩을 부여해 제목 아래에 내용이 보이지 않도록 합니다.</p> + +<p>지금 저장하고 새로고침하면 제목이 고정되는 사소하지만, 재미난 효과를 볼 수 있으며, 스크롤 막대를 위로 올리면 콘텐츠가 드러나고 아래로 내리면 제목 밑으로 콘텐츠가 사라지는 것처럼 보입니다. 하지만 우리는 이것을 더 개선할 수 있습니다. 현재 일부 콘텐츠가 시작부터 제목에 밑에 깔려있는 부분 말입니다. 위치잡기한 제목이 문서 대열상에서 모습을 드러내지 않기 때문입니다. 그래서 나머지 콘텐츠가 맨 위로 이동했습니다. 우리는 올라간 것을 조금 아래로 이동시켜야 합니다. 우리는 그걸 첫 번째 단락에 최상위 여백을 설정해서 달성할 수 있습니다. 지금 다음 내용을 추가하세요:</p> + +<pre>p:nth-of-type(1) { + margin-top: 60px; +}</pre> + +<p>당신은 이제 완성된 예제를 볼 수 있어야 합니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>고정 위치잡기</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p class="positioned">나는 더 이상 특별한 위치를 차지하지 않습니다...</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 대열이탈할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +p { + background: aqua; + border: 3px solid blue; + padding: 10px; + margin: 10px; +} + +span { + background: red; + border: 1px solid black; +} + +h1 { + position: fixed; + top: 0px; + width: 500px; + margin: 0 auto; + background: white; + padding: 10px; +} + +p:nth-of-type(1) { + margin-top: 60px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('고정_위치잡기', '100%', 400) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/6_fixed-positioning.html">6_fixed-positioning.html</a></code>에서 볼 수 있습니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/6_fixed-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h3 id="position_sticky">position: sticky</h3> + +<p>이용할 수 있는 <code>position: sticky</code>라고 불리우는 또 다른 위치잡기 값이 있습니다. 이것은 다른 위치잡기보다 다소 새로운 것입니다. 이것은 기본적으로 상대 위치잡기와 고정 위치잡기가 혼합된 하이브리드로서, 위치잡기 요소가 특정 임계점에(예로 뷰포트의 상단으로부터 10px) 스크롤될 때까지 상대 위치잡기처럼 행동할 수 있다가 그 뒤에 위치가 고정됩니다. 예를 들어, 탐색 막대가 특정 지점까지 페이지와 함께 스크롤한 다음 페이지 상단에 흡착되도록 사용할 수 있습니다.</p> + +<div id="흡착_1"> +<div class="hidden"> +<h6 id="흡착_위치잡기_예제">흡착 위치잡기 예제</h6> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> + +<div class="positioned">흡착</div> + +<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p> + +<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p> </pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +.positioned { + background: rgba(255,84,104,.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; + border-radius: 5px; +}</pre> +</div> + +<pre class="brush: css">.positioned { + position: sticky; + top: 30px; + left: 30px; +}</pre> +</div> + +<p>{{ EmbedLiveSample('흡착_1', '100%', 200) }}</p> + +<p><code>position: sticky</code>의 일반적 사용례기도 하고 흥미로운 사용례는 스크롤링하다 제목에 도달하면 서로 다른 제목이 페이지의 맨 위에 흡착되는 색인 페이지를 만드는 것입니다. 이런 사례에 대한 마크업은 다음과 같은 모습일 수 있습니다:</p> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> + +<p>씨에스에스는 다음과 같이 보일 수 있다. 일반 대열에서는 {{htmlelement("dt")}} 요소가 콘텐츠와 함께 스크롤됩니다. {{cssxref("top")}} 값이 0이고 {{htmlelement("dt")}} 요소에 <code>position: sticky</code>를 추가하면 이를 지원하는 브라우저는 그 위치(0)에 도달할 때 머리글을 브라우저 뷰포트 상단에 흡착시킵니다. 그 후 각각의 후속 머리글은 자신의 위치까지 스크롤하는 시점에 이전 머리글을 교체합니다.</p> + +<pre class="brush: css">dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<div id="흡착_2"> +<div class="hidden"> +<pre class="brush: css">body { + width: 500px; + height: 1400px; + margin: 0 auto; +} + +dt { + background-color: black; + color: white; + padding: 10px; + position: sticky; + top: 0; + left: 0; + margin: 1em 0; +} +</pre> + +<pre class="brush: html"><h1>흡착 위치잡기</h1> + +<dl> + <dt>A</dt> + <dd>Apple</dd> + <dd>Ant</dd> + <dd>Altimeter</dd> + <dd>Airplane</dd> + <dt>B</dt> + <dd>Bird</dd> + <dd>Buzzard</dd> + <dd>Bee</dd> + <dd>Banana</dd> + <dd>Beanstalk</dd> + <dt>C</dt> + <dd>Calculator</dd> + <dd>Cane</dd> + <dd>Camera</dd> + <dd>Camel</dd> + <dt>D</dt> + <dd>Duck</dd> + <dd>Dime</dd> + <dd>Dipstick</dd> + <dd>Drone</dd> + <dt>E</dt> + <dd>Egg</dd> + <dd>Elephant</dd> + <dd>Egret</dd> +</dl> +</pre> +</div> +</div> + +<p>{{ EmbedLiveSample('흡착_2', '100%', 200) }}</p> + +<div class="note"> +<p><strong>참고</strong>: 당신은 이 시점에 예제의 실제 구현 장면을 <code><a href="http://mdn.github.io/learning-area/css/css-layout/positioning/7_sticky-positioning.html">7_sticky-positioning.html</a></code>에서 볼 수 있습니다(<a href="https://github.com/mdn/learning-area/blob/master/css/css-layout/positioning/7_sticky-positioning.html">소스 코드는 여기서 보세요</a>).</p> +</div> + +<h2 id="요약정리">요약정리</h2> + +<p>기본적인 위치잡기를 가지고 놀이삼아 시험해 보니 재미있었을 것이다; 비록 이것이 완전체 조판에 사용할 수 있는 방법은 아니지만, 여러분이 보았다시피 이것이 알맞은 용도로 사용될 수 있는 많은 작업들이 있다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Floats", "Learn/CSS/CSS_layout/Multiple-column_Layout", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li>{{cssxref("position")}} 속성 참조.</li> + <li>좀 더 유용한 구상을 위한 <a href="/ko/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">실용적인 위치잡기 사례</a></li> +</ul> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">씨에스에스 조판 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">일반 대열</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 조판</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 조판 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">조판 이해도 필수 평가</a></li> +</ul> diff --git a/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html new file mode 100644 index 0000000000..07910a4d26 --- /dev/null +++ b/files/ko/learn/css/css_layout/이전_브라우저_지원/index.html @@ -0,0 +1,248 @@ +--- +title: 이전 브라우저 지원 +slug: Learn/CSS/CSS_layout/이전_브라우저_지원 +tags: + - 가변상자 + - 격자 + - 기능 쿼리 + - 레거시 + - 부동체 + - 씨에스에스 + - 안내서 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Supporting_Older_Browsers +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">이 모듈에서는 Flexbox 및 Grid를 디자인의 기본 레이아웃 메서드로 사용할 것을 권고합니다. 그러나 당신이 사용한 메서드를 지원하지 않는 브라우저나 이전 브라우저를 사용해 당신의 사이트를 방문하는 사람들이 있을 겁니다. 이런 일은 웹상에서 항상 있는 일입니다. 즉 새로운 기능이 개발됨에 따라 서로 다른 브라우저가 서로 다른 것들의 우선 순위를 정합니다. 이 문서는 구식 기술의 사용자들을 외면하지 않고도 최신 웹 기술을 사용하는 방법에 대해 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML 기본 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 입문</a> 학습), CSS의 작동 방식 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 입문 </a> 및 (<a href="/ko/docs/Learn/CSS/Styling_boxes">상자 양식 지정</a> 학습)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>여러분이 사용하려는 기능을 지원하지 않을 수있는 이전 브라우저에서 레이아웃을 지원하는 방법을 파악합니다.</td> + </tr> + </tbody> +</table> + +<h2 id="당신의_사이트_브라우저_지향은">당신의 사이트 브라우저 지향은?</h2> + +<p>모든 웹사이트는 공략 대상에 따라 달라집니다. 접근 방식을 결정하기 전에 이전 브라우저를 사용하여 사이트를 방문하는 방문자 수를 확인하십시오. 사람들이 사용중인 기술을 알려주는 분석 기능(예: Google analytics)을 이용할 수 있고, 추가 및 교체할 기존 웹 사이트가 있는 경우 이는 간단한 작업입니다. 당신이 분석툴이 없거나, 이번이 완전히 새로운 사이트 개설이라면 <a href="http://gs.statcounter.com/">Statcounter</a>같은 위치별로 필터링된 통계를 제공할 수 있는 사이트가 있습니다.</p> + +<p>또한 사람들이 여러분의 사이트를 이용하는 방식이나 장치 유형을 고려해야만 합니다. 예를 들어 모바일 장치 이용 방문자가 평균치를 웃돌거라는 예상을 할 수 있습니다. 접근성 및 보조 기술을 사용하는 사람들은 항상 고려해야하지만 일부 사이트에서는 그 점이 더욱 중요할 수 있습니다. 필자의 경험에 따르면 개발자들은 종종 이전 버전의 인터넷 익스플로러 사용자 1%에 대해 매우 걱정하는 반면, 더 많은 사용자 층인 내게 필요한 옵션 사용자에 대해선 전혀 고려하지 않습니다.</p> + +<h2 id="당신이_사용하려는_기능에_대한_지원은_어떻습니까">당신이 사용하려는 기능에 대한 지원은 어떻습니까?</h2> + +<p>사이트에 들어오는 브라우저를 알면, 해당 대상에 사용하고 싶은 기술을 평가할 수 있고, 그리고 그 기술을 이용할 수 없는 방문객들에게 얼마나 쉽게 대안을 제공할 수 있는지 진단할 수 있습니다. 우리는 CSS 속성을 상세히 설명하는 각 페이지에 대한 브라우저 호환성 정보를 모질라 개발자 네트워크에서 제공함으로써 쉽게 사용할 수 있도록 노력하고 있습니다. 예를 들어, {{cssxref("grid-template-columns")}} 페이지를 살펴보십시오. 이 페이지의 맨 아래에는 이 속성을 지원하기 시작한 버전과 함께 주요 브라우저가 나열된 표가 있습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16047/browser-table.png" style="height: 1178px; width: 2102px;"></p> + +<p>기능이 얼마나 잘 지원되는지 확인하는 또 다른 일반적인 방법은 <a href="https://caniuse.com/">Can I Use</a> 웹 사이트입니다. 이 사이트에는 대부분의 웹 플랫폼 기능이 브라우저 지원 상태에 대한 정보와 함께 나열됩니다. 위치별로 사용 통계를 볼 수 있습니다. 주로 특정 지역의 사용자가있는 사이트에서 작업하는 경우 유용합니다. Google 웹 로그 분석 계정을 연결하여 사용자 데이터를 기반으로 분석할 수도 있습니다.</p> + +<p>사용자의 브라우저가 보유한 기술과 당신이 사용하려는 것에 대한 지원을 이해하면 당신은 좋은 상황에서 모든 결정을 내리고 모든 사용자를 가장 잘 지원할 수있는 방법을 알 수 있습니다.</p> + +<h2 id="지원하는_것과_모양이_똑같다는_말은_다르다">지원하는 것과 '모양이 똑같다'는 말은 다르다</h2> + +<p>일부 사용자는 휴대 전화로 사이트를 보고 다른 사용자는 대형 데스크톱 화면에서 사이트를 보고 있기 때문에 모든 브라우저에서 웹 사이트가 동일하게 보이지 않을 수 있습니다. 마찬가지로 일부 사용자는 이전 브라우저 버전을 갖고 있고 다른 사용자에게는 최신 브라우저를 갖고 있습니다. 일부 사용자는 화면 읽기 프로그램을 사용해 내용을 읽거나 페이지를 확대하여 읽을 수도 있습니다. 모든 사람을 지원한다는 것은 방어적으로 디자인된 콘텐츠 버전을 제공하여 최신 브라우저에서는 사이트 외관이 뛰어나지만, 이전 브라우저 사용자에게는 기본 수준으로 계속 사용할 수 있음을 의미합니다.</p> + +<p>기본적인 지원 수준이란 페이지의 일반적인 흐름이 이해되도록 콘텐츠를 잘 구성하는 것에서 출발합니다. 기능이 매우 제한적인 전화기 사용자는 많은 CSS를 얻을 수 없지만, 콘텐츠는 쉽게 읽을 수 있는 방식으로 나열됩니다. 따라서 항상 잘 구성된 HTML 문서에서 출발해야 합니다. 여러분의 스타일 시트를 제거했을 때, 컨텐츠가 여전히 잘 이해되나요?</p> + +<p>한 가지 옵션은 아주 오래된 브라우저나 제한된 브라우저를 사용하는 사람들이 찾을 수 있는 대체 페이지로 사이트 외관을 단순화하는 것입니다. 문제가 되는 해당 브라우저를 사용해 소수의 사람들이 사이트를 방문하는 경우 최신 브라우저 사용자들과 비슷한 체험을 그들에게 제공하기 위해 시간을 쏟는 것이 상업적으로 맞지 않을 겁니다. 사이트의 접근성을 높이고 더 많은 사용자에게 서비스를 제공하는 일에 시간을 투자하는 것이 더 좋을 겁니다. 평범한 HTML 페이지와 온갖 장신구가 포함된 페이지 사이에는 중간 지점이 있으며 CSS는 실제로 이러한 대체 페이지를 매우 간단하게 생성해 줍니다.</p> + +<h2 id="CSS로_대체_페이지_생성하기">CSS로 대체 페이지 생성하기</h2> + +<p>CSS 규격에는 두 가지 레이아웃 메서드가 동일한 항목에 적용될 때 브라우저가 수행하는 작업을 설명하는 정보가 포함되어 있습니다. 즉, 부동체 항목이 한편으로는 CSS grid 레이아웃을 사용하는 grid 항목인 경우 발생하는 상황에 대한 정의가 있음을 의미합니다. 이 정보가 브라우저가 이해하지 못하는 CSS를 무시한다는 지식과 결합되어, 이미 다루었던 <a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 기술</a>을 사용하여 간단한 레이아웃을 생성할 수 있는 방법이 있습니다. 그런 다음 이를 최신 브라우저에서는 grid 레이아웃으로 덮어씁니다.</p> + +<p>아래 예에서는 세 개의 <code><div></code> 부동체를 행으로 표시했습니다. <a href="/ko/docs/Learn/CSS/CSS_layout/Grids">CSS grid 레이아웃</a>을 지원하지 않는 브라우저는 상자 행을 <ruby><em>부동 레이아웃</em><rp> (</rp><rt>浮動 組版</rt><rp>) </rp></ruby>으로 간주합니다. grid 항목이 되는 부동 항목은 부동 동작을 상실합니다. 즉, <code>.wrapper</code> 클레스를 grid 컨테이너로 전환하면 부동 항목이 grid 항목이 됩니다. 브라우저가 grid 레이아웃을 지원하는 경우 grid 디스플레이를 표시합니다. 지원하지 않으면 <code>display: grid</code> 관련 속성은 무시되고 부동 레이아웃이 사용됩니다.</p> + +<div id="예제1"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제1', '100%', '200') }}</p> +</div> + +<div class="note"> +<p><strong>참고</strong>: {{cssxref("clear")}} 속성도 마찬가지로 정리된 항목이 grid가 되자마자 효력을 상실합니다. 따라서 정리된 footer가 딸린 레이아웃을 가질 수 있으며, 이 레이아웃이 grid 레이아웃으로 전환됩니다.</p> +</div> + +<h3 id="대체_메서드">대체 메서드</h3> + +<p>이 부동 예제와 비슷한 방식으로 사용할 수있는 여러 레이아웃 메서드가 있습니다. 당신이 생성해야하는 레이아웃 패턴에 가장 적합한 것을 선택할 수 있습니다.</p> + +<dl> + <dd>Float(부동) 및 <strong>clear</strong></dd> + <dd>위에서 볼 수 있듯이, 부동 또는 정리 속성이 레이아웃에 미치는 효과는 부동되거나 정리된 항목이 flex 또는 grid 항목이 되면 중단됩니다.</dd> + <dt>display: inline-block</dt> + <dd>이 방법을 사용하여 열 레이아웃을 생성할 수 있는 경우는 항목이 <code>display: inline-block</code>로 설정되었을 경우이지만, flex 또는 grid 항목이 된다면 인라인 블록 동작은 무시됩니다.</dd> + <dt>display: table</dt> + <dd>CSS 테이블을 생성하는 메서드는 해당 단원의 <a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">입문서</a>가 대체품으로 활용될 수 있습니다. CSS 테이블 레이아웃으로 설정된 항목은 그들이 flex 또는 grid 항목이 될 경우 자기 동작을 상실하게 됩니다. 중요하게는 테이블 구조를 수정하기 위해 생성된 익명 상자는 생성되지 않습니다.</dd> + <dt>다단 레이아웃</dt> + <dd>특정 레이아웃의 경우 당신은 <a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단</a>을 대체품로 사용할 수 있습니다. 여러분의 콘테이너가 <code>column-*</code> 속성에 속한 것으로 정의되었다면 grid 컨테이너가 될 것이고, 다단 동작은 발생하지 않습니다.</dd> + <dt>grid 대체품 역할인 Flexbox</dt> + <dd><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a>는 인터넷 익스플로러 10과 11이 지원하기 때문에 grid를 지원하는 브라우저가 훨씬 많이 있습니다. 다만 이 단원의 뒷부분에서 설명하고 있는 구형 브라우저에서 flex를 지원하기 위한 처리 방법에 대해서도 확인해보세요. flex 컨테이너를 grid 컨테이너로 만들면 자식에 적용된 모든 <ruby><code>flex</code><rp> (</rp><rp>) </rp></ruby> 속성은 무시됩니다.</dd> +</dl> + +<p>구형 브라우저에서 레이아웃 조정이 많이 필요한 경우 CSS를 이런 식으로 사용하면 괜찮은 경험을 할 수 있습니다. 오래되고 잘 지원되는 기술을 기반으로 간단한 레이아웃을 추가한 다음 최신 CSS를 사용하여 잠재 고객의 90% 이상이 볼 수있는 레이아웃을 만듭니다. 그러나 대체 코드에 새 브라우저가 해석할 내용이 포함되어야하는 경우가 있습니다. 이에 대한 좋은 예는 부동 항목에 백분율 너비를 추가하여 열을 마치 grid 디스플레이처럼 보이도록 컨테이너를 채울 수 있도록 (너비를) 늘리는 경우입니다.</p> + +<p>부동 레이아웃에서 백분율은 컨테이너를 기준으로 계산됩니다. 33.333%는 컨테이너 너비의 3 분의 1입니다. 그러나 grid에서는 항목이 배치된 grid 영역을 기준으로 33.333%가 계산되므로 grid 레이아웃이 도입되면 실제로 원하는 크기의 3분의 1이 됩니다.</p> + +<div id="예제2"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제2', '100%', '200') }}</p> +</div> + +<p>이 문제를 해결하려면 grid가 지원되는지 여부와 너비가 재정의되는지 여부를 감지할 수있는 방법이 필요합니다. CSS가 우리를 위해 마련한 해결책은 이렇습니다.</p> + +<h2 id="Feature_queries">Feature queries</h2> + +<p>feature queries를 사용하면 브라우저가 특정 CSS 기능을 지원하는지 테스트 할 수 있습니다. 즉, 특정 기능을 지원하지 않는 브라우저 용 CSS를 작성한 다음 브라우저가 지원되는지 여부와 멋진 레이아웃을 제공하는지 확인하십시오.</p> + +<p>위의 예제에 feature query를 추가하면 grid가 지원됨을 알고 있는 경우 이 feature query를 사용하여 항목 너비를 <ruby><code>auto</code><rp> (</rp><rp>) </rp></ruby>으로 다시 설정할 수 있습니다.</p> + +<div id="예제3"> +<pre class="brush: css">* {box-sizing: border-box;} + +.wrapper { + background-color: rgb(79,185,227); + padding: 10px; + max-width: 400px; + display: grid; + grid-template-columns: 1fr 1fr 1fr; +} + +.item { + float: left; + border-radius: 5px; + background-color: rgb(207,232,220); + padding: 1em; + width: 33.333%; +} + +@supports (display: grid) { + .item { + width: auto; + } +} +</pre> + +<pre class="brush: html"><div class="wrapper"> + <div class="item">항목 하나</div> + <div class="item">항목 둘</div> + <div class="item">항목 셋</div> +</div> +</pre> + +<p>{{ EmbedLiveSample('예제3', '100%', '200') }}</p> +</div> + +<p>feature query에 대한 지원은 최신 브라우저에서 매우 유용하지만 CSS grid를 지원하지 않는 브라우저는 feature query도 지원하지 않는다는 점에 유의해야합니다. 이는 위에서 설명한 접근 방식이 해당 브라우저에서 작동한다는 것을 의미합니다. 우리가 하는 작업은 feature query를 차치하고 먼저 이전 CSS를 작성하는 것입니다. grid를 지원하지 않고 feature query를 지원하지 않는 브라우저는 자기가 이해할 수 있는 레이아웃 정보를 이용하고 그밖에 다른 것들은 완전히 무시할 수 있습니다. feature query를 지원하는 브라우저는 CSS grid도 지원하므로 grid 코드 및 feature query 내부의 코드를 실행합니다.</p> + +<p>feature query 규격에는 브라우저가 기능을 지원하지 않는지 테스트하는 기능도 포함되어 있습니다. 이는 브라우저가 feature query를 지원하는 경우에만 유용합니다. feature query를 지원하지 않는 브라우저가 갈수록 사라짐에 따라 미래에는 지원 부족 여부를 확인하는 방법은 작동하게 됩니다. 그러나 지금은 최상의 지원을 위해 이전 CSS를 사용한 다음 덮어 쓰는 방식을 사용하십시오.</p> + +<h2 id="Flexbox_예전_버전">Flexbox 예전 버전</h2> + +<p>이전 버전의 브라우저에서는 이전의 Flexbox 명세가 반복되는 것을 여러분은 발견할 수 있습니다. 글을 쓰는 시점에서 이것은 Flexbox에 <code>-ms-</code> 접두사를 사용하는 인터넷 익스플로러 10의 문제입니다. 이는 또한 오래된 문서와 자습서가 있음을 의미합니다. 이 유용한 <a href="https://css-tricks.com/old-flexbox-and-new-flexbox/">안내서</a>는 보고있는 내용을 확인하는 데 도움이되고 매우 오래된 브라우저에서 flex 지원이 필요한 경우에도 도움이 될 수 있습니다.</p> + +<h2 id="인터넷_익스플로러_10과_11_접두사_버전">인터넷 익스플로러 10과 11 접두사 버전</h2> + +<p>CSS grid 규격은 인터넷 익스플로러 10에서 처음 나온 원형이었습니다. 즉, 인터넷 익스플로러 10 및 11에는 최신 grid 지원이 없지만, 이 사이트에 문서화된 최신 규격과는 다르나 매우 유용한 그리드 레이아웃 버전이 있습니다. 인터넷 익스플로러 10 및 11 구현은 <code>-ms-</code> 접두사를 사용해 해당 그리드를 마이크로소프트 브라우저에 사용할 수 있으며 이외의 브라우저에서는 무시됩니다. 에지 브라우저는 여전히 이전 구문을 이해하므로 현대 그리드 CSS에서 모든 항목을 안전하게 덮어씁니다.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">그리드 레이아웃의 점진적 향상</a>에 대한 안내서는 그리드의 인터넷 익스플로러 버전을 이해하는 데 도움이되며 이 단원 끝에는 별도의 유용한 링크를 포함하고 있습니다. 그러나 이전 인터넷 익스플로러 버전 사용자의 방문자 수가 매우 많지 않다면 모든 비지원 브라우저에서 작동하는 대체품을 만드는 것이 더 좋습니다.</p> + +<h2 id="이전_브라우저_여부_확인">이전 브라우저 여부 확인</h2> + +<p>Flexbox 및 그리드를 지원하는 대부분의 브라우저를 사용하면 구형 브라우저를 테스트하기가 상당히 어려울 수 있습니다. 한 가지 방법은 <a href="https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing">크로스 브라우저 테스트</a> 단위에 설명 된대로 Sauce<em> Labs</em>과 같은 온라인 테스트 도구를 사용하는 것입니다.</p> + +<p>또한 가상 컴퓨터를 다운로드하여 설치한 뒤 제약이 걸린 본인의 컴퓨터 환경에서 이전 버전의 브라우저를 실행할 수 있습니다. 이전 버전의 인터넷 익스플로러에 액세스하는 것이 특히 유용하며 이를 위해 마이크로소프트는 <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">다양한 가상 컴퓨터를 무료로 다운로드</a> 할 수 있도록 만들었습니다. 맥, 윈도우즈 및 리눅스 운영 체제에서 가상 컴퓨터를 사용할 수 있으므로 윈도우즈 컴퓨터를 사용하지 않더라도 이전 및 최신 윈도우즈 브라우저에서 테스트할 수있는 좋은 방법입니다.</p> + +<h2 id="요약정리">요약정리</h2> + +<p>여러분은 이제 그리드 및 Flexbox와 같은 기술을 자신있게 사용하고, 이전 브라우저를 위한 대체품을 만들고, 향후 발생할 수 있는 새로운 기술을 활용할 수 있는 지식을 얻었습니다.</p> + +<h2 id="참조_항목">참조 항목</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2016/08/using-feature-queries-in-css/">CSS feature query 사용하기</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexbox">Flexbox의 이전 버전과의 호환성</a></li> + <li><a href="https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid_and_Progressive_Enhancement">CSS 레이아웃과 점진적 향상</a></li> + <li><a href="https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/">CSS 그리드 사용하기: 그리드 없는 브라우저 지원하기</a></li> + <li><a href="https://24ways.org/2012/css3-grid-layout/">인터넷 익스플로러 10 및 11 버전 그리드 사용을 위한 자습서</a></li> + <li><a href="https://rachelandrew.co.uk/archives/2016/11/26/should-i-try-to-use-the-ie-implementation-of-css-grid-layout/">인터넷 익스플로러 10 용 그리드 레이아웃 구현을 사용해야 하나요</a>?</li> + <li><a href="https://24ways.org/2017/cascading-web-design/">feature query가 포함된 중첩된 웹 디자인</a></li> + <li><a href="https://gridbyexample.com/learn/2016/12/24/learning-grid-day24/">feature query 사용하기 (동영상)</a></li> +</ul> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Legacy_Layout_methods", "Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 소개</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/일반_흐름">Normal Flow</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">그리드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/위치잡기">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/반응형_디자인">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/미디어_쿼리_초보자_안내서">미디어 쿼리 초보자 안내서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/레거시_조판_메서드">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li>레이아웃 이해도 필수 평가</li> +</ul> diff --git a/files/ko/learn/css/css_layout/일반_흐름/index.html b/files/ko/learn/css/css_layout/일반_흐름/index.html new file mode 100644 index 0000000000..43b4366c0e --- /dev/null +++ b/files/ko/learn/css/css_layout/일반_흐름/index.html @@ -0,0 +1,102 @@ +--- +title: 일반 대열 +slug: Learn/CSS/CSS_layout/일반_흐름 +tags: + - 격자형 + - 부동 + - 씨에스에스 + - 일반 대열 + - 조판 + - 초보자 + - 학습 +translation_of: Learn/CSS/CSS_layout/Normal_Flow +--- +<div>{{LearnSidebar}}</div> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<p class="summary">이번 글에서는 normal flow, 다른 말로 만일 당신이 요소의 레이아웃을 변경하지 않을 시 웹페이지 요소가 자기 자신을 배치하는 방법에 관해 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">선결 사항:</th> + <td>HTML의 기초 (<a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML에 대한 소개</a>)와 CSS 작동 방식에 대한 개념(<a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>를 공부하세요.)</td> + </tr> + <tr> + <th scope="row">목표:</th> + <td>변경이 이뤄지기 전에 브라우저가 웹 페이지를 기본값으로 레이아웃하는 방법을 설명하기</td> + </tr> + </tbody> +</table> + +<p>이전 단원에서 상세히 기술한 바와 같이, 당신이 CSS를 적용하지 않을 경우 웹 페이지의 요소는 normal flow로 배치됩니다. 그리고 normal flow에 포함된 요소의 위치를 조정하거나 요소를 완전히 제거함으로써 요소가 동작하는 방법을 변경할 수 있습니다. 모든 웹 페이지를 시작하는 최상의 방법은 normal flow에서 읽기 가능하며, 견고하고 구조화된 문서로 시작하는 것입니다. 이렇게 하면 제한된 기능을 가진 브라우저를 사용하거나 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 장치를 사용하는 사용자들까지 읽을 수 있는(readable) 콘텐츠로 만들 수 있습니다. 또한, normal flow는 읽기 가능한 문서를 만들도록 마련된 것으로, 이를 출발점으로 삼아 레이아웃을 변경할 때 웹페이지 문서와 대립해 싸울 게 아니라 그것과 협력해서 작업하게 됩니다.</p> + +<p>서로 다른 레이아웃 메서드를 본격적으로 파헤치기 전에 일반 문서 흐름과 관련하여 이전 모듈에서 학습했던 내용 중의 일부를 복습하는 것도 가치가 있습니다.</p> + +<h2 id="기본값으로_요소들은_어떻게_배치되는가">기본값으로 요소들은 어떻게 배치되는가?</h2> + +<p>우선 개별 요소인 상자의 배치는 자신의 내용물을 채택하고, 그 주변에 패딩을 더하고, 테두리와 여백을 더하는 식으로 이뤄집니다. 다시 말해 앞서 살펴보았던 박스 모델과 같습니다.</p> + +<p>기본값으로 <a href="/ko/docs/Web/HTML/Block-level_elements">블록 수준 요소</a>의 내용물은 자기 부모 요소의 너비 100%와 자체 내용물의 최대 높이가 됩니다. <a href="/ko/docs/Web/HTML/Inline_elements">인라인 요소</a>는 자체 내용물의 최대 높이를 취하는 동시에 최대 너비를 취합니다. 인라인 요소에 너비나 높이를 설정할 수는 없습니다. 그들은 블록 수준 요소의 콘텐츠 내부에 들어앉았을 뿐입니다. 인라인 요소의 크기를 제어하려면 그것을 <code>display: block;</code> 속성값이나 양쪽의 성격이 혼합된 <code>display: inline-block;</code>을 가지고 블록 수준 요소처럼 행동하도록 설정할 필요가 있습니다.</p> + +<p>앞서 살펴본 내용에서 개별 요소는 설명되지만, 여러 요소가 서로 상호 작용하는 방법은 어떻게 설명할까요? (레이아웃 입문서에서 언급했던) 일반 레이아웃의 flow는 브라우저의 뷰포트 안에 요소를 배치하는 시스템입니다. 기본값으로 블록 수준 요소의 배치는 부모의 <a href="/ko/docs/Web/CSS/writing-mode">쓰기 모드</a>(<em>initial</em>: horizontal-tb)에 기초해 <em>블록 flow 방향</em>에 포함되어 이뤄집니다. 다시 말해 각 블록 요소는 마지막 요소 아래 새 줄에 나타나며, 각 요소에 주어진 margin에 의해 구분됩니다. 그러므로 영어 또는 여타 가로쓰기, 상단에서 하단으로 행갈이 하는 쓰기 모드와 블록 수준 요소는 수직으로 배치됩니다.</p> + +<p>인라인 요소는 다르게 동작합니다. 새로운 줄에 나타나는 대신, 다른 요소와 같은 라인에 차례로 자리 잡습니다. 다만 인접(혹은 접힌) 텍스트 콘텐츠는 해당 부모의 블록 수준 요소의 너비 내에서 자신이 자리를 잡을 수 있는 공간이 있는 경우가 해당합니다. 충분한 공간이 없을 경우 overflow되는 텍스트 또는 요소는 새로운 줄에 나타납니다.</p> + +<p>두 개의 인접 요소가 모두 자체 여백이 지정되어 있다면 두 여백은 접촉하고 그중 큰 여백만 남게 되며, 작은 여백은 사라집니다. 이를 마진 축소(margin collapsing)라고 하며 이전에 확인해본 적이 있습니다.</p> + +<p>이 모든 것을 설명하는 간단한 예를 살펴봅시다.</p> + +<div id="일반_대열"> +<pre class="brush: html"><h1>기본 문서 flow</h1> + +<p>나는 기본 볼록 수준 요소입니다. 나와 인접한 블록 수준 요소는 내 아래 새 줄에 자리합니다.</p> + +<p>기본값으로 우리는 우리 부모 요소의 너비 100%를 넘나들며, 우리 자녀 콘텐츠의 최대 높이를 취합니다. 우리의 총 너비와 총 높이는 우리의 콘텐츠 + 패딩 + 테두리 너비 및 높이입니다.</p> + +<p>우리는 여백으로 구분됩니다. 여백 축소로 때문에 우리의 여백 중의 하나의 너비로 구분됩니다. 두게의 여백이 아니라.</p> + +<p>인라인 요소 <span>이 것과 같은</span> 그리고 <span>이것이</span> 차례로 같은 라인에, 그리고 같은 라인에 공간이 있을 경우 인접한 텍스트 노드에 자리를 잡게 됩니다. 인라인 요소가 오버플로할 경우 <span>(이 경우와 같이 텍스트를 포함했을 경우) 가능하면 새 줄로 접혀들어갑니다.)</span>, 그렇지 않으면 새로운 라인으로 계속 진행할 것입니다. 이 이미지가 하는 것처럼: <img src="https://mdn.mozillademos.org/files/13360/long.jpg"></p></pre> + +<pre class="brush: css">body { + width: 500px; + margin: 0 auto; +} + +p { + background: rgba(255,84,104,0.3); + border: 2px solid rgb(255,84,104); + padding: 10px; + margin: 10px; +} + +span { + background: white; + border: 1px solid black; +}</pre> +</div> + +<p>{{ EmbedLiveSample('일반_flow', '100%', 500) }}</p> + +<h2 id="요약정리">요약정리</h2> + +<p>이제 당신은 normal flow은 물론, 기본값으로 브라우저가 어떤 방식으로 사물을 배치하는지 이해했습니다. 당신의 디자인 필요에 따라 레이아웃을 만들기 위해 디스플레이 기본값을 변경하는 방법을 배우려면 다음 단계로 이동하세요.</p> + +<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Introduction", "Learn/CSS/CSS_layout/Flexbox", "Learn/CSS/CSS_layout")}}</p> + +<h2 id="이번_단위에는">이번 단위에는</h2> + +<ul> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Introduction">CSS 레이아웃 입문서</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%BC%EB%B0%98_%ED%9D%90%EB%A6%84">normal flow</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Flexbox">가변상자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Grids">격자</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Floats">부동체</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9C%84%EC%B9%98%EC%9E%A1%EA%B8%B0">위치잡기</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">다단 레이아웃</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EB%B0%98%EC%9D%91%ED%98%95_%EB%94%94%EC%9E%90%EC%9D%B8">반응형 디자인</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">레거시 레이아웃 메서드</a></li> + <li><a href="/ko/docs/Learn/CSS/CSS_layout/%EC%9D%B4%EC%A0%84_%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80_%EC%A7%80%EC%9B%90">이전 브라우저 지원</a></li> + <li>필수 레이아웃 이해도 평가</li> +</ul> diff --git a/files/ko/learn/css/first_steps/getting_started/index.html b/files/ko/learn/css/first_steps/getting_started/index.html new file mode 100644 index 0000000000..431e4bca1a --- /dev/null +++ b/files/ko/learn/css/first_steps/getting_started/index.html @@ -0,0 +1,253 @@ +--- +title: CSS 로 시작하기 +slug: Learn/CSS/First_steps/Getting_started +translation_of: Learn/CSS/First_steps/Getting_started +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</div> + +<p class="summary">이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식 및 HTML 기본 지식 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 문서를 HTML 파일에 연결하는 기본 사항을 이해하고, CSS를 사용하여 간단한 텍스트 형식을 지정하기</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_로_시작합니다">HTML 로 시작합니다</h2> + +<p>시작점은 HTML 문서입니다. 자신의 컴퓨터에서 작업하려는 경우에는 아래에서 코드를 복사할 수 있습니다. 아래 코드를 컴퓨터의 폴더에 <code>index.html</code> 로 저장하십시오.</p> + +<pre class="brush: html"><!doctype html> +<html lang="ko-KR"> +<head> + <meta charset="utf-8"> + <title>CSS로 시작하기</title> +</head> + +<body> + + <h1>레벨 1 제목입니다</h1> + + <p>이것은 단락입니다. 본문에는 <span>span 요소</span>와 <a href="http://example.com">링크</a>가 있습니다.</p> + + <p>이것은 두 번째 단락입니다. <em>강조된</em> 요소를 포함합니다.</p> + + <ul> + <li>항목 하나</li> + <li>항목 둘</li> + <li>항목 <em>셋</em></li> + </ul> + +</body> + +</html> +</pre> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 파일을 쉽게 만들 수 없는 장치나 환경에서 이 내용을 읽는 경우, 걱정하지 마십시오 — 페이지의 바로 여기에 예제 코드를 작성할 수 있도록 라이브 코드 편집기가 제공됩니다.</p> +</div> + +<h2 id="문서에_CSS_추가하기">문서에 CSS 추가하기</h2> + +<p>가장 먼저 해야할 일은 HTML 문서에 사용하려는 CSS 규칙이 있다는 것을 알리는 것입니다. CSS 를 HTML 문서에 적용하는 방법에는 세 가지가 있지만, 지금은 문서의 head 에서 연결하는 가장 일반적이고 유용한 방법을 살펴 보겠습니다.</p> + +<p>HTML 문서와 같은 폴더에 파일을 만들고 <code>styles.css</code> 로 저장하십시오. <code>.css</code> 확장자는 이것이 CSS 파일임을 보여줍니다.</p> + +<p><code>styles.css</code> 파일을 <code>index.html</code> 에 링크하려면, HTML 문서의 {{htmlelement("head")}} 안에 다음 행을 추가하십시오:</p> + +<pre class="brush: html"><link rel="stylesheet" href="styles.css"></pre> + +<p>이 {{htmlelement("link")}} 요소는 <code>rel</code> 속성을 사용하는 스타일 시트와 해당 스타일 시트의 위치를 <code>href</code> 속성의 값으로 브라우저에게 알려줍니다. <code>styles.css</code> 에 규칙을 추가하여 CSS 가 작동하는지 테스트 할 수 있습니다. 코드 편집기를 사용하여 CSS 파일에 다음을 추가하십시오:</p> + +<pre class="brush: css">h1 { + color: red; +}</pre> + +<p>HTML 및 CSS 파일을 저장하고 웹 브라우저에서 페이지를 다시 로드 하십시오. 문서 상단의 레벨 1 제목이 이제 빨간색이어야 합니다. 이 경우 축하합니다. 일부 CSS 를 HTML 문서에 성공적으로 적용했습니다. 그렇지 않으면 모든 것을 올바르게 입력했는지 주의 깊게 확인하십시오.</p> + +<p><code>styles.css</code> 에서 로컬로 계속 작업하거나, 아래의 대화식 편집기를 사용하여 이 자습서를 계속할 수 있습니다. 대화식 편집기는 위의 문서와 마찬가지로 첫 번째 패널의 CSS가 HTML 문서에 연결된 것처럼 작동합니다.</p> + +<h2 id="HTML_요소_스타일링">HTML 요소 스타일링</h2> + +<p>제목을 빨간색으로 하여 이미 HTML 요소를 대상으로 스타일을 지정할 수 있음을 보여주었습니다. 이 작업은 요소 선택자 (HTML 요소 이름과 직접 일치하는 선택자) 를 대상으로 수행됩니다. 문서의 모든 단락을 대상으로 하려면 선택자 <code>p</code> 를 사용합니다. 모든 단락을 녹색으로 바꾸려면 다음을 사용하십시오:</p> + +<pre class="brush: css">p { + color: green; +}</pre> + +<p>선택자를 쉼표로 구분하여 여러 선택자를 한 번에 대상으로 지정할 수 있습니다. 모든 단락과 모든 목록 항목을 녹색으로 만들려면 규칙은 다음과 같습니다:</p> + +<pre class="brush: css">p, li { + color: green; +}</pre> + +<p>아래의 대화식 편집기 (코드 박스 편집) 또는 로컬 CSS 문서에서 이를 시도하십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started1.html", '100%', 900)}} </p> + +<h2 id="요소_elements_의_기본_동작_변경하기">요소 (elements) 의 기본 동작 변경하기</h2> + +<p>예제와 같이 간단한 HTML 문서를 살펴보면, 기본 스타일을 추가하여 브라우저가 HTML을 읽을 수 있게 만드는 방법을 알 수 있습니다. 제목은 크고 대담하며 목록에는 글머리 기호가 있습니다. 이는 브라우저에서 기본 스타일을 포함하는 내부 스타일 시트가 있기 때문에 기본적으로 모든 페이지에 적용됩니다. 그들 없이는 모든 텍스트가 한 덩어리로 모여서 처음부터 모든 것을 스타일링 해야합니다. 모든 최신 브라우저는 기본적으로 HTML 내용을 거의 같은 방식으로 표시합니다.</p> + +<p>그러나, 종종 브라우저에서 선택한 것 이외의 것을 원할 것입니다. 변경하려는 HTML 요소를 선택하고 CSS 규칙을 사용하여 모양을 변경하면 됩니다. 좋은 예는 순서가 없는 목록인 <code><ul></code> 입니다. 목록 글머리 기호가 있으며, 그 글머리 기호를 원하지 않으면 다음과 같이 제거할 수 있습니다:</p> + +<pre class="brush: css">li { + list-style-type: none; +}</pre> + +<p>이것을 CSS 에 추가하십시오.</p> + +<p><code>list-style-type</code> 속성은 MDN 에서 지원되는 값을 확인하는 데 유용한 속성입니다. <code><a href="/en-US/docs/Web/CSS/list-style-type">list-style-type</a></code> 에 대한 페이지를 살펴보면 페이지 상단에 몇 가지 다른 값을 시도하는 대화식 예제가 있으며, 허용 가능한 모든 값이 페이지 아래에 자세히 나와 있습니다.</p> + +<p>이 페이지를 보면 목록 글머리 기호를 제거할 뿐만 아니라 목록 글머리 기호를 변경할 수 있음을 알 수 있습니다. <code>square</code> 값을 사용하여 정사각형 글머리 기호로 변경하십시오.</p> + +<h2 id="class_추가하기">class 추가하기</h2> + +<p>지금까지 HTML 요소 이름을 기반으로 요소의 스타일을 지정했습니다. 문서에서 해당 유형의 모든 요소가 동일하게 표시되기를 원하는 한 작동합니다. 대부분의 경우에 해당되지 않으므로 다른 요소를 변경하지 않고 요소의 하위 부분을 선택할 수 있는 방법을 찾아야 합니다. 이를 수행하는 가장 일반적인 방법은 HTML 요소에 class 를 추가하고 해당 class 를 대상으로 하는 것입니다.</p> + +<p>HTML 문서에서, 두 번째 목록 항목에 <a href="/en-US/docs/Web/HTML/Global_attributes/class">class 속성</a> 을 추가하십시오. 이제 목록은 다음과 같습니다:</p> + +<pre class="brush: html"><ul> + <li>항목 하나</li> + <li <strong>class="special"</strong>>항목 둘</li> + <li>항목 <em>셋</em></li> +</ul></pre> + +<p>CSS 에서 마침표 문자로 시작하는 선택자를 작성하여 <code>special</code> class 를 대상으로 할 수 있습니다. CSS 파일에 다음을 추가하십시오:</p> + +<pre class="brush: css">.special { + color: orange; + font-weight: bold; +}</pre> + +<p>저장하고 새로 고침하여 결과를 확인하십시오.</p> + +<p>이 목록 항목과 동일한 모양을 원하는 페이지의 모든 요소에 <code>special</code> class 를 적용할 수 있습니다. 예를 들어, 단락의 <code><span></code> 도 주황색과 굵게 표시할 수 있습니다. <code>special</code> <code>class</code> 를 추가한 다음, 페이지를 새로 고침하여 어떻게 되는지 확인하십시오.</p> + +<p>때로는 HTML 요소 선택자 및 class 목록이 포함된 규칙이 표시됩니다:</p> + +<pre class="brush: css">li.special { + color: orange; + font-weight: bold; +}</pre> + +<p>이 구문은 "spacial class 를 가진 모든 <code>li</code> 요소를 대상으로 함" 을 의미합니다. 이 작업을 수행하면, 단순히 class 를 추가하기만 하면 더 이상 class 를 <code><span></code> 또는 다른 요소에 적용할 수 없습니다. 해당 요소를 선택자 목록에 추가해야 합니다:</p> + +<pre class="brush: css">li.special, +span.special { + color: orange; + font-weight: bold; +}</pre> + +<p>당신이 상상할 수 있듯이, 일부 class 는 많은 요소에 적용될 수 있으며 새로운 스타일을 취해야 할 때마다 CSS 를 계속 편집하지 않아도 됩니다. 따라서 하나의 요소에 대해 특별한 규칙을 만들고 싶거나 다른 요소에 적용되지 않도록 하려는 경우가 아니라면 요소를 무시하고 class 를 참조하는 것이 가장 좋습니다.</p> + +<h2 id="문서에서의_위치에_따라_스타일_지정하기">문서에서의 위치에 따라 스타일 지정하기</h2> + +<p>문서에서의 위치에 따라 무언가 다르게 보일 때가 있습니다. 여기에 당신을 도울 수 있는 선택자가 많이 있지만, 지금 몇 가지만 살펴 보겠습니다. 이 문서에는 두 개의 <code><em></code> 요소가 있습니다 — 하나는 단락 안에 있고 다른 하나는 목록 항목 안에 있습니다. <code><li></code> 요소 안에 중첩된 <code><em></code> 만 선택하려면 <strong>descendant combinator</strong> 라는 선택자를 사용 할 수 있습니다. 이 선택자는 단순히 두 개의 다른 선택자 사이에 공백의 형태를 취합니다.</p> + +<p>스타일 시트에 다음 규칙을 추가 하십시오.</p> + +<pre class="brush: css">li em { + color: rebeccapurple; +}</pre> + +<p>이 선택자는 <code><li></code> 의 하위 요소인 <code><em></code> 요소를 선택합니다. 따라서 예제 문서에서 세 번째 목록 항목의 <code><em></code> 은 이제 자주색 이지만, 단락 안의 항목은 변경되지 않았음을 알 수 있습니다.</p> + +<p>HTML 의 동일한 계층 구조 수준에서 제목 바로 다음에 오는 단락의 스타일을 지정해 볼 수 있습니다. 이렇게 하려면 선택자 사이에 <code>+</code> (<strong>adjacent sibling combinator</strong>) 를 배치 하십시오.</p> + +<p>이 규칙을 스타일 시트에도 추가하십시오:</p> + +<pre class="brush: css">h1 + p { + font-size: 200%; +}</pre> + +<p>아래의 라이브 예제에는 위의 두 규칙이 포함됩니다. 단락 내부에 있는 span 을 빨간색으로 만들려면 규칙을 추가하십시오. 첫 번째 단락의 span 이 빨간색 이므로 올바른 span 이 있는지 알 수 있지만, 첫 번째 목록 항목의 span 은 색이 변경되지 않습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started2.html", '100%', 1100)}}</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 보시다시피, CSS 는 요소를 대상으로 하는 여러 가지 방법을 제공합니다. 이 과정의 뒷부분에서 이러한 선택자 및 선택자 관련 기사를 모두 자세히 살펴볼 것입니다.</p> +</div> + +<h2 id="상태에_따른_스타일링">상태에 따른 스타일링</h2> + +<p>이 자습서에서 살펴볼 스타일링의 마지막 유형은 상태에 따라 스타일을 지정할 수 있는 기능입니다. 이에 대한 간단한 예제는 링크 스타일링 입니다. 링크의 스타일을 지정할 때 <code><a href="/en-US/docs/Web/HTML/Element/a"><a></a></code> (앵커) 요소를 대상으로 해야합니다. 방문되지 않았는지, 방문 중인지, 마우스 오버인지, 키보드를 통한 포커스 또는 클릭 (활성화) 여부에 따라 상태가 다릅니다. CSS 를 사용하여 이러한 다양한 상태를 대상으로 할 수 있습니다. 아래 CSS 는 방문하지 않은 링크는 분홍색이고 방문한 링크는 녹색입니다.</p> + +<pre class="brush: css">a:link { + color: pink; +} + +a:visited { + color: green; +}</pre> + +<p>사용자가 링크 위로 이동할 때 링크 모양을 변경할 수 있습니다. 예를 들어, 다음 규칙에서 밑줄을 제거합니다:</p> + +<pre class="brush: css">a:hover { + text-decoration: none; +}</pre> + +<p>아래 라이브 예제에서는 링크의 다양한 상태에 대해 다른 값으로 표시할 수 있습니다. 위의 규칙을 추가했으며, 이제 핑크 색상이 매우 가볍고 읽기 어렵다는 것을 알고 있습니다. 더 나은 색상으로 바꾸지 않겠습니까? 링크를 굵게 표시할 수 있습니까?</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/started3.html", '100%', 900)}} </p> + +<p>우리는 hover 링크에서 밑줄을 제거했습니다. 링크의 모든 상태에서 밑줄을 제거할 수 있습니다. 그러나 실제 사이트에서는 링크임을 방문자에게 알리고자 합니다. 밑줄을 제자리에 두면, 단락 내의 일부 텍스트를 클릭할 수 있다는 사실을 사람들이 인식할 수 있는 중요한 단서가 될 수 있습니다. CSS 의 모든 항목과 마찬가지로 변경 사항으로 인해 문서에 대한 접근성을 떨어뜨릴 수 있는 가능성이 있습니다. 적절한 장소에서 발생할 수 있는 잠재적 위험을 강조하는 것이 목표입니다. </p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 이러한 교육 과정과 MDN 전반에 걸쳐 <a href="/en-US/docs/Learn/Accessibility">접근성</a> 에 대한 언급이 자주 있을 것입니다. 접근성에 대해 이야기할 때 웹 페이지를 모든 사용자가 이해하고 사용할 수 있어야 한다는 요구 사항을 언급하고 있습니다.</p> + +<p>방문자는 마우스나 trackpad 또는 터치스크린이 있는 스마트폰에 있을 수 있습니다. 또는 문서의 내용을 읽어내는 스크린 리더를 사용하거나 훨씬 큰 텍스트를 사용하거나 키보드만 사용하여 사이트를 탐색해야 할 수도 있습니다.</p> + +<p>일반 HTML 문서는 일반적으로 모든 사용자가 접근할 수 있습니다. 해당 문서의 스타일을 지정하기 시작하면 접근성이 저하되지 않도록 하는 것이 중요합니다.</p> +</div> + +<h2 id="선택자와_결합자를_결합">선택자와 결합자를 결합</h2> + +<p>여러 선택자와 결합자를 함께 결합할 수 있습니다. 예를 들면 다음과 같습니다:</p> + +<pre class="brush: css">/* <article> 내부의 <p> 안에 있는 모든 <span> 을 선택합니다 */ +article p span { ... } + +/* <h1> 바로 뒤에 오는 <ul> 바로 뒤의 모든 <p> 를 선택합니다 */ +h1 + ul + p { ... }</pre> + +<p>여러 유형을 함께 결합 할 수도 있습니다. 코드에 다음을 추가 하십시오:</p> + +<pre class="brush: css">body h1 + p .special { + color: yellow; + background-color: black; + padding: 5px; +}</pre> + +<p>이것은 <code><body></code> 안에 있는 <code><h1></code> 바로 뒤에 오는 <code><p></code> 안에 있는 <code>special</code> class 를 가진 요소를 스타일링 합니다. 아이고 복잡해라!</p> + +<p>우리가 제공한 원본 HTML 에서 스타일이 지정된 유일한 요소는 <code><span class="special"></code> 입니다.</p> + +<p>현재 이것이 복잡해 보인다고 걱정하지 마십시오 — CSS 를 더 많이 작성할수록 곧 요령을 터득하기 시작할 것입니다.</p> + +<h2 id="마무리">마무리</h2> + +<p>이 자습서에서는, CSS 를 사용하여 문서의 스타일을 지정할 수 있는 여러 가지 방법을 살펴 보았습니다. 우리는 나머지 수업을 진행 하면서 이 지식을 개발할 것입니다. 그러나 이제 텍스트 스타일을 지정하고 문서의 요소를 대상으로 하는 다양한 방법을 기반으로 CSS 를 적용하고 MDN 설명서에서 속성과 값을 검색할 수 있을 정도로 이미 알고 있습니다.</p> + +<p>다음 수업에서는 CSS 가 어떻게 구성되어 있는지 살펴 볼 것입니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/What_is_CSS", "Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li> +</ol> diff --git a/files/ko/learn/css/first_steps/how_css_is_structured/index.html b/files/ko/learn/css/first_steps/how_css_is_structured/index.html new file mode 100644 index 0000000000..e7a46f1c7c --- /dev/null +++ b/files/ko/learn/css/first_steps/how_css_is_structured/index.html @@ -0,0 +1,504 @@ +--- +title: CSS 의 구조 +slug: Learn/CSS/First_steps/How_CSS_is_structured +translation_of: Learn/CSS/First_steps/How_CSS_is_structured +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</div> + +<p class="summary">CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 여러분은 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 혼란스러워 하는 개념을 발견하면, 이 개념으로 돌아와서 요약할 수 있습니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본적인 컴퓨터 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식, HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 및 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">CSS 작동 방식</a> 이해</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 의 기본 구문 구조를 자세히 배우기.</td> + </tr> + </tbody> +</table> + +<h2 id="HTML_에_CSS_적용하기">HTML 에 CSS 적용하기</h2> + +<p>가장 먼저 살펴볼 것은 CSS 를 문서에 적용하는 세 가지 방법입니다.</p> + +<h3 id="외부_스타일_시트">외부 스타일 시트</h3> + +<p><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 에서 외부 스타일 시트를 페이지에 연결했습니다. CSS 를 여러 페이지에 연결할 수 있으므로, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이며, 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있습니다. 대부분의 경우 사이트의 다른 페이지는 모두 거의 동일하게 보이기 때문에 기본 모양과 느낌에 동일한 규칙을 사용할 수 있습니다.</p> + +<p>외부 스타일 시트는 CSS 확장자가 <code>.css</code> 인 별도의 파일로 작성되고, HTML <code><link></code> 요소에서 참조하는 경우입니다:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>나의 CSS 실험</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + <h1>헬로우 월드!</h1> + <p>이것은 나의 첫 번째 CSS 예제입니다</p> + </body> +</html></pre> + +<p>CSS 파일은 다음과 같습니다:</p> + +<pre class="brush: css">h1 { + color: blue; + background-color: yellow; + border: 1px solid black; +} + +p { + color: red; +}</pre> + +<p>{{htmlelement("link")}} 요소의 <code>href</code> 속성은 여러분의 파일 시스템 파일을 참조해야 합니다.</p> + +<p>위의 예에서, CSS 파일은 HTML 문서와 동일한 폴더에 있지만, 다른 곳에 저장 한다면, 지정된 경로를 다음과 같이 조정할 수 있습니다:</p> + +<pre class="brush: html"><!-- 현재 폴더의 styles 라는 하위 폴더 안에 --> +<link rel="stylesheet" href="styles/style.css"> + +<!-- 현재 폴더의 styles 라는 하위 폴더에 있는 general 이라는 하위 폴더 안에 --> +<link rel="stylesheet" href="styles/general/style.css"> + +<!-- 상위 폴더로 올라간 다음, styles 라는 하위 폴더 내로 이동 --> +<link rel="stylesheet" href="../styles/style.css"></pre> + +<h3 id="내부_스타일_시트">내부 스타일 시트</h3> + +<p>내부 스타일 시트는 외부 CSS 파일이 없는 대신, HTML {{htmlelement("head")}} 안에 포함된 {{htmlelement("style")}} 요소 내부에 CSS 를 배치합니다.</p> + +<p>따라서 HTML 은 다음과 같습니다:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>나의 CSS 실험</title> + <style> + h1 { + color: blue; + background-color: yellow; + border: 1px solid black; + } + + p { + color: red; + } + </style> + </head> + <body> + <h1>헬로우 월드</h1> + <p>이것은 나의 첫 번째 CSS 예제입니다</p> + </body> +</html></pre> + +<p>이는 일부 상황 (CSS 파일을 직접 수정할 수 없는 콘텐츠 관리 시스템을 사용하는 경우도 있지만) 에서 유용할 수 있지만, CSS 가 필요한 외부 스타일 시트 만큼 효율적이지 않습니다 — 웹 사이트에서, CSS 가 모든 페이지에서 반복되고 변경이 필요한 경우 여러 위치에서 업데이트 됩니다.</p> + +<h3 id="인라인_스타일">인라인 스타일</h3> + +<p>인라인 스타일은 <code>style</code> 속성 내에 포함된 한 요소에만 영향을 주는 CSS 선언입니다:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="utf-8"> + <title>나의 CSS 실험</title> + </head> + <body> + <h1 style="color: blue;background-color: yellow;border: 1px solid black;">헬로우 월드!</h1> + <p style="color:red;">이것은 나의 첫 번째 CSS 예제입니다</p> + </body> +</html></pre> + +<p><strong>당신이 정말로 필요하지 않는 한, 이것을 사용하지 마십시오! </strong>유지 관리가 실제로 좋지 않으며 (문서당 동일한 정보를 여러번 업데이트 해야할 수도 있음), 프리젠테이션 CSS 정보와 HTML 구조 정보를 혼합하여 코드를 읽고 이해하기 어렵게 만듭니다. 다른 유형의 코드를 분리하여 유지하면 코드 작업을 하는 모든 사람이 훨씬 쉽게 작업할 수 있습니다.</p> + +<p>인라인 스타일이 더 일반적이거나 권장되는 곳이 몇 군데 있습니다. 작업 환경이 실제로 제한적인 경우 (CMS 로 HTML 본문만 편집할 수 있음), 이를 사용하는 것이 좋습니다. 또한 가능한 많은 전자 메일 클라이언트와 호환되도록 HTML 전자 메일에 많이 사용된 것을 볼 수 있습니다.</p> + +<h2 id="이_기사에서_CSS_로_실습">이 기사에서 CSS 로 실습</h2> + +<p>이 기사에는 많은 CSS 가 있습니다. 이렇게 하려면, 컴퓨터에 새 디렉토리/폴더 를 작성하고 그 안에 다음 두 파일의 복사본을 작성하는 것이 좋습니다:</p> + +<p><strong>index.html:</strong></p> + +<pre class="brush: html"><!DOCTYPE html> +<html lang="ko"> + <head> + <meta charset="utf-8"> + <title>나의 CSS 실험</title> + <link rel="stylesheet" href="styles.css"> + </head> + <body> + + <p>여기에 테스트용 HTML 을 작성하십시오</p> + + </body> +</html></pre> + +<p><strong>styles.css:</strong></p> + +<pre class="brush: css">/* 여기에 테스트용 CSS 를 작성하십시오 */ + +p { + color: red; +}</pre> + +<p>그런 다음, 실험하려는 CSS 를 발견하면, HTML <code><body></code> 콘텐츠를 스타일을 지정할 HTML 로 바꾸고 CSS 를 추가하여 CSS 파일 내에서 스타일을 지정하십시오.</p> + +<p>파일을 쉽게 만들 수 있는 시스템을 사용하지 않는 경우, 아래의 대화식 편집기를 사용하여 실험해 보십시오.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/experiment-sandbox.html", '100%', 800)}} </p> + +<p>읽고, 재미있게 보내십시오!</p> + +<h2 id="선택자_Selectors">선택자 (Selectors)</h2> + +<p>선택자를 만나지 않고 CSS 에 대해 이야기할 수 없으며, <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 자습서에서 이미 여러 가지 유형을 발견했습니다. 선택자는 스타일을 적용하기 위해 HTML 문서에서 무언가를 대상으로 하는 방법입니다. 스타일이 적용되지 않으면 선택자가 일치해야 하는 것과 동일하지 않을 수 있습니다.</p> + +<p>각 CSS 규칙은 선택자 또는 선택자 목록으로 시작하여 규칙을 적용해야 하는 요소 또는 요소 규칙을 브라우저에게 알려줍니다. 다음은 모두 유효한 선택자 또는 선택자 목록의 예입니다.</p> + +<pre class="brush: css">h1 +a:link +.manythings +#onething +* +.box p +.box p:first-child +h1, h2, .intro</pre> + +<p><strong>위의 선택자를 사용하는 CSS 규칙과 스타일을 적용할 일부 HTML 을 만들어 보십시오. 위 구문 중 일부가 무엇을 의미하는지 모르는 경우, MDN 에서 검색해 보십시오!</strong></p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 다음 과목의 <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS 선택자</a> 자습서에서, 선택자에 대해 자세히 학습합니다.</p> +</div> + +<h3 id="우선_순위_Specificity">우선 순위 (Specificity)</h3> + +<p>두 선택자가 동일한 HTML 요소를 선택할 수 있는 경우가 종종 있습니다. 단락을 파란색으로 설정하는 <code>p</code> 선택자 및 선택한 요소를 빨간색으로 설정하는 class 가 있는 아래 스타일 시트를 고려하십시오.</p> + +<pre class="brush: css">.special { + color: red; +} + +p { + color: blue; +}</pre> + +<p>HTML 문서에 <code>special</code> class 가 있는 단락이 있다고 가정해 봅시다. 두 규칙이 모두 적용될 수 있으므로 어느 쪽이 이길까요? 우리의 문단은 어떤 색이 될 것이라고 생각합니까?</p> + +<pre class="brush: html"><p class="special">나는 무슨 색입니까?</p></pre> + +<p>CSS 언어에는 충돌시 어떤 규칙이 이기는지 제어하는 규칙이 있습니다 — 이러한 규칙을 <strong>계단식(cascade)</strong> 및 <strong>우선 순위(specificity)</strong> 라고 합니다. 아래 코드 블록에서 <code>p</code> 선택자에 대해 두 가지 규칙을 정의했지만, 단락이 파란색으로 표시됩니다. 파란색으로 설정한 선언은 스타일 시트에서 나중에 나타나고 이후 스타일은 이전 스타일을 재정의 하기 때문입니다. 이것은 실제의 계단식 (cascade) 입니다.</p> + +<pre class="brush: css">p { + color: red; +} + +p { + color: blue; +}</pre> + +<p>그러나, class 선택자 및 요소 선택자가 있는 이전 블록의 경우, class 가 이기고 단락이 빨간색으로 표시됩니다 — class 는 요소 선택자 보다 더 구체적이거나 더 우선 순위가 높은 것으로 설명되므로 이깁니다.</p> + +<p><strong>위 실험을 직접해 보십시오 — 실험에 HTML 을 추가한 다음, 스타일 시트에 두 개의 <code>p { ... }</code> 규칙을 추가하십시오. 그런 다음 첫 번째 <code>p</code> 선택자를 <code>.special</code> 로 변경하여 스타일이 어떻게 되는지 확인하십시오.</strong></p> + +<p>우선 순위 규칙과 계단식은 처음에는 약간 복잡해 보일 수 있으며 CSS 지식을 더 많이 쌓으면 이해하기 쉽습니다. 다음 과목에서 다룰 <a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">계단식 및 상속</a> 기사에서, 우선 순위를 계산하는 방법을 포함하여 자세히 설명하겠습니다. 현재로서는 이것이 존재하며, 스타일 시트의 다른 요소가 더 높은 우선 순위를 가지기 때문에 CSS 가 예상한 대로 적용되지 않을 수도 있음을 기억하십시오. 하나 이상의 규칙이 요소에 적용될 수 있음을 식별하는 것이 이러한 문제를 해결하는 첫 번째 단계입니다.</p> + +<h2 id="속성_및_값">속성 및 값</h2> + +<p>가장 기본적인 수준에서, CSS 는 두 가지 요소로 구성됩니다:</p> + +<ul> + <li><strong>속성 (Properties)</strong>: 변경할 스타일 기능 (예: <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>) 을 나타내는 식별자입니다.</li> + <li><strong>값 (Values)</strong>: 지정된 각 속성에는 값이 지정되어 있으며, 이는 해당 스타일 기능을 변경하는 방법 (예: 글꼴, 너비 또는 배경색을 변경하려는 항목) 을 나타냅니다.</li> +</ul> + +<p>아래 이미지는 단일 속성과 값을 강조 표시합니다. 속성 이름은 <code>color</code> 이고 값은 <code>blue</code> 입니다.</p> + +<p><img alt="A declaration highlighted in the CSS" src="https://mdn.mozillademos.org/files/16498/declaration.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>값 과 쌍을 이루는 속성을 <em>CSS <strong>선언 (declaration)</strong></em> 이라고 합니다. CSS 선언은 <em>CSS <strong>선언 블록</strong></em> 안에 있습니다. 다음 이미지는 선언 블록이 강조 표시된 CSS 를 보여줍니다.</p> + +<p><img alt="A highlighted declaration block" src="https://mdn.mozillademos.org/files/16499/declaration-block.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>마지막으로, CSS 선언 블록은 <em>선택자 </em>와 쌍을 이루어 <em>CSS Rulesets</em> (또는 <em>CSS <strong>규칙</strong> </em>) 를 생성합니다. 이미지에는 <code>h1</code> 선택자 및 <code>p</code> 선택자의 두 가지 규칙이 있습니다. <code>h1</code> 의 규칙이 강조 표시됩니다.</p> + +<p><img alt="The rule for h1 highlighted" src="https://mdn.mozillademos.org/files/16500/rules.png" style="border: 1px solid #cccccc; display: block; height: 218px; margin: 0 auto; width: 471px;"></p> + +<p>CSS 속성을 특정 값으로 설정하는 것은 CSS 언어의 핵심 기능입니다. CSS 엔진은 페이지의 모든 단일 요소에 적용할 선언을 계산하여 적절하게 배치하고 스타일을 지정합니다. 기억해야 할 것은 CSS 에서 속성과 값이 모두 대소문자를 구분한다는 것입니다. 각 쌍의 속성 과 값은 콜론 (<code>:</code>) 으로 구분됩니다.</p> + +<p><strong>다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성하십시오: </strong></p> + +<ul> + <li><strong>{{cssxref("font-size")}}</strong></li> + <li><strong>{{cssxref("width")}}</strong></li> + <li><strong>{{cssxref("background-color")}}</strong></li> + <li><strong>{{cssxref("color")}}</strong></li> + <li><strong>{{cssxref("border")}}</strong></li> +</ul> + +<div class="warning"> +<p><strong>중요</strong>: 속성을 알 수 없거나 지정된 속성에 대해 값이 유효하지 않은 경우, 선언이 유효하지 않은 것으로 간주되어 브라우저의 CSS 엔진에서 완전히 무시됩니다.</p> +</div> + +<div class="warning"> +<p><strong>중요</strong>: CSS (및 기타 웹 표준) 에서, 언어의 불확실성이 발생하는 경우, 미국 맞춤법이 표준으로 합의 되었습니다. 예를 들어, <code>color</code> 는 <em>항상</em> <code>color</code> 여야 합니다. <code>colour</code> 는 작동하지 않습니다.</p> +</div> + +<h3 id="함수_function">함수 (function)</h3> + +<p>대부분의 값은 비교적 간단한 키워드 또는 숫자 값이지만, 함수의 형태를 취하는 몇 가지 가능한 값이 있습니다. <code>calc()</code> 함수를 예로 들 수 있습니다. 이 함수를 사용하면 CSS 내에서 간단한 계산을 수행할 수 있습니다. 예를 들면 다음과 같습니다:</p> + +<div id="calc_example"> +<pre class="brush: html"><div class="outer"><div class="box">The inner box is 90% - 30px.</div></div></pre> + +<pre class="brush: css">.outer { + border: 5px solid black; +} + +.box { + padding: 10px; + width: calc(90% - 30px); + background-color: rebeccapurple; + color: white; +}</pre> +</div> + +<p>이것은 다음과 같이 렌더링 됩니다:</p> + +<p>{{EmbedLiveSample('calc_example', '100%', 200)}}</p> + +<p>함수는 함수 이름과 해당 함수에 허용된 값이 배치되는 괄호들로 구성됩니다. 위의 <code>calc()</code> 예제의 경우, 이 박스의 너비는 블록 너비의 90% 에서 30 px 을 뺀 값을 요구합니다. 이것은 90%가 무엇인지 알지 못하기 때문에 미리 계산하고 CSS 에 값을 입력할 수 있는 것이 아닙니다. 모든 값과 마찬가지로 MDN 의 관련 페이지에 사용법 예제가 있으므로 기능의 작동 방식을 확인할 수 있습니다.</p> + +<p>또 다른 예는 <code>rotate()</code> 와 같은 {{cssxref("transform")}} 에 대한 다양한 값입니다.</p> + +<div id="transform_example"> +<pre class="brush: html"><div class="box"></div></pre> + +<pre class="brush: css">.box { + margin: 30px; + width: 100px; + height: 100px; + background-color: rebeccapurple; + transform: rotate(0.8turn) +}</pre> +</div> + +<p>위 코드의 결과는 다음과 같습니다:</p> + +<p>{{EmbedLiveSample('transform_example', '100%', 200)}}</p> + +<p><strong>다음 속성의 다른 값을 찾아 다른 HTML 요소에 적용하는 CSS 규칙을 작성 하십시오: </strong></p> + +<ul> + <li><strong>{{cssxref("transform")}}</strong></li> + <li><strong>{{cssxref("background-image")}}, in particular gradient values</strong></li> + <li><strong>{{cssxref("color")}}, in particular rgb/rgba/hsl/hsla values</strong></li> +</ul> + +<h2 id="rules">@rules</h2> + +<p>아직, 우리는 <code><a href="/en-US/docs/Web/CSS/At-rule">@rules</a></code> ("at-rules" 로 발음) 가 발생하지 않았습니다. 이것들은 CSS 에 행동 방법에 대한 지침을 제공하는 특수 규칙입니다. 일부 <code>@rules</code> 는 규칙 이름과 값으로 단순합니다. 예를 들어, 추가 스타일 시트를 기본 CSS 스타일 시트로 가져오려면 <code>@import</code> 를 사용할 수 있습니다:</p> + +<pre class="brush: css">@import 'styles2.css';</pre> + +<p>접하게 될 가장 일반적인 <code>@rules</code> 중 하나는 <code>@media</code> 입니다. 이는 특정 조건이 참일 때만 (예: 화면 해상도가 일정 폭 이상이거나 화면이 일정 폭 보다 넓을 때) CSS 를 적용할 수 있는 <a href="/en-US/docs/Web/CSS/Media_Queries">미디어 쿼리</a> 를 사용할 수 있습니다.</p> + +<p>아래 CSS 에는, <code><body></code> 요소에 분홍색 배경색을 주는 스타일 시트가 있습니다. 그러나, <code>@media</code> 를 사용하여 30em 보다 넓은 viewport 가 있는 브라우저에만 적용되는 스타일 시트 섹션을 만듭니다. 브라우저가 30em 보다 넓은 경우 배경색이 파란색이 됩니다.</p> + +<pre class="brush: css">body { + background-color: pink; +} + +@media (min-width: 30em) { + body { + background-color: blue; + } +}</pre> + +<p>이 자습서를 통해 다른 <code>@rules</code> 를 접하게 될 것입니다.</p> + +<p><strong>viewport 너비에 따라 스타일을 변경하는 미디어 쿼리를 CSS 에 추가할 수 있는지 확인 하십시오. 결과를 보려면 브라우저 창의 너비를 변경하십시오.</strong></p> + +<h2 id="속기_shorthands">속기 (shorthands)</h2> + +<p>{{cssxref("font")}}, {{cssxref("background")}}, {{cssxref("padding")}}, {{cssxref("border")}} 및 {{cssxref("margin")}} 등의 일부 속성은 <strong>속기 속성</strong> 이라고 불립니다 — 이는 여러 줄의 속성 값을 한 줄로 설정하여 시간을 절약하고 작업에서 코드를 깔끔하게 만들 수 있기 때문입니다.</p> + +<p>예를 들어, 다음 행은:</p> + +<pre class="brush: css">/* 패딩 및 마진과 같은 4-값 속기에서는 위, 오른쪽, 아래, 왼쪽 (위에서 부터 시계방향) 순서로 값이 적용됩니다. + 위, 아래에 패딩 / 마진을 설정하고 왼쪽 / 오른쪽에 패딩 / 마진을 설정하는 다른 shorthand 유형 (예: 2-값 shorthands)도 있습니다. */ +padding: 10px 15px 15px 5px;</pre> + +<p>이것들은 모두 이것과 똑같습니까?</p> + +<pre class="brush: css">padding-top: 10px; +padding-right: 15px; +padding-bottom: 15px; +padding-left: 5px;</pre> + +<p>다음 행은:</p> + +<pre class="brush: css">background: red url(bg-graphic.png) 10px 10px repeat-x fixed;</pre> + +<p>이 모든 것들과 같은 작업을 수행합니다:</p> + +<pre class="brush: css">background-color: red; +background-image: url(bg-graphic.png); +background-position: 10px 10px; +background-repeat: repeat-x; +background-attachment: fixed;</pre> + +<p>우리는 지금 이것들을 철저하게 가르치려고 하지 않을 것입니다 — 당신은 이 과정 후반에 많은 예제들을 보게 될 것입니다. 그리고 더 많은 정보를 얻기 위해, <a href="/en-US/docs/Web/CSS/Reference">CSS 참조</a> 에서 속기 속성 이름을 찾아 보는 것이 좋습니다.</p> + +<p><strong>위의 선언을 CSS 에 추가하여 HTML 스타일에 어떤 영향을 미치는지 확인 하십시오. 다른 값으로 실험해 보십시오.</strong></p> + +<div class="blockIndicator warning"> +<p><strong>경고</strong>: 속기는 종종 값을 놓칠 수 있지만, 포함하지 않은 값을 초기 값으로 재설정합니다. 이를 통해 합리적인 값 세트가 사용됩니다. 그러나, 속기에서 전달한 값만 변경하려는 경우에는 혼동 될 수 있습니다.</p> +</div> + +<h2 id="주석_comments">주석 (comments)</h2> + +<p>HTML 과 마찬가지로 CSS 에 주석을 달아 몇 달 후에 코드가 다시 작동 할 때, 코드 작동 방식을 이해하고 코드를 사용하는 다른 사람들이 이해하도록 도와주는 것이 좋습니다.</p> + +<p>CSS 의 주석은 <code>/*</code> 로 시작하고 <code>*/</code> 로 끝납니다. 아래 코드 블록에서 주석을 사용하여 다른 고유 코드 섹션의 시작을 표시했습니다. 코드가 커질수록 코드를 탐색하는 데 유용합니다 — 코드 편집기에서 주석을 검색할 수 있습니다.</p> + +<pre class="brush: css">/* 기본 요소 스타일링 처리 */ +/* -------------------------------------------------------------------------------------------- */ +body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + /* 전역 글꼴 크기의 특수한 경우를 봅시다. +큰 화면이나 창에서 가독성을 높이기 위해, +글꼴 크기를 늘립니다. */ + body { + font-size: 130%; + } +} + +h1 {font-size: 1.5em;} + +/* DOM 에 중첩된 특정 요소 처리 */ +/* -------------------------------------------------------------------------------------------- */ +div p, #id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}</pre> + +<p>주석은 테스트 목적으로 코드의 특정 부분을 일시적으로 <em><strong>주석 처리</strong> </em>하는 경우에도 유용합니다. 예를 들어, 코드의 어느 부분에서 오류가 발생했는지 확인하려는 경우. 다음 예제에서는 <code>.special</code> 선택자에 대한 규칙을 주석 처리 했습니다.</p> + +<pre class="brush: css">/*.special { + color: red; +}*/ + +p { + color: blue; +}</pre> + +<p><strong>CSS 에 주석을 추가하여 사용에 익숙해 지십시오.</strong></p> + +<h2 id="공백_whitespace">공백 (whitespace)</h2> + +<p>공백은 실제 공간, 탭 및 줄 바꿈을 의미합니다. HTML 과 같은 방식으로 브라우저는 CSS 내부의 많은 공백을 무시하는 경향이 있습니다. 가독성을 돕기위해 많은 공백이 있습니다.</p> + +<p>아래 첫 번째 예에서는 각 선언 (및 규칙 시작/종료) 이 각 라인에 있습니다 — 이는 CSS 를 유지 관리하고 이해하기 쉽기 때문에 CSS 를 작성하는 좋은 방법입니다:</p> + +<pre class="brush: css">body { + font: 1em/150% Helvetica, Arial, sans-serif; + padding: 1em; + margin: 0 auto; + max-width: 33em; +} + +@media (min-width: 70em) { + body { + font-size: 130%; + } +} + +h1 { + font-size: 1.5em; +} + +div p, +#id:first-line { + background-color: red; + border-radius: 3px; +} + +div p { + margin: 0; + padding: 1em; +} + +div p + p { + padding-top: 0; +}You could write exactly the same CSS like so, with most of the whitespace removed — this is functionally identical to the first example, but I'm sure you'll agree that it is somewhat harder to read:</pre> + +<pre class="brush: css">body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} +@media (min-width: 70em) { body {font-size: 130%;} } + +h1 {font-size: 1.5em;} + +div p, #id:first-line {background-color: red; border-radius: 3px;} +div p {margin: 0; padding: 1em;} +div p + p {padding-top: 0;} +</pre> + +<p>대부분의 공백을 제거한 상태에서 정확히 동일한 CSS 를 작성할 수 있습니다. 이것은 첫 번째 예제와 기능적으로 동일하지만 읽기가 다소 어렵다는 데 동의합니다.</p> + +<div class="blockIndicator warning"> +<p>CSS 에서 속성 과 값 사이의 공백은 주의해야 합니다.</p> +</div> + +<p>예를 들어, 다음 선언은 유효한 CSS 입니다:</p> + +<pre class="brush: css">margin: 0 auto; +padding-left: 10px;</pre> + +<p>그러나 다음은 유효하지 않습니다:</p> + +<pre class="brush: css">margin: 0auto; +padding- left: 10px;</pre> + +<div class="blockIndicator warning"> +<p><code>0auto</code> 는 <code>margin</code> 속성 (<code>0</code> 과 <code>auto</code> 는 두 개의 개별 값임)에 유효한 값으로 인식되지 않으며, 브라우저는 <code>padding-</code> 을 유효한 속성으로 인식하지 않습니다. 따라서 항상 공백으로 구분된 값을 구분해야 하지만 속성 이름과 속성 값을 하나의 끊김 없는 문자열로 유지해야 합니다.</p> +</div> + +<p><strong>CSS 내부에서 공백을 사용하여 문제를 해결하고 그렇지 않은 것을 확인하십시오.</strong></p> + +<h2 id="다음은_뭐죠">다음은 뭐죠?</h2> + +<p>브라우저가 HTML 과 CSS 를 가져와서 웹 페이지로 전환하는 방법에 대해 약간 이해하는 것이 유용합니다. 따라서 다음 기사 — <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a> — 에서 해당 작업을 살펴 보겠습니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 구조</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li> +</ol> diff --git a/files/ko/learn/css/first_steps/how_css_works/index.html b/files/ko/learn/css/first_steps/how_css_works/index.html new file mode 100644 index 0000000000..00104dfc85 --- /dev/null +++ b/files/ko/learn/css/first_steps/how_css_works/index.html @@ -0,0 +1,156 @@ +--- +title: CSS 작동 방식 +slug: Learn/CSS/First_steps/How_CSS_works +translation_of: Learn/CSS/First_steps/How_CSS_works +--- +<p>{{LearnSidebar}}<br> + {{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<p class="summary">CSS 기본 사항, CSS 의 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>기본적인 컴퓨터 활용능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a>의 기본 지식 및 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습.)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>브라우저에서 CSS 와 HTML 을 구문 분석하는 방법의 기본 사항과 브라우저에서 CSS 를 이해하지 못할 경우 어떻게 되는지 이해하기.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_는_실제로_어떻게_작동합니까">CSS 는 실제로 어떻게 작동합니까?</h2> + +<p>브라우저가 문서를 표시할 때, 문서의 콘텐츠와 해당 스타일 정보를 결합해야 합니다. 아래 나열된 여러 단계로 문서를 처리합니다. 이것은 브라우저가 웹 페이지를 로드할 때 발생하는 작업의 매우 단순화된 버전이며, 다른 브라우저가 다른 방식으로 작업을 처리한다는 점을 명심하십시오. 그러나 이것은 대략 일어나는 일입니다.</p> + +<ol> + <li>브라우저는 HTML (예: 네트워크에서 HTML 을 수신) 을 로드합니다.</li> + <li>{{Glossary("HTML")}} 을 {{Glossary("DOM")}} (<em>Document Object Model</em>) 로 변환합니다. DOM 은 컴퓨터 메모리의 문서를 나타냅니다. DOM 은 다음 섹션에서 좀 더 자세히 설명됩니다.</li> + <li>그런 다음 브라우저는 포함된 이미지 및 비디오와 같은 HTML 문서에 연결된 대부분의 리소스와 연결된 CSS 를 가져옵니다! JavaScript 는 작업에서 나중에 처리되므로 더 간단하게 하기위해 여기에서는 다루지 않습니다.</li> + <li>브라우저는 가져온 CSS 를 구문 분석하고 선택자 유형별로 다른 규칙을 다른 "buckets" 으로 정렬합니다. 예: 요소, class, ID 등 찾은 선택자를 기반으로 DOM 의 어느 노드에 어떤 규칙을 적용해야 하는지 결정하고, 필요에 따라 스타일을 첨부합니다 (이 중간 단계를 render tree 라고 합니다).</li> + <li>render tree 는 규칙이 적용된 후에 표시되어야 하는 구조로 배치됩니다.</li> + <li>페이지의 시각적 표시가 화면에 표시됩니다 (이 단계를 painting 이라고 함).</li> +</ol> + +<p>다음 그림은 작업의 간단한 보기를 제공합니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11781/rendering.svg" style="height: auto; max-width: 635px; width: 100%;"></p> + +<h2 id="DOM_정보">DOM 정보</h2> + +<p>DOM 은 트리와 같은 구조를 가지고 있습니다. 마크 업 언어의 각 요소, 속성 및 텍스트는 트리 구조에서 {{Glossary("Node/DOM","DOM node")}} 가 됩니다. 노드는 다른 DOM 노드와의 관계에 의해 정의됩니다. 일부 요소는 자식 노드의 부모이고 자식 노드에는 형제가 있습니다.</p> + +<p>DOM 은 CSS 와 문서의 내용이 만나는 곳이기 때문에 DOM 을 이해하면 CSS 를 설계, 디버그 및 유지 관리하는 데 도움이 됩니다. 브라우저 DevTools 로 작업을 시작하면, 적용할 규칙을 보기 위해 항목을 선택할 때 DOM 을 탐색하게 됩니다.</p> + +<h2 id="실제_DOM_표현">실제 DOM 표현</h2> + +<p>길고 지루한 설명이 아니라 실제 HTML 이 DOM 으로 변환되는 방법을 보여주는 예제를 살펴 보겠습니다.</p> + +<p>다음 HTML 코드를 사용하십시오:</p> + +<pre class="brush: html"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p> +</pre> + +<p>DOM 에서, <code><p></code> 요소에 해당하는 노드는 부모입니다. 자식은 텍스트 노드이고 <code><span></code> 요소에 해당하는 세 개의 노드입니다. <code>SPAN</code> 노드는 부모이며, 텍스트 노드는 자식입니다:</p> + +<pre>P +├─ "Let's use:" +├─ SPAN +| └─ "Cascading" +├─ SPAN +| └─ "Style" +└─ SPAN + └─ "Sheets" +</pre> + +<p>브라우저가 이전 HTML 을 해석하는 방법입니다 — 위의 DOM 트리를 렌더링 한 다음 브라우저에서 다음과 같이 출력합니다:</p> + +<p>{{EmbedLiveSample('A_real_DOM_representation', '100%', 55)}}</p> + +<div class="hidden"> +<pre class="brush: css">p {margin:0;}</pre> +</div> + +<h2 id="DOM_에_CSS_적용하기">DOM 에 CSS 적용하기</h2> + +<p>CSS 를 문서에 추가하여 스타일을 지정했다고 가정해 봅시다. 다시 한 번, HTML 은 다음과 같습니다:</p> + +<pre class="brush: html"><p> + Let's use: + <span>Cascading</span> + <span>Style</span> + <span>Sheets</span> +</p></pre> + +<p>다음 CSS 를 적용한다고 가정해 봅시다:</p> + +<pre class="brush: css">span { + border: 1px solid black; + background-color: lime; +}</pre> + +<p>브라우저는 HTML 을 구문 분석하고 그로부터 DOM 을 작성한 다음, CSS 를 구문 분석합니다. CSS 에서 사용할 수 있는 유일한 규칙에는 <code>span</code> 선택자가 있으므로, 브라우저는 CSS 를 매우 빠르게 정렬할 수 있습니다! 이 규칙을 세 개의 <code><span></code> 각각에 적용한 다음 최종 시각적 표현을 화면에 표시합니다.</p> + +<p>업데이트 된 출력은 다음과 같습니다:</p> + +<p>{{EmbedLiveSample('Applying_CSS_to_the_DOM', '100%', 55)}}</p> + +<p>다음 과목의 <a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS 디버깅</a> 기사에서 브라우저 DevTools 를 사용하여, CSS 문제를 디버깅하고 브라우저가 CSS 를 해석하는 방법에 대해 자세히 알아 봅니다.</p> + +<h2 id="브라우저에서_인식하지_못하는_CSS_를_발견하면_어떻게_됩니까">브라우저에서 인식하지 못하는 CSS 를 발견하면 어떻게 됩니까?</h2> + +<p><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS#Browser_support">이전 수업</a> 에서 브라우저가 모두 동시에 새로운 CSS 를 구현하는 것은 아니라고 언급했습니다. 또한 많은 사람들이 최신 버전의 브라우저를 사용하지 않습니다. CSS 가 항상 개발되고 있으므로 브라우저가 인식할 수 있는 것보다 앞서 있기 때문에 브라우저가 CSS 선택자 또는 인식하지 못하는 선언을 발견하면 어떻게 될지 궁금할 수 있습니다.</p> + +<p>대답은 아무것도 하지 않으며, CSS 의 다음 단계로 넘어갑니다!</p> + +<p>브라우저가 규칙을 구문 분석하고 이해하지 못하는 속성 이나 값을 발견하면, 이를 무시하고 다음 선언으로 넘어갑니다. 오류가 발생하여 속성 또는 값의 철자가 틀렸거나 속성 또는 값이 너무 새롭고 브라우저가 아직 이를 지원하지 않는 경우, 이 작업을 수행합니다.</p> + +<p>마찬가지로, 브라우저가 이해하지 못하는 선택자를 만나면, 전체 규칙을 무시하고 다음 규칙으로 넘어갑니다.</p> + +<p>아래 예에서 나는 영국 영어 철자를 색상에 사용했는데, 그 속성은 인식되지 않기 때문에 유효하지 않습니다. 그래서 내 단락은 파란색으로 표시되지 않았습니다. 그러나 다른 모든 CSS 가 적용 되었습니다. 유효하지 않은 라인만 무시됩니다.</p> + +<div id="Skipping_example"> +<pre class="brush: html"><p> 나는 이 텍스트를 크고 굵은 파란색으로 표시하고 싶습니다.</p></pre> + +<pre class="brush: css">p { + font-weight: bold; + colour: blue; /* color 속성의 잘못된 철자 */ + font-size: 200%; +}</pre> +</div> + +<p>{{EmbedLiveSample('Skipping_example', '100%', 200)}}</p> + +<p>이 동작은 매우 유용합니다. 이는 새로운 CSS 를 향상된 기능으로 사용할 수 있음을 의미하며, 새 기능을 이해하지 못할 경우 오류가 발생하지 않습니다 — 브라우저는 새로운 기능을 얻거나 얻지 못합니다. cascade 작동 방식 및 브라우저가 스타일이 동일한 마지막 CSS 를 사용한다는 사실과 동일한 특성을 가진 두 규칙이 있을 경우, 새 CSS 를 지원하지 않는 브라우저에 대한 대안을 제공할 수도 있습니다.</p> + +<p>이것은 새롭고 모든 곳에서 지원되지 않는 값을 사용하려는 경우 특히 효과적입니다. 예를 들어, 구형 브라우저는 <code>calc()</code> 를 값으로 지원하지 않습니다. 박스에 대해 대체 너비를 픽셀 단위로 지정한 다음, <code>calc()</code> 값을 <code>100% - 50px</code> 로 너비를 지정하십시오. 오래된 브라우저는 픽셀 버전을 사용하지만, 이해하지 못하는 <code>calc()</code> 에 대한 라인은 무시합니다. 새로운 브라우저는 픽셀을 사용하여 라인을 해석하지만, 나중에 cascade 에서 나타날 때 <code>calc()</code> 를 사용하여 라인을 재정의 합니다.</p> + +<pre class="brush: css">.box { + width: 500px; + width: calc(100% - 50px); +}</pre> + +<p>우리는 이후 수업에서 다양한 브라우저를 지원하는 더 많은 방법을 다룰 것입니다.</p> + +<h2 id="마지막으로">마지막으로</h2> + +<p>이 강의를 거의 끝냈습니다; 할 일이 하나 더 있습니다. 다음 기사에서는 <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용</a> 하여 예제의 스타일을 변경하여 작업의 일부 CSS 를 테스트 합니다.</p> + +<p>{{PreviousMenuNext("Learn/CSS/First_steps/How_CSS_is_structured", "Learn/CSS/First_steps/Using_your_new_knowledge", "Learn/CSS/First_steps")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용</a></li> +</ol> diff --git a/files/ko/learn/css/first_steps/index.html b/files/ko/learn/css/first_steps/index.html new file mode 100644 index 0000000000..e03e748853 --- /dev/null +++ b/files/ko/learn/css/first_steps/index.html @@ -0,0 +1,46 @@ +--- +title: CSS 첫 번째 단계 +slug: Learn/CSS/First_steps +translation_of: Learn/CSS/First_steps +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS (Cascading Style Sheets) 는 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나 여러 열로 분할하거나 애니메이션 및 기타 장식 기능을 추가하는 등의 웹 페이지 스타일 및 레이아웃에 사용됩니다. 이 모듈은 작동 방식, 구문의 모양 및 HTML에 스타일을 추가하기 위해, 이를 사용하는 방법에 대한 기본 사항을 통해 CSS 를 마스터 하는 과정을 부드럽게 시작합니다.</p> + +<h2 id="전제_조건">전제 조건</h2> + +<p>이 모듈을 시작하기 전에, 다음이 있어야 합니다:</p> + +<ol> + <li>컴퓨터를 사용하고 웹을 수동적으로 사용하는 것에 대한 기본적인 친숙성 (예: 콘텐츠를 보는 것) 입니다.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a> 에서 자세히 설명한 대로 설정된 기본 작업 환경과 <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a> 에서 자세히 설명한 대로 파일을 생성하고 관리하는 방법을 이해합니다.</li> + <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 에서 설명한 바와 같이 HTML에 대한 기본적인 친숙성입니다.</li> +</ol> + +<div class="note"> +<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a> 또는 <a href="https://glitch.com/">Glitch</a> 와 같은 온라인 코딩 프로그램에서 코드 예제를 시험해 볼 수 있습니다.</p> +</div> + +<h2 id="안내">안내</h2> + +<p>이 모듈에서는 CSS 의 모든 기본 이론을 익히고, 몇 가지 기술을 테스트 할 수 있는 기회를 제공하는 다음과 같은 기사가 포함되어 있습니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></dt> + <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS 가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></dt> + <dd>이 기사에서는 간단한 HTML 문서를 가져와서 CSS 를 적용하여 언어에 대한 실질적인 내용을 학습합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></dt> + <dd>CSS 가 무엇인지, 그리고 CSS 의 기본 사용법에 대해 알고 있습니다. 이제 언어 자체의 구조를 조금 더 깊이 살펴볼 차례입니다. 우리는 이미 여기에서 논의된 많은 개념들을 만났습니다. 나중에 헷갈리는 개념을 발견하면 다시 이 개념으로 돌아와서 요약 할 수 있습니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></dt> + <dd>CSS 의 기본 사항, 목적 및 간단한 스타일 시트 작성 방법을 배웠습니다. 이 강의에서는 브라우저가 CSS 와 HTML 을 가져와서 웹 페이지로 만드는 방법을 살펴 봅니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></dt> + <dd>지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하고 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 기사는 그렇게 할 수 있는 기회를 제공합니다.</dd> +</dl> + +<h2 id="참고_항목">참고 항목</h2> + +<dl> + <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">중급자 웹 활용 능력 1: CSS 소개</a></dt> + <dd><em>CSS 소개</em> 모듈에서 이야기 한 많은 기술을 탐구하고 테스트하는 훌륭한 모질라 기초 과정입니다. 웹 페이지, CSS 선택자, 속성 및 값의 HTML 요소 스타일 지정에 대해 학습합니다.</dd> +</dl> diff --git a/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html b/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html new file mode 100644 index 0000000000..6a1795419c --- /dev/null +++ b/files/ko/learn/css/first_steps/using_your_new_knowledge/index.html @@ -0,0 +1,96 @@ +--- +title: 새로운 지식을 사용하기 +slug: Learn/CSS/First_steps/Using_your_new_knowledge +translation_of: Learn/CSS/First_steps/Using_your_new_knowledge +--- +<p>{{LearnSidebar}}{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<p class="summary">지난 몇 단원에서 배운 내용을 통해 CSS 를 사용하여 간단한 텍스트 문서의 서식을 지정하여 자신만의 스타일을 추가 할 수 있다는 것을 알게 될 것입니다. 이 평가는 그 기회를 제공합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>이 평가를 시도하기 전에 나머지 CSS 기본 과목을 살펴보고 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습) 을 이해해야 합니다.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS 를 가지고 놀면서 새로운 지식을 테스트하기</td> + </tr> + </tbody> +</table> + +<h2 id="시작점">시작점</h2> + +<p>아래의 라이브 편집기에서 작업하거나 , <a href="https://github.com/mdn/css-examples/blob/master/learn/getting-started/biog-download.html/">시작점을 다운로드</a> 하여 자신의 편집기에서 작업할 수 있습니다. 이 페이지는 HTML 과 문서 head 의 시작점 CSS 가 포함된 단일 페이지 입니다. 원하는 경우 로컬 컴퓨터에서 예제를 만들 때, 이 CSS 를 별도의 파일로 옮길수 있습니다. 또는 <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> 또는 <a href="https://glitch.com/" rel="noopener">Glitch</a> 와 같은 온라인 도구를 사용하여 작업을 수행하십시오.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 문제가 발생하면, 도움을 요청하십시오 — 이 페이지 하단의 <a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge#Assessment_or_further_help">평가 또는 추가 도움말</a> 섹션을 참조하십시오.</p> +</div> + +<h2 id="CSS_를_사용한_작업">CSS 를 사용한 작업</h2> + +<p>다음 라이브 예는 CSS 를 사용하여 스타일이 지정된 전기(biography) 를 보여줍니다. 내가 사용한 CSS 속성은 다음과 같습니다 — 각 속성은 MDN 의 속성 페이지에 연결되어 더 많은 사용 예를 제공합니다.</p> + +<ul> + <li>{{cssxref("font-family")}}</li> + <li>{{cssxref("color")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("font-weight")}}</li> + <li>{{cssxref("font-size")}}</li> + <li>{{cssxref("text-decoration")}}</li> +</ul> + +<p>나는 선택자, h1 및 h2 와 같은 스타일 요소를 혼합하여 사용했지만, 작업 제목 및 스타일을 위한 class 를 만들었습니다.</p> + +<p>CSS 를 사용하여 내가 사용한 속성 값을 변경하여 이 전기(biography) 의 모양을 변경하십시오.</p> + +<ol> + <li>CSS color 키워드인 <code>hotpink</code> 를 사용하여 h1 제목을 분홍색으로 만듭니다.</li> + <li>CSS color 키워드 <code>purple</code> 을 사용하는 10px 점선 {{cssxref("border-bottom")}} 을 제목으로 지정하십시오.</li> + <li>h2 제목을 기울임 꼴로 만듭니다.</li> + <li>연락처 세부 정보에 사용된 <code>ul</code> 에 {{cssxref("background-color")}} 를 <code>#eeeeee</code> 및 5px 의 단색 자주색 {{cssxref("border")}} 으로 만듭니다. {{cssxref("padding")}} 을 사용하여 콘텐츠를 테두리에서 밀어냅니다.</li> + <li>마우스를 가리키면 <code>green</code> 으로 만듭니다.</li> +</ol> + +<p>이 이미지와 비슷한 결과가 나옵니다.</p> + +<p><img alt="Screenshot of how the example should look after completing the assessment." src="https://mdn.mozillademos.org/files/17035/learn-css-basics-assessment.png" style="height: 1199px; width: 1104px;"></p> + +<p>그런 다음 <a href="/en-US/docs/Web/CSS/Reference">MDN CSS 참조</a> 에서 이 페이지에 언급되지 않은 일부 속성을 찾아보고 시도해 보십시오!</p> + +<p>여기에 오답이 없다는 것을 기억하십시오 — 이 단계의 학습에서는 약간의 즐거움을 가질 수 있습니다.</p> + +<p>{{EmbedGHLiveSample("css-examples/learn/getting-started/biog.html", '100%', 1600)}} </p> + +<h2 id="평가_또는_추가_도움">평가 또는 추가 도움</h2> + +<p>작업을 평가하고 싶거나 작업이 정체되어 도움을 요청하려는 경우:</p> + +<ol> + <li>작업을 <a href="https://codepen.io/" rel="noopener">CodePen</a>, <a href="https://jsfiddle.net/" rel="noopener">jsFiddle</a> 또는 <a href="https://glitch.com/" rel="noopener">Glitch</a> 와 같은 온라인 공유 가능 편집기에 입력합니다.</li> + <li><a class="external external-icon" href="https://discourse.mozilla.org/c/mdn/learn" rel="noopener">MDN 토론 포럼 학습 카데고리</a> 에 평가 및 도움을 요청하는 게시물을 작성 하십시오. 게시물에는 다음이 포함되어야 합니다: + <ul> + <li>"CSS 첫 단계에 대한 평가가 필요했습니다" 와 같은 설명적인 제목입니다.</li> + <li>당신이 이미 시도한 내용 및 당신이 우리가 무엇을 하기를 원하는지에 대한 세부 사항 입니다. 예: 당신이 정체되어 있고 도움이 필요하거나 평가를 원하는지에 대한 세부사항들.</li> + <li>온라인 공유 가능 편집기 (위의 1 단계에서 언급한) 에서 평가하거나 도움이 필요한 예에 대한 링크입니다. 이것은 좋은 습관입니다 — 코드가 보이지 않으면 코딩에 문제가 있는 사람을 돕는 것이 매우 어렵습니다.</li> + <li>실제 작업 또는 평가 페이지에 대한 링크로 도움이 필요한 질문을 찾을 수 있습니다.</li> + </ul> + </li> +</ol> + +<h2 id="다음은_뭐죠">다음은 뭐죠?</h2> + +<p>첫 번째 강의를 완료한 것을 축하합니다. 이제 CSS 에 대해 잘 이해하고 스타일 시트에서 발생하는 많은 부분을 이해할 수 있어야 합니다. 다음 강의인 <a href="/en-US/docs/Learn/CSS/Building_blocks">CSS building blocks</a> 에서는 여러 가지 주요 영역을 자세히 살펴보겠습니다.</p> + +<p>{{PreviousMenu("Learn/CSS/First_steps/How_CSS_works", "Learn/CSS/First_steps")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식을 사용하기</a></li> +</ol> diff --git a/files/ko/learn/css/first_steps/what_is_css/index.html b/files/ko/learn/css/first_steps/what_is_css/index.html new file mode 100644 index 0000000000..8467bca311 --- /dev/null +++ b/files/ko/learn/css/first_steps/what_is_css/index.html @@ -0,0 +1,119 @@ +--- +title: CSS 란 무엇인가? +slug: Learn/CSS/First_steps/What_is_CSS +translation_of: Learn/CSS/First_steps/What_is_CSS +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div> + +<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) 를 사용하면 멋진 웹 페이지를 만들 수 있지만, 어떻게 작동합니까? 이 기사에서는 간단한 구문 예제를 통해 CSS가 무엇인지 설명하고 언어에 대한 몇 가지 주요 용어를 다룹니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>컴퓨터 기본 활용 능력, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치</a>, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">파일 작업</a> 에 대한 기본 지식 및 HTML 기본 사항 (<a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 학습)</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>CSS가 무엇인지 배우기.</td> + </tr> + </tbody> +</table> + +<p><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 단원에서는 HTML 이 무엇인지, 그리고 문서를 마크 업하는 데 사용되는 방법에 대해 설명했습니다. 이 문서는 웹 브라우저에서 읽을 수 있습니다. 제목은 일반 텍스트보다 크게 보이며, 단락은 줄바꿈이 되고 공백이 있습니다. 링크는 텍스트의 나머지 부분과 구분하기 위해 색상과 밑줄이 표시됩니다. 현재 보고 있는 것은 브라우저의 기본 스타일입니다. 페이지 작성자가 명시적인 스타일을 지정하지 않은 경우에도 기본적으로 읽을 수 있도록 브라우저가 HTML에 적용하는 매우 기본적인 스타일입니다.</p> + +<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p> + +<p>그러나, 모든 웹 사이트가 그렇게 보인다면 웹은 지루한 곳이 될 것입니다. CSS를 사용하면 브라우저에서 HTML 요소의 모양을 정확하게 제어하고 원하는 디자인을 사용하여 마크 업을 표시할 수 있습니다.</p> + +<h2 id="CSS_란_무엇입니까">CSS 란 무엇입니까?</h2> + +<p>앞에서 언급했듯이, CSS 는 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다 — 스타일, 레이아웃 등.</p> + +<p><strong>문서</strong>는 일반적으로 마크 업 언어를 사용하여 구성된 텍스트 파일입니다 — {{Glossary("HTML")}} 이 가장 일반적인 마크 업 언어이지만, {{Glossary("SVG")}} 또는 {{Glossary("XML")}} 과 같은 다른 마크 업 언어를 사용할 수도 있습니다.</p> + +<p>사용자에게 문서를 <strong>제공 한다는 것</strong>은 대상이 사용 할 수 있는 형식으로 문서를 변환하는 것을 의미합니다. {{Glossary("browser","Browsers")}}, {{Glossary("Mozilla Firefox","Firefox")}}, {{Glossary("Google Chrome","Chrome")}} 또는 {{Glossary("Microsoft Edge","Edge")}} 는 컴퓨터 화면, 프로젝터 또는 프린터 등의 문서를 시각적으로 표시하도록 설계되었습니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: 브라우저는 {{Glossary("User agent","user agent")}} 라고도 하며, 기본적으로 컴퓨터 시스템 내부의 개인을 나타내는 컴퓨터 프로그램을 의미합니다. 브라우저는 CSS 에 대해 이야기 할 때, 우리가 생각하는 주요 유형의 user agent 이지만, 유일한 브라우저는 아닙니다. HTML 및 CSS 문서를 인쇄할 PDF로 변환하는 것과 같은 사용 가능한 다른 사용자 user agent 가 있습니다.</p> +</div> + +<p>CSS 는 매우 기본적인 텍스트 문서 스타일링에 사용될 수 있습니다 — 예를 들어, 제목 및 링크의 <a href="/en-US/docs/Web/CSS/color_value">색상</a> 과 <a href="/en-US/docs/Web/CSS/font-size">크기</a> 변경. 또한, 레이아웃을 만드는 데 사용 할 수 있습니다 — 예를 들어, <a href="/en-US/docs/Web/CSS/Layout_cookbook/Column_layouts">단일 텍스트 열을 변환</a> (기본 콘텐츠 영역과 관련 정보에 대한 사이드 바가 있는 레이아웃으로) 하는 등 레이아웃을 만드는 데 사용 할 수 있습니다. <a href="/en-US/docs/Web/CSS/CSS_Animations">애니메이션</a> 과 같은 효과에도 사용 할 수 있습니다. 구체적인 예는 이 단락의 링크를 살펴 보십시오.</p> + +<h2 id="CSS_구문">CSS 구문</h2> + +<p>CSS 는 규칙 기반 언어입니다 — 웹 페이지의 특정 요소 또는 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의합니다. 예를 들어 "내 페이지의 제목이 빨간색이며 큰 텍스트로 표시 되기를 원합니다."</p> + +<p>다음 코드는 위에서 설명한 스타일을 실행 하는 매우 간단한 CSS 규칙을 보여줍니다:</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +}</pre> + +<p>규칙은 {{Glossary("CSS Selector", "selector")}} 와 함께 열립니다. 스타일을 지정할 HTML 요소를 <em><strong>선택</strong> </em>합니다. 이 경우 level 1 제목 ({{htmlelement("h1")}}) 을 스타일링합니다.</p> + +<p>그런 다음 중괄호 <code>{ }</code> 가 있습니다. 그 안에는 <strong>속성</strong>과 <strong>값</strong> 쌍의 형태를 취하는 하나 이상의 <strong>선언</strong>이 있습니다. 각 쌍은 우리가 선택한 요소의 속성을 지정하고 속성에 부여할 값을 지정합니다.</p> + +<p>콜론 앞에는, 속성이 있고 콜론 뒤에는 값이 있습니다. CSS {{Glossary("property/CSS","properties")}} 는 지정되는 속성에 따라 허용되는 값이 다릅니다. 이 예제에서는 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">색상 값</a> 을 사용 할 수 있는 <code>color</code> 속성이 있습니다. 또한 <code>font-size</code> 속성도 있습니다. 이 속성은 다양한 <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">크기 단위</a> 를 값으로 사용 할 수 있습니다.</p> + +<p>CSS 스타일 시트에는 여러 규칙이 하나씩 포함되어 있습니다.</p> + +<pre class="brush: css">h1 { + color: red; + font-size: 5em; +} + +p { + color: black; +}</pre> + +<p>일부 값은 빨리 배운다는 것을 알게 될 것이고, 반면에 다른 값은 여러분이 찾아야 할 것입니다. MDN 의 개별 속성 페이지는 잊었을 때 또는 값으로 사용 할 수 있는 다른 것을 알고자 할 때 속성과 해당 값을 빠르게 찾을 수 있는 방법을 제공합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고</strong>: MDN <a href="/en-US/docs/Web/CSS/Reference">CSS 참조</a> 에 나열된 모든 CSS 속성 페이지 (다른 CSS 기능과 함께) 에 대한 링크를 찾을 수 있습니다. 또는, CSS 기능에 대한 자세한 정보를 찾아야 할 때 마다, 자주 사용하는 검색 엔진에서 "mdn <em>css-feature-name</em>" 을 검색하는 데 익숙해야 합니다. 예를 들어, "mdn color" 및 "mdn font-size" 를 검색해 보십시오!</p> +</div> + +<h2 id="CSS_Modules">CSS Modules</h2> + +<p>CSS 를 사용하여 스타일을 지정할 수 있는 것이 너무 많으므로, 언어는 <em>module</em> 로 분류됩니다. MDN 을 탐색할 때 이러한 module 에 대한 참조가 표시되면, 많은 설명서 페이지가 특정 modul 을 중심으로 구성되어 있습니다. 예를 들어, <a href="/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders">배경 및 테두리</a> module 에 대한 MDN 참조를 통해 그 용도가 무엇이며, 그 용도에 포함된 다른 속성 및 기타 기능을 확인할 수 있습니다. 또한 기술을 정의하는 <em>CSS Specification</em> 에 대한 링크를 찾을 수 있습니다 (아래 참조).</p> + +<p>이 단계에서는 CSS 가 어떻게 구성되어 있는지에 대해 너무 걱정할 필요가 없지만, 예를 들어 특정 속성이 다른 유사한 것들 중에서 발견될 가능성이 높기 때문에, 동일한 specification 에 있을 수 있다는 것을 알고 있다면 정보를 쉽게 찾을 수 있습니다.</p> + +<p>구체적인 예를 들어, 배경 및 테두리 module 로 돌아가 보겠습니다 — 이 module 에서 <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> 및 <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> 속성을 정의하는 것이 논리적이라고 생각 할 수 있습니다. 당신이 옳을 겁니다.</p> + +<h3 id="CSS_Specifications">CSS Specifications</h3> + +<p>모든 웹 표준 기술 (HTML, CSS, JavaScript 등.) 은 표준 조직 ({{glossary("W3C")}}, {{glossary("WHATWG")}}, {{glossary("ECMA")}} 또는 {{glossary("Khronos")}} 와 같은) 이 게시한 specifications (또는 단순히 "specs") 이라는 거대한 문서로 정의됩니다. 이러한 기술의 작동 방식을 정확하게 정의하십시오.</p> + +<p>CSS 는 다르지 않습니다 — W3C 내에서 <a href="https://www.w3.org/Style/CSS/">CSS Working Group</a> 이라는 곳에서 개발 했습니다. 이 그룹은 브라우저 공급 업체 및 CSS 에 관심이 있는 다른 회사의 대표로 구성됩니다. 독립적인 목소리로 행동하는 <strong><em>초청된 전문가</em></strong> 로 알려진 다른 사람들도 있습니다. 그들은 회원 조직에 연결되어 있지 않습니다.</p> + +<p>새로운 CSS 기능은 CSS Working Group 에 의해 개발되거나 지정됩니다. 때로는 특정 브라우저가 일부 기능에 관심이 있기 때문에 웹 디자이너와 개발자가 기능을 요구하고, 때로는 실무 그룹 자체가 요구 사항을 식별했기 때문입니다. CSS 는 지속적으로 개발 중이며 새로운 기능을 사용할 수 있습니다. 그러나 CSS 의 중요한 점은 모든 사람이 오래된 웹 사이트를 망가뜨릴 수 있는 방식으로 변경하지 않도록 매우 열심히 노력한다는 것입니다. 현재 사용 가능한 제한된 CSS 를 사용하여 2000년에 구축된 웹 사이트는 여전히 브라우저에서 사용 할 수 있습니다!</p> + +<p>CSS 를 처음 첩하는 사람들은, CSS specs 이 압도적이라고 생각할 것입니다 — 웹 개발자가 CSS 를 이해하기 위해 읽는 것이 아니라 엔지니어가 user agents 의 기능에 대한 지원을 구현하는 데 사용하기 위한 것입니다. 많은 숙련된 개발자가 MDN 설명서나 기타 자습서를 참조하는 것이 좋습니다. 그러나 사용중인 CSS, 브라우저 지원 (아래 참조) 및 specs 간의 관계를 이해하고 존재한다는 것을 아는 것이 좋습니다.</p> + +<h2 id="브라우저_지원">브라우저 지원</h2> + +<p>CSS 가 지정되면 하나 이상의 브라우저가 이를 구현한 경우에만 웹 페이지를 개발하는 데 유용합니다. 이것은 CSS 파일의 명령을 화면에 출력할 수 있는 것으로 바꾸도록 코드가 작성되었음을 의미합니다. <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a> 수업에서 이것에 대해 자세히 살펴보겠습니다. 모든 브라우저가 동시에 기능을 구현하는 것은 드문 일이므로 일반적으로 일부 브라우저에서는 CSS 의 일부를 사용할 수 있고, 다른 브라우저에서는 사용할 수 없는 경우가 있습니다. 이러한 이유로, 구현 상태를 확인할 수 있는 것이 유용합니다. MDN 의 각 속성 페이지에서 관심있는 속성의 상태를 볼 수 있으므로 웹 사이트에서 해당 속성을 사용할 수 있는지 알 수 있습니다.</p> + +<p>다음은 CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> 속성에 대한 데이터 차트입니다.</p> + +<p>{{Compat("css.properties.font-family")}}</p> + +<h2 id="다음은_뭐죠">다음은 뭐죠</h2> + +<p>CSS 가 무엇인지 이해했으니, 이제 <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 시작하기</a> 로 넘어가서 CSS 를 직접 작성할 수 있습니다.</p> + +<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p> + +<h2 id="이번_강의에서는">이번 강의에서는</h2> + +<ol> + <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">CSS 란 무엇인가?</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">CSS 로 시작하기</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">CSS 의 구조</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">CSS 작동 방식</a></li> + <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">새로운 지식 사용</a></li> +</ol> diff --git a/files/ko/learn/css/howto/generated_content/index.html b/files/ko/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..216305f889 --- /dev/null +++ b/files/ko/learn/css/howto/generated_content/index.html @@ -0,0 +1,123 @@ +--- +title: 내용물 +slug: Learn/CSS/Howto/Generated_content +translation_of: Learn/CSS/Howto/Generated_content +--- +<p>{{ CSSTutorialTOC() }}</p> +<div class="warning"> + <strong>중요</strong>: 번역은 제가 필요한 부분 및 확인 가능한 부분만 진행 하였으며 변역된 날자는(2013/03/18)이며 문서 변경이 잦아 오늘 이후는 원문과 번역이 다를 수 있습니다. 참고하세요. 미 번역/변경된 부분은 추가로 다른 분이 해 주실 것으로 믿습니다.</div> +<p>{{ previousPage("/en-US/docs/CSS/Getting_Started/Color", "색상") }}<span class="seoSummary"><a href="/en/CSS/Getting_Started" title="en/CSS/Getting Started">CSS 시작하기</a> 안내서 9번째 장; 이번에는 CSS에서</span><span class="seoSummary">Document에 표시될 내용물을 추가 하는 </span><span class="seoSummary">방법을 알아보자. stylesheet를 수정해서 텍스트 내용과 이미지를 수정해 보자.</span></p> +<h2 class="clearLeft" id="정보_내용물">정보: 내용물</h2> +<p>CSS사용상의 가장 큰 장점은 document의 스타일과 내용물을 분리할 수 있도록 도와준다. 하지만 아직은 Document의 일부가 아니라 Stylesheet의 일부로서 존재해야 이치가 맞아 보이는 내용들도 있다.</p> +<p>stylesheet에 놓여진 내용물(content)은 텍스트나 이미지로 구성될 수 있다. Document의 구조와 밀접하게 연결된 내용물(content)은 stylesheet에 명시 할수 있다.</p> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>stylesheet에 내용물(content)을 표시하는 것은 복잡한 문제를 발생 시킬 수도 있다. 예를 들면, 동일한 stylesheet를 사용하는 여러 언어를 지원하는 Document의 경우이다. 만약 stylesheet일 일부분이 번역되어야 하는 경우가 있다면 이 부분은 stylesheet와는 분리된 파일로 저장하고 Document 언어에 맞는 파일이 연결 되도록 할당 해야 한다.</p> + <p>이미지나 심볼 혹은 모든 언어나 문화에 공통으로 사용되는 것을 쓴다면 이러한 문제는 발생하지 않는다.</p> + <p>stylesheet에 작성된 내용물(Content)은 DOM의 일부가 될 수는 없다.</p> +</div> +<h3 id="텍스트_내용물">텍스트 내용물</h3> +<p>CSS는 element 전후로 텍스트 내용물을 넣을 수 있다. 이를 위해서는, 규칙을 만들고 {{ cssxref(":before") }}나 {{ cssxref(":after") }}를 구분자로 넣고 여기에 추가 하라. 선언부에 {{ cssxref("content") }}속성선언과 그 값으로 텍스트를 추가 하라.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 모든 'ref' class element 앞에 <span style="font-weight: bold; color: navy;">'Reference :'</span>텍스트를 추가 한다.</p> + <pre class="brush:css">.ref:before { + font-weight: bold; + color: navy; + content: "Reference: "; +} +</pre> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>stylesheet의 코드셋은 UTF-8이 기본이다. 그러나 링크 내나 stylesheet내 혹은 다른 방법으로 코드셋을 설정 할 수 있다. CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 CSS style sheet representation</a>를 참고 하라.</p> + <p>독특한 캐릭터도 백슬레쉬(\)와 함께 사용하는 escape 표시법으로 사용 할 수 있다. 예를 들어 \256B는 블랙퀸 체스 심볼(♛)이다. 좀더 자세히는 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">문자열 코드표에 없는 문자열 참조</a>나 CSS 사양서의 <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Characters and case</a>를 참고하라.</p> +</div> +<h3 id="이미지_내용물">이미지 내용물</h3> +<p>element 전/후로 이미지를 추가 하려면, {{ cssxref("content") }}속성에 이미지의 URL을 넣어라.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 <code>'glossary</code>' class 다음에 공백과 하나의 아이콘을 추가한다.</p> + <pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");} +</pre> +</div> +<p>element의 배경으로 이미지를 추가 하고자 한다면, {{ cssxref("background") }}속성 값에 이미지의 URL을 할당 하라. 이것이 배경색이나, 이미지를 설정하거나, 이미지를 반복하거나 혹은 다른 사항을 설정하는 단순한 방법이다.</p> +<div class="tuto_example"> + <div class="tuto_type"> + 예제</div> + <p>이 규칙은 특정 element의 배경을 이미지 URL로 지정 하는 것이다.</p> + <p>이 설렉터느 element의 id를 나타낸다. <code>'no-repeat'</code> 값은 이미지가 한번만 나타나는 것을 말한다.</p> + <pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;} +</pre> +</div> +<div class="tuto_details"> + <div class="tuto_type"> + 좀더 자세히</div> + <p>배경설정에 관한 특별한 속성이나 이미지 설정 옵션에 관한 자세한 정보는 {{ cssxref("background") }} 참조 페이지를 보라.</p> +</div> +<h2 id="액션_배경_이미지_추가_하기">액션: 배경 이미지 추가 하기</h2> +<p>이 이미지는 아래쪽에 파란색 줄이 있는 흰사각형이다.:</p> +<table style="border: 2px solid #ccc;"> + <tbody> + <tr> + <td><img alt="Image:Blue-rule.png" class="internal" src="/@api/deki/files/47/=Blue-rule.png"></td> + </tr> + </tbody> +</table> +<ol> + <li>이 이미지를 다운 받아 예제파일들이 있는 폴더에 저장하라. (이미지에서 왼쪽 클릭을 하여 나타나는 메뉴에서 "다른 이름으로 사진저장"을 선택하여 예제가 있는 폴더를 선택하여 저장)</li> + <li>CSS파일을 열어 아래 규칙을 body부분에 추가 하여 전체 배경으로 해당 이미지를 설정하라. + <pre class="brush:css">background: url("Blue-rule.png"); +</pre> + <p>일단 위의 값은 이미지를 반복적으로 보여주는데, 기본 설정이므로 따로 표시 해 줄 필요는 없다. 이미지는 수직/수평적으로 반복되어 아래와 같이 편지지 같은 화면을 제공한다.</p> + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + <div style="font-style: normal; padding-top: 2px; height: 8em;"> + <p><strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</p> + </div> + </div> + </div> + </li> +</ol> +<div class="tuto_example"> + <div class="tuto_type"> + 도전</div> + <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>Stylesheet에 하나의 규칙을 추가 하여 아래와 같이 각라인 맨 앞에 나타나도록 하라.</p> + <div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;"> + <p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="/@api/deki/files/46/=Blue-rule-ground.png"></p> + <div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;"> + <div style="font-style: italic; width: 24em; padding-top: 8px;"> + <img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: green; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + <div style="font-style: normal; padding-top: 12px; height: 8em;"> + <img alt="image:Yellow-pin.png" class="internal" src="/@api/deki/files/490/=Yellow-pin.png"> <strong style="color: red; background-color: #ddf; font: 200% serif;">C</strong>ascading <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>tyle <strong style="color: red; background-color: #ddf; font: 200% serif;">S</strong>heets</div> + </div> + </div> + <div class="tuto_details" id="tutochallenge"> + <div class="tuto_type"> + Possible solution</div> + <p>Add this rule to your stylesheet:</p> + <pre class="brush: css">p:before{ + content: url("yellow-pin.png"); +} +</pre> + <p> </p> + <a class="hideAnswer" href="#challenge">Hide solution</a></div> + <a href="#tutochallenge" title="Display a possible solution for the challenge">정답 확인.</a></div> +<h2 id="다음에는">다음에는?</h2> +<p>{{ nextPage("/en-US/docs/CSS/Getting_Started/Lists", "리스트") }}Stylesheet에 내용물을 추가 하는 일반 방법으로 리스트로 표기하는 방법이 있다. 다음장에는 <a href="/en-US/docs/CSS/Getting_Started/Lists" title="/en-US/docs/CSS/Getting_Started/Lists">specify style for 리스트 elements를 위한 스타일 표기법에 대해 알아보자.</a></p> diff --git a/files/ko/learn/css/howto/index.html b/files/ko/learn/css/howto/index.html new file mode 100644 index 0000000000..cd63db7d1a --- /dev/null +++ b/files/ko/learn/css/howto/index.html @@ -0,0 +1,86 @@ +--- +title: 일반적인 CSS 문제 해결하기 +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">다음 링크들은 일반적인 CSS 문제들에 대한 해결방법을 제공합니다.</p> + +<h2 id="일반적인_사례">일반적인 사례</h2> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Basics">Basics</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/How_CSS_works#How_to_apply_your_CSS_to_your_HTML">How to apply CSS to HTML</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#White_space">How to use whitespace in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Syntax#Comments">How to write comments in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Simple_selectors">How to select elements via element name, class or ID</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Attribute_selectors">How to select elements via attribute name and content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-classes">How to use pseudo-classes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Pseudo-elements">How to use pseudo-elements</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Selectors#Multiple_selectors_on_one_rule">How to apply multiple selectors to the same rule</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">How to specify colors in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Debugging_CSS#Inspecting_the_DOM_and_CSS">How to debug CSS in the browser</a></li> +</ul> + +<h3 id="CSS_and_text">CSS and text</h3> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">How to style text</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">How to customize a list of elements</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Styling_links">How to style links</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Fundamentals#Text_drop_shadows">How to add shadows to text</a></li> +</ul> +</div> + +<div class="column-half"> +<h3 id="Boxes_and_layouts">Boxes and layouts</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Box_properties">How to size CSS boxes</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Overflow">How to control overflowing content</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to control the part of a CSS box that the background is drawn under</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Types_of_CSS_boxes">How do I define inline, block, and inline-block?</a></li> + <li><a href="/en-US/docs/Learn/CSS/Howto/create_fancy_boxes">How to create fancy boxes</a> (also see the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module, generally).</li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Box_model#Background_clip">How to use <code>background-clip</code> to control how much of the box your background image covers</a>.</li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Box_model_recap#Changing_the_box_model_completely">How to change the box model completely using <code>box-sizing</code></a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Backgrounds">How to control backgrounds</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Borders">How to control borders</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Styling_tables">How to style an HTML table</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Box_shadows">How to add shadows to boxes</a></li> +</ul> +</div> +</div> + +<h2 id="Uncommon_and_advanced_techniques">Uncommon and advanced techniques</h2> + +<p>CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.</p> + +<h3 id="General">General</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Specificity">How to calculate specificity of a CSS selector</a></li> + <li><a href="/en-US/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance#Controlling_inheritance">How to control inheritance in CSS</a></li> +</ul> + +<h3 id="Advanced_effects">Advanced effects</h3> + +<ul> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Filters">How to use filters in CSS</a></li> + <li><a href="/en-US/Learn/CSS/Styling_boxes/Advanced_box_effects#Blend_modes">How to use blend modes in CSS</a></li> +</ul> + +<h3 id="Layout">Layout</h3> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Flexible_boxes">Using CSS flexible boxes</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts" title="/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts">Using CSS multi-column layouts</a></li> + <li><a href="/en-US/docs/Web/Guide/CSS/Getting_started/Content">Using CSS generated content</a></li> +</ul> + +<h2 id="See_also">See also</h2> + +<p><a href="/en-US/docs/Learn/CSS/Howto/CSS_FAQ">CSS FAQ</a> — A variety of topics: from debugging to selector usage.</p> diff --git a/files/ko/learn/css/index.html b/files/ko/learn/css/index.html new file mode 100644 index 0000000000..7b7c715da8 --- /dev/null +++ b/files/ko/learn/css/index.html @@ -0,0 +1,60 @@ +--- +title: CSS를 이용한 HTML 스타일링 익히기 +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Landing + - Topic +translation_of: Learn/CSS +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">{{glossary("CSS")}}(Cascading Stylesheets – 종속형 스타일시트)는 {{glossary("HTML")}}을 익힌 후 가장 먼저 배워야할 웹기술입니다. HTML이 콘텐츠의 구조와 의미를 정의하는 반면 CSS는 스타일과 레이아웃을 지정합니다. 예를 들어, CSS를 사용하면 콘텐츠의 글꼴, 색상, 크기 및 간격을 변경하거나, 여러 개의 열로 분할하거나, 애니메이션이나 기타 장식 효과를 추가할 수 있습니다.</p> + +<h2 id="학습_경로">학습 경로</h2> + +<p>CSS에 도전하기 전에 HTML의 기초를 익혀야 합니다. 먼저 <a href="/ko/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a>를 진행하면서 다음을 익히시는게 좋습니다.</p> + +<ul> + <li><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>부터 시작하는 CSS</li> + <li>고급 <a href="/ko/Learn/HTML#구성">HTML 주제</a></li> + <li><a href="/ko/docs/Learn/JavaScript">JavaScript</a> 및 웹페이지에 동적 기능을 추가하는 법</li> +</ul> + +<p>HTML의 기본 원리를 이해하고 나면, HTML과 CSS 사이를 왕복하며 동시에 학습하는걸 추천드립니다. HTML은 CSS를 활용할 때 훨씬 흥미롭고 재미있으며, HTML을 모르고는 CSS를 제대로 배울 수 없기 때문입니다.</p> + +<p>이 주제를 시작하기 전에, 컴퓨터의 사용법과 웹을 둘러보는 일이 익숙해야 합니다. <a href="/ko/docs/Learn/Getting_started_with_the_web/Installing_basic_software">기본 소프트웨어 설치하기</a>에서 설명하는 기본적인 작업 환경을 갖춰야 하고, <a href="/ko/docs/Learn/Getting_started_with_the_web/Dealing_with_files">파일 다루기</a>에서 설명하는 파일 생성 및 관리도 이해해야 합니다. 두 안내서 모두 처음 시작하는 분을 위한 <a href="/ko/docs/Learn/Getting_started_with_the_web">Web과 함께 시작하기</a>의 일부분이죠.</p> + +<p>본 주제를 시작하기 전에 <a href="/ko/docs/Learn/Getting_started_with_the_web">Web과 함께 시작하기</a>를 먼저 해보시는게 좋겠습니다. 그러나 CSS 기초 글에서 다루는걸 여기 <a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a>에서 훨씬 상세하게 다루므로 필수는 아닙니다.</p> + +<h2 id="구성">구성</h2> + +<p>아래는 추천 순서로 정렬한 본 주제의 구성입니다. 첫 항목부터 시작하세요.</p> + +<dl> + <dt><a href="/ko/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a></dt> + <dd>CSS 작동 원리에 대한 기초로, 선택자와 속성, CSS 규칙을 쓰는 법, HTML에 적용하기, 길이나 색상 등 단위를 특정하는 법, 종속과 상속, 박스 모델의 기초, CSS 디버그 등을 다룹니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/Styling_text">텍스트 스타일링</a></dt> + <dd>여기서 글꼴, 굵기 및 기울임꼴, 줄과 문자 간격, 그림자 및 기타 텍스트 기능 설정을 비롯한 텍스트 스타일링 기본 사항을 살펴 봅니다. 페이지에 맞춤 글꼴을 적용하거나 목록 및 링크에 스타일을 적용할 수도 있습니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/Styling_boxes">박스 스타일링</a></dt> + <dd>다음으로 웹페이지 레이아웃을 위한 기본 단계 중 하나인 박스 스타일링을 살펴 봅니다. 먼저 박스 모델을 다시 요약하여 설명한 후, 내부 여백(padding), 테두리(borders) 및 외부 여백(margins)을 설정하거나 사용자 지정 배경색, 이미지 및 기타 기능을 설정하고, 박스에 그림자나 필터와 같은 멋진 기능을 설정하는 등 상자 레이아웃을 제어하는 법을 알아봅니다.</dd> + <dt><a href="/ko/docs/Learn/CSS/CSS_layout">CSS 레이아웃</a></dt> + <dd>이 시점에서 이미 CSS 기초, 텍스트 스타일링 및 콘텐트가 포함된 박스의 스타일링 및 조작을 살펴보았습니다. 이제는 박스를 뷰포트(viewport) 또는 다른 박스와 관련하여 올바른 위치에 배치하는 방법을 살펴볼 시간입니다. 필요한 사전 요구 사항을 포함하여, CSS 레이아웃, 디스플레이(display) 속성의 다양한 설정, 플로트(float) 및 위치 지정(positioning)과 관련된 기존 레이아웃 방식과 더불어 유동적 박스(flexbox) 같은 새롭고 놀라운 레이아웃 도구를 깊게 살펴봅니다.</dd> + <dt>반응형 디자인 (TBD)</dt> + <dd>요즘은 다양한 장치로 웹을 탐색하기 때문에 <a href="/ko/docs/Web/Guide/Responsive_design">반응형 웹 디자인</a>(RWD; Responsive Web Design)은 핵심적인 웹 개발 기술이 되었습니다. 이 모듈에서는 반응형 웹 디자인의 기본 원칙과 도구들을 다루며, 화면 너비, 방향, 해상도와 같은 장치 특성에 따라 다른 CSS를 적용하는 방법을 설명합니다. 그리고 이런 특성에 따라 다양한 비디오와 이미지를 제공할 수 있게 하는 기술을 탐구합니다.</dd> +</dl> + +<h2 id="CSS로_일상적인_문제_해결하기">CSS로 일상적인 문제 해결하기</h2> + +<p><a href="/ko/docs/Learn/CSS/Howto">CSS를 사용하여 일반적인 문제 해결하기</a>는 웹페이지를 만들 때의 매우 흔한 문제들을 CSS를 사용해 해결하는 방법을 살펴보는 섹션들의 링크를 제공합니다.</p> + +<p>시작부터 가장 많이 하게 되는 일은 HTML 요소들(elements)의 색상과 배경색을 지정하고, 크기나 모양 또는 위치를 변경하고, 테두리(borders)를 정의하고 추가하는 일입니다. 하지만 일단 CSS의 기초에 대해 확실하게 이해만 하면 못하는 일이 거의 없게 됩니다. CSS 학습의 장점 중 하나는 잘 모르는 것에 대해서도 일단 기초만 익혀두면 무엇을 할 수 있고 무엇을 할 수 없는지를 꽤 정확하게 느낄 수 있다는 것입니다!</p> + +<h2 id="더_알아보기">더 알아보기</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS">MDN의 CSS</a></dt> + <dd>MDN의 CSS 문서 목록에 대한 주 진입 지점입니다. CSS 언어의 모든 기능에 대한 자세한 참조 문서 목록을 찾을 수 있습니다. 혹시 속성(property)이 가질 수 있는 모든 값(values)에 대한 정보가 필요한가요? 그렇다면 이곳으로 이동하세요.</dd> +</dl> diff --git a/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html b/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html new file mode 100644 index 0000000000..d16df40221 --- /dev/null +++ b/files/ko/learn/css/introduction_to_css/기본적인_css_이해/index.html @@ -0,0 +1,128 @@ +--- +title: 기본적인 CSS 이해 +slug: Learn/CSS/Introduction_to_CSS/기본적인_CSS_이해 +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</div> + +<p class="summary">You've covered a lot in this module, so it must feel good to have reached the end! The final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Prerequisites:</th> + <td>Before attempting this assessment you should have already worked through all the articles in this module.</td> + </tr> + <tr> + <th scope="row">Objective:</th> + <td>To test comprehension of fundamental CSS theory, syntax and mechanics.</td> + </tr> + </tbody> +</table> + +<h2 id="Starting_point">Starting point</h2> + +<p>To get this assessment started, you should:</p> + +<ul> + <li>Go and grab the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/index.html">HTML file for the exercise</a>, and the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">associated image file</a>, and save them in a new directory on your local computer. If you want to use your own image file and fill your own name in, you are welcome to — just make sure the image is square.</li> + <li>Grab the <a href="https://github.com/mdn/learning-area/blob/master/css/introduction-to-css/fundamental-css-comprehension/style-resources.txt">CSS resources text file</a> — this contains a set of raw selectors and rulesets that you'll need to study and combine to answer part of this assessment.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Alternatively, you could use a site like <a class="external external-icon" href="http://jsbin.com/">JSBin</a> or <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> to do your assessment. You could paste the HTML and fill in the CSS into one of these online editors, and use <a href="http://mdn.github.io/learning-area/css/introduction-to-css/fundamental-css-comprehension/chris.jpg">this URL</a> to point the <code><img></code> element to the image file. If the online editor you are using doesn't have a separate CSS panel, feel free to put it in a <code><style></code> element in the head of the document.</p> +</div> + +<h2 id="Project_brief">Project brief</h2> + +<p>You have been provided with some raw HTML and an image, and need to write the necessary CSS to style this into a nifty little online business card, which can perhaps double as a gamer card or social media profile. The following sections describe what you need to do.</p> + +<p>Basic setup:</p> + +<ul> + <li>First of all, create a new file in the same directory as your HTML and image files. Call it something really imaginative like <code>style.css</code>.</li> + <li>Link your CSS to your HTML file via a <code><link></code> element.</li> + <li>The first two rulesets in the CSS resource file are yours, for FREE! After you've finished rejoicing at your good fortune, copy and paste them into the top of your new CSS file. Use them as a test to make sure your CSS is properly applied to your HTML.</li> + <li>Above the two rules, add a CSS comment with some text inside it to indicate that this is a set of general styles for the overall page. "General page styles" would do. Also add three more comments at the bottom of the CSS file to indicate styles specific to the setup of the card container, styles specific to the header and footer, and styles specific to the main business card contents. From now on, subsequent styles added to the stylesheet should be organized in an appropriate place.</li> +</ul> + +<p>Taking care of the selectors and rulesets provided in the CSS resource file:</p> + +<ul> + <li>Next up, we'd like you to look at the four selectors, and calculate the specificity for each one. Write these down somewhere where they can be found later on, such as in a comment at the top of your CSS.</li> + <li>Now it's time to put the right selector on the right rule set! You've got four pairs of selector and ruleset to match in your CSS resources. Do this now, and add them to your CSS file. You need to: + <ul> + <li>Give the main card container a fixed width/height, solid background color, border, and border-radius (rounded corners!), amongst other things.</li> + <li>Give the header a background gradient that goes from darker to lighter, plus rounded corners that fit in with the rounded corners set on the main card container.</li> + <li>Give the footer a background gradient that goes from lighter to darker, plus rounded corners that fit in with the rounded corners set on the main card container.</li> + <li>Float the image to the right so that it sticks to the right hand side of the main business card contents, and give it a max-height of 100% (a clever trick that ensures that it will grow/shrink to stay the same height as its parent container, regardless of what height it becomes.)</li> + </ul> + </li> + <li>Beware! There are two errors in the provided rulesets. Using any technique that you know, track these down and fix them before moving on.</li> +</ul> + +<p>New rulesets you need to write:</p> + +<ul> + <li>Write a ruleset that targets both the card header, and card footer, giving them both a computed total height of 50px (including a content height of 30px and padding of 10px on all sides.) But express it in <code>em</code>s.</li> + <li>The default margin applied to the <code><h2></code> and <code><p></code> elements by the browser will interfere with our design, so write a rule that targets all these elements and sets their margin to 0.</li> + <li>To stop the image from spilling out of the main business card content (the <code><article></code> element), we need to give it a specific height. Set the <code><article></code>'s height to 120px, but expressed in <code>em</code>s. Also give it a background color of semi-transparent black, resulting in a slightly darker shade that lets the background red color shine through a bit too.</li> + <li>Write a ruleset that gives the <code><h2></code> an effective font size of 20px (but expressed in <code>em</code>s) and an appropriate line height to place it in the center of the header's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.</li> + <li>Write a ruleset that gives the <code><p></code> inside the footer an effective font size of 15px (but expressed in <code>em</code>s) and an appropriate line height to place it in the center of the footer's content box. Recall from earlier that the content box height should be 30px — this gives you all the numbers you need to calculate the line height.</li> + <li>As a last little touch, give the paragraph inside the <code><article></code> an appropriate padding value so that its left edge lines up with the <code><h2></code> and footer paragraph, and set its color to be fairly light so it is easy to read.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: Bear in mind that the second ruleset sets <code>font-size: 10px;</code> on the <code><html></code> element — this means that for any descendants of <code><html></code>, an em will be equal to 10px rather than 16px as it is by default. (This is of course, provided the descendants in question don't have any ancestors sitting in between them and <code><html></code> in the hierarchy that have a different <code>font-size</code> set on them. This could affect the values you need, although in this simple example this is not an issue.)</p> +</div> + +<p>Other things to think about:</p> + +<ul> + <li>You'll get bonus marks if you write your CSS for maximum readability, with a separate declaration on each line.</li> + <li>You should include <code>.card</code> at the start of the selector chain in all your rules, so that these rules wouldn't interfere with the styling of any other elements if the business card were to be put on a page with a load of other content.</li> +</ul> + +<h2 id="Hints_and_tips">Hints and tips</h2> + +<ul> + <li>You don't need to edit the HTML in any way, except to apply the CSS to your HTML.</li> + <li>When trying to work out the <code>em</code> value you need to represent a certain pixel length, think about what base font size the root (<code><html></code>) element has, and what it needs to be multiplied by to get the desired value. That'll give you your em value, at least in a simple case like this.</li> +</ul> + +<h2 id="Example">Example</h2> + +<p>The following screenshot shows an example of what the finished design should look like:</p> + +<p><img alt="A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image." src="https://mdn.mozillademos.org/files/12616/business-card.png" style="display: block; margin: 0 auto;"></p> + +<p> </p> + +<h2 id="Assessment">Assessment</h2> + +<p>If you are following this assessment as part of an organized course, you should be able to give your work to your teacher/mentor for marking. If you are self-learning, then you can get the marking guide fairly easily by asking on the <a href="https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682">discussion thread about this exercise</a>, or in the <a href="irc://irc.mozilla.org/mdn">#mdn</a> IRC channel on <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Try the exercise first — there is nothing to be gained by cheating!</p> + +<p>{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}</p> + +<p> </p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/How_CSS_works">How CSS works</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax">CSS syntax</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">Selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Simple_selectors">Simple selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Attribute_selectors">Attribute selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors/Combinators_and_multiple_selectors">Combinators and multiple selectors</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">The box model</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Debugging_CSS">Debugging CSS</a></li> + <li><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></li> +</ul> + +<p> </p> diff --git a/files/ko/learn/css/styling_text/fundamentals/index.html b/files/ko/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..64ee947683 --- /dev/null +++ b/files/ko/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,734 @@ +--- +title: 기본적인 텍스트 및 글꼴 스타일링 +slug: Learn/CSS/Styling_text/Fundamentals +translation_of: Learn/CSS/Styling_text/Fundamentals +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><span class="seoSummary">이 기사에서는 {{glossary("CSS")}} 를 사용하여 텍스트 스타일링을 마스터하기 위한 과정을 시작합니다.</span> 여기에서는 글꼴 굵기, 종류 및 스타일, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여, 텍스트/글꼴 스타일링의 모든 기본 사항에 대해 자세히 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건</th> + <td>Basic computer literacy, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>).</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>웹 페이지에서 텍스트 스타일을 지정하는 데 필요한 기본 속성 및 기술 습득하기.</td> + </tr> + </tbody> +</table> + +<h2 id="CSS_에서_텍스트_스타일링과_관련이_있는_것은_무엇입니까">CSS 에서 텍스트 스타일링과 관련이 있는 것은 무엇입니까?</h2> + +<p>HTML 및 CSS 를 사용한 작업에서 이미 경험한 것처럼 요소 내부의 텍스트는 요소의 내용 박스안에 배치됩니다. 콘텐츠 영역의 왼쪽 상단 (또는 RTL 언어 콘텐츠의 경우, 오른쪽 상단) 에서 시작하여 행의 끝으로 흐릅니다. 끝까지 도달하면 다음 줄로 내려가서 모든 내용이 박스에 들어갈 때까지 다음 줄로 계속 진행합니다. 텍스트 내용은 일련의 인라인 요소처럼 효과적으로 작동하며, 서로 인접한 줄에 배치되면 줄 끝에 도달할 때까지 줄 바꿈을 만들지 않거나, {{htmlelement("br")}} 요소를 사용하여 수동으로 줄 바꿈을 수행하지 않습니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 위의 단락으로 인해 혼동을 느끼게 되더라도 상관없이 — go back and review our <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Box_model">박스 모델</a> 기사를 검토하여, 박스 모델 이론을 정리하십시오.</p> +</div> + +<p>텍스트 스타일을 지정하는 데 사용되는 CSS 속성은 일반적으로 두 가지 카테고리로 분류되며, 이 기사에서는 별도로 살펴보겠습니다.properties used to style text generally fall into two categories, which we'll look at separately in this article:</p> + +<ul> + <li><strong>글꼴 스타일</strong>: 텍스트에 적용되는 글꼴에 영향을 주고, 적용되는 글꼴, 크기, 굵기, 이탤릭체 등에 영향을 주는 속성입니다.</li> + <li><strong>텍스트 레이아웃 스타일</strong>: 텍스트의 간격 및 기타 레이아웃 기능에 영향을 주는 속성으로, 예를 들어 선 과 문자 사이의 간격 및 내용 박스 내에서 텍스트가 정렬되는 방식을 조작할 수 있습니다.</li> +</ul> + +<div class="note"> +<p><strong>참고</strong>: 요소 내부의 텍스트는 모두 하나의 단일 entity 로 영향을 받습니다. 텍스트의 하위 섹션은 적절한 요소 (예: {{htmlelement("span")}} 또는 {{htmlelement("strong")}}) 으로 감싸거나, or use a text-specific pseudo-element like <a href="/en-US/docs/Web/CSS/::first-letter">::first-letter</a> (요소 텍스트의 첫 번째 문자 선택), <a href="/en-US/docs/Web/CSS/::first-line">::first-line</a> (요소 텍스트의 첫 번째 행 선택) 또는 <a href="/en-US/docs/Web/CSS/::selection">::selection</a> (커서로 현재 강조 표시된 텍스트 선택) 과 같은 텍스트 특정 pseudo-element 를 사용하십시오.</p> +</div> + +<h2 id="글꼴">글꼴</h2> + +<p>글꼴 스타일링의 속성을 살펴보도록 하겠습니다. 이 예에서는 동일한 HTML 샘플에 몇 가지 다른 CSS 속성을 적용합니다:</p> + +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p><a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">완성된 예제는 Github</a> 에서 찾을 수 있습니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">소스 코드</a> 참조.)</p> + +<h3 id="색상">색상</h3> + +<p>{{cssxref("color")}} 속성은 선택한 요소의 전경 내용의 색상을 설정합니다 (일반적으로 텍스트이지만, {{cssxref("text-decoration")}} 속성을 사용하여 텍스트에 배치되는 밑줄이나 오버라인과 같은 몇 가지 다른 것도 포함할 수 있습니다.</p> + +<p><code>color</code> 은 모든 <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS 색상 단위</a> 를 사용할 수 있습니다. 예를 들면 다음과 같습니다:</p> + +<pre class="brush: css">p { + color: red; +}</pre> + +<p>이렇게하면 다음과 같이 표준 브라우저 기본값이 검은색이 아닌 빨간색으로 표시됩니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="글꼴_종류">글꼴 종류</h3> + +<p>텍스트에 다른 글꼴을 설정하려면, {{cssxref("font-family")}} 속성을 사용하여 브라우저에서 선택한 요소에 적용할 글꼴 (또는 글꼴 목록) 을 지정할 수 있습니다. 브라우저는 웹 사이트에 액세스하는 컴퓨터에서 글꼴을 사용할 수 있는 경우에만 글꼴을 적용합니다; 그렇지 않으면, 브라우저 {{anch("Default fonts", "default font")}} 만 사용합니다. 간단한 예는 다음과 같습니다:</p> + +<pre class="brush: css">p { + font-family: arial; +}</pre> + +<p>이렇게하면 페이지의 모든 단락이 임의의 컴퓨터에 있는 arial 글꼴을 채택하게 됩니다.</p> + +<h4 id="웹_안전_글꼴">웹 안전 글꼴</h4> + +<p>글꼴 사용가능 여부에 대해 말하자면, 일반적으로 모든 시스템에서 사용할 수 있는 글꼴의 수는 한정되어 있으므로 큰 걱정없이 사용할 수 있습니다. 이른바 <strong>웹 안전 글꼴 </strong>입니다.</p> + +<p>대부분의 경우, 웹 개발자로서 텍스트 내용을 표시하는 데 사용되는 글꼴을 보다 구체적으로 제어하려고 합니다. 문제는 웹 페이지를 보는 데 사용되는 컴퓨터에서 어떤 글꼴을 사용할 수 있는지 알 수 있는 방법을 찾는 것입니다. 모든 경우에 이것을 알 수 있는 방법은 없지만, 웹 안전 글꼴은 가장 많이 사용되는 운영 체제 (윈도우, 맥, 가장 일반적인 리눅스 배포판, 안드로이드 및 iOS) 의 거의 모든 인스턴스에서 사용할 수 있는 것으로 알려져 있습니다.</p> + +<p>실제 웹 안전 글꼴 목록은 운영 체제가 발전함에 따라 변경될 수 있지만, 최소한 다음과 같은 웹 안전 글꼴을 고려하는 것이 좋습니다 (이중 많은 글꼴이 90 년대 후반과 2000 년대 초에 웹 initiative 를 위한 Microsoft <em><a href="https://en.wikipedia.org/wiki/Core_fonts_for_the_Web">Core 글꼴</a></em> 덕분에 많은 사람들이 대중화 되었습니다):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">이름</th> + <th scope="col" style="white-space: nowrap;">일반 유형</th> + <th scope="col">참고</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>It's often considered best practice to also add <em>Helvetica</em> as a preferred alternative to <em>Arial</em> as, although their font faces are almost identical, <em>Helvetica</em> is considered to have a nicer shape, even if <em>Arial</em> is more broadly available.</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Some OSes have an alternative (possibly older) version of the <em>Courier New</em> font called <em>Courier</em>. It's considered best practice to use both with <em>Courier New</em> as the preferred alternative.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Some OSes have an alternative (possibly older) version of the <em>Times New Roman</em> font called <em>Times</em>. It's considered best practice to use both with <em>Times New Roman</em> as the preferred alternative.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>You should be careful with using this font — it isn't widely available on mobile OSes.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Note</strong>: Among various resources, the <a href="http://www.cssfontstack.com/">cssfontstack.com</a> website maintains a list of web safe fonts available on Windows and macOS operating systems, which can help you make your decision about what you consider safe for your usage.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: There is a way to download a custom font along with a webpage, to allow you to customize your font usage in any way you want: <strong>web fonts</strong>. This is a little bit more complex, and we will be discussing this in a separate article later on in the module.</p> +</div> + +<h4 id="기본_글꼴">기본 글꼴</h4> + +<p>CSS 는 글꼴의 일반적인 다섯 가지 이름: <code>serif</code><font face="Open Sans, Arial, sans-serif">, </font><code>sans-serif</code>,<font face="Open Sans, Arial, sans-serif"> </font><code>monospace</code>, <code>cursive</code> 및 <code>fantasy</code> 를 정의합니다. 이러한 일반 이름을 사용할 때 사용되는 정확한 글꼴은 각 브라우저에 달려 있으며, 실행중인 운영체제에 따라 다를 수 있습니다. 브라우저가 최소한 적합한 글꼴을 제공하기 위해 최선을 다하는 최악의 시나리오를 나타나냅니다. <code>serif</code>, <code>sans-serif</code> 및 <code>monospace</code> 는 상당히 예측가능하며 합리적인 무언가를 제공해야 합니다. 반면에 , <code>cursive</code> 및 <code>fantasy</code> 는 예측하기 어렵기 때문에, 테스트할 때 신중하게 사용하는 것이 좋습니다.</p> + +<p>5 개의 이름은 다음과 같이 정의됩니다:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">용어</th> + <th scope="col">정의</th> + <th scope="col">예제</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>serifs 가 있는 글꼴 (the flourishes and other small details you see at the ends of the strokes in some typefaces)</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>serifs 가 없는 글꼴.</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>모든 문자의 너비가 같은 글꼴로, 일반적으로 코드 목록에 사용됩니다.</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Fonts that are intended to emulate handwriting, with flowing, connected strokes.</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>장식용 글꼴.</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="Font_stacks">Font stacks</h4> + +<p>웹 페이지에서 글꼴의 사용가능 여부를 보장할 수 없으므로 (어똔 이유로 웹 글꼴이 실패할 수 있음) 브라우저에서 선택할 수 있는 <strong>글꼴 스택 (font stack) </strong>을 제공할 수 있습니다. 여기에는 여러 글꼴 이름으로 구성된 <code>font-family</code> 값이 포함됩니다. 예제:</p> + +<pre class="brush: css">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>이 경우, 브라우저는 목록 시작 부분에서 시작하여 해당 글꼴이 시스템에서 사용 가능한지 확인합니다. 이 글꼴이 있으면, 해당 글꼴이 선택한 요소에 적용됩니다. 그렇지 않으면, 다음 글꼴로 이동합니다.</p> + +<p>나열된 글꼴 중 사용 가능한 글꼴이 없는 경우, 브라우저가 최소한 대략 비슷한 것을 제공할 수 있도록 스택 끝에 적절한 일반 글꼴 이름을 제공하는 것이 좋습니다.이 점을 강조하기 위해 다른 옵션 — 일반적으로 Time New Roman — 을 사용할 수 없는 경우 단락에 기본 serif 글꼴이 제공됩니다. 이는 san-serif 글꼴에 적합하지 않습니다!</p> + +<div class="note"> +<p><strong>참고</strong>: <code>Trebuchet MS</code> 와 같이 둘 이상의 단어가 있는 글꼴 이름은 따옴표로 묶어야합니다, 예를 들면 <code>"Trebuchet MS"</code>.</p> +</div> + +<h4 id="font-family_예제">font-family 예제</h4> + +<p>단락에 sans-serif 글꼴을 제공하여 이전 예제에 추가하겠습니다:</p> + +<pre class="brush: css">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>결과는 다음과 같습니다:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('A_font-family_example', '100%', 220) }}</p> + +<h3 id="글꼴_크기">글꼴 크기</h3> + +<p>In our previous module's <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units">CSS values and units</a> article, we reviewed <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>. Font size (set with the {{cssxref("font-size")}} property) can take values measured in most of these units (and others, such as <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Percentages">percentages</a>), however the most common units you'll use to size text are:</p> + +<ul> + <li><code>px</code> (pixels): The number of pixels high you want the text to be. This is an absolute unit — it results in the same final computed value for the font on the page in pretty much any situation.</li> + <li><code>em</code>s: 1em is equal to the font size set on the parent element of the current element we are styling (more specifically, the width of a capital letter M contained inside the parent element.) This can become tricky to work out if you have a lot of nested elements with different font sizes set, but it is doable, as you'll see below. Why bother? It is quite natural once you get used to it, and you can use <code>em</code>s to size everything, not just text. You can have an entire website sized using ems, which makes maintenance easy.</li> + <li><code>rem</code>s: These work just like <code>em</code>s, except that 1<code>rem</code> is equal to the font size set on the root element of the document (i.e. {{htmlelement("html")}}), not the parent element. This makes doing the maths to work out your font sizes much easier, but unfortunately <code>rem</code>s are not supported in Internet Explorer 8 and below. If you need to support older browsers with your project, you can either stick to using <code>em</code>s or <code>px</code>, or use a {{glossary("polyfill")}} such as <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>. </li> +</ul> + +<p>The <code>font-size</code> of an element is inherited from that element's parent element. This all starts with the root element of the entire document — {{htmlelement("html")}} — the <code>font-size</code> of which is set to 16px as standard across browsers. Any paragraph (or other element that doesn't have a different size set by the browser) inside the root element will have a final size of 16px. Other elements may have different default sizes, for example an {{htmlelement("h1")}} element has a size of 2ems set by default, so will have a final size of 32px.</p> + +<p>Things become more tricky when you start altering the font size of nested elements. For example, if you had an {{htmlelement("article")}} element in your page, and set its font-size to <code>1.5em</code>s (which would compute to 24px final size), and then wanted the paragraphs inside the <code><article></code> elements to have a computed font size of 20px, what em value would you use?</p> + +<pre class="brush: html"><!-- document base font-size is 16px --> +<article> <!-- If my font-size is 1.5em --> + <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> +</article></pre> + +<p>You would need to set its em value to 20/24, or <code>0.83333333em</code>s. The maths can be complicated, so you need to be careful about how you style things. It is best to use rems where you can, to keep things simple, and avoid setting the font-size of container elements where possible.</p> + +<h4 id="A_simple_sizing_example">A simple sizing example</h4> + +<p>When sizing your text, it is usually a good idea to set the base <code>font-size</code> of the document to 10px, so that then the maths is a lot easier to work out — required (r)em values are then the pixel font size divided by 10, not 16. After doing that, you can easily size the different types of text in your document to what you want. It is a good idea to list all your <code>font-size</code> rulesets in a designated area in your stylesheet, so they are easy to find.</p> + +<p>Our new result is like so:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('A_simple_sizing_example', '100%', 220) }}</p> + +<h3 id="Font_style_font_weight_text_transform_and_text_decoration">Font style, font weight, text transform, and text decoration</h3> + +<p>CSS provides four common properties to alter the visual weight/emphasis of text:</p> + +<ul> + <li>{{cssxref("font-style")}}: Used to turn italic text on and off. Possible values are as follows (you'll rarely use this, unless you want to turn some italic styling off for some reason): + <ul> + <li><code>normal</code>: Sets the text to the normal font (turns existing italics off.)</li> + <li><code>italic</code>: Sets the text to use the <em>italic version of the font</em> if available; if not available, it will simulate italics with oblique instead.</li> + <li><code>oblique</code>: Sets the text to use a simulated version of an italic font, created by <span style="font-style: oblique;">slanting the normal version</span>.</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: Sets how bold the text is. This has many values available in case you have many font variants available (such as <em>-light</em>, <em>-normal</em>, <em>-bold</em>, <em>-extrabold</em>, <em>-black</em>, etc.), but realistically you'll rarely use any of them except for <code>normal</code> and <code>bold</code>: + <ul> + <li><code>normal</code>, <code>bold</code>: Normal and <strong style="font-weight: bold;">bold</strong> font weight</li> + <li><code>lighter</code>, <code>bolder</code>: Sets the current element's boldness to be one step lighter or heavier than its parent element's boldness.</li> + <li><code>100</code>–<code>900</code>: Numeric boldness values that provide finer grained control than the above keywords, if needed. </li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Allows you to set your font to be transformed. Values include: + <ul> + <li><code>none</code>: Prevents any transformation.</li> + <li><code>uppercase</code>: Transforms <span style="text-transform: uppercase;">all text to capitals</span>.</li> + <li><code>lowercase</code>: Transforms all text to lower case.</li> + <li><code>capitalize</code>: Transforms all words to <span style="text-transform: capitalize;">have the first letter capitalized</span>.</li> + <li><code>full-width</code>: Transforms all glyphs to be <span style="text-transform: full-width;">written inside a fixed-width square</span>, similar to a monospace font, allowing aligning of e.g. latin characters along with asian language glyphs (like Chinese, Japanese, Korean.)</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: Sets/unsets text decorations on fonts (you'll mainly use this to unset the default underline on links when styling them.) Available values are: + <ul> + <li><code>none</code>: Unsets any text decorations already present.</li> + <li><code>underline</code>: <u>Underlines the text</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Gives the text an overline</span>.</li> + <li><code>line-through</code>: Puts a <s style="text-decoration: line-through;">strikethrough over the text</s>.</li> + </ul> + You should note that {{cssxref("text-decoration")}} can accept multiple values at once, if you want to add multiple decorations simultaneously, for example <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Also note that {{cssxref("text-decoration")}} is a shorthand property for {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("text-decoration-color")}}. You can use combinations of these property values to create interesting effects, for example <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code>.</span></li> +</ul> + +<p>Let's look at adding a couple of these properties to our example:</p> + +<p>Our new result is like so:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Font_style_font_weight_text_transform_and_text_decoration', '100%', 220) }}</p> + +<h3 id="Text_drop_shadows">Text drop shadows</h3> + +<p>You can apply drop shadows to your text using the {{cssxref("text-shadow")}} property. This takes up to four values, as shown in the example below:</p> + +<pre class="brush: css">text-shadow: 4px 4px 5px red;</pre> + +<p>The four properties are as follows:</p> + +<ol> + <li>The horizontal offset of the shadow from the original text — this can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but you'll most commonly use px. This value has to be included.</li> + <li>The vertical offset of the shadow from the original text; behaves basically just like the horizontal offset, except that it moves the shadow up/down, not left/right. This value has to be included.</li> + <li>The blur radius — a higher value means the shadow is dispersed more widely. If this value is not included, it defaults to 0, which means no blur. This can take most available CSS <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</li> + <li>The base color of the shadow, which can take any <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Colors">CSS color unit</a>. If not included, it defaults to <code>black</code>.</li> +</ol> + +<div class="note"> +<p><strong>Note</strong>: Positive offset values move the shadow right and down, but you can also use negative offset values to move the shadow left and up, for example <code>-1px -1px</code>.</p> +</div> + +<h4 id="Multiple_shadows">Multiple shadows</h4> + +<p>You can apply multiple shadows to the same text by including multiple shadow values separated by commas, for example:</p> + +<pre class="brush: css"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>If we applied this to the {{htmlelement("h1")}} element in our Tommy the cat example, we'd end up with this:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Multiple_shadows', '100%', 220) }}</p> + +<div class="note"> +<p><strong>Note</strong>: You can see more interesting examples of <code>text-shadow</code> usage in the Sitepoint article <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="텍스트_레이아웃">텍스트 레이아웃</h2> + +<p>With basic font properties out the way, let's now have a look at properties we can use to affect text layout.</p> + +<h3 id="텍스트_정렬">텍스트 정렬</h3> + +<p>The {{cssxref("text-align")}} property is used to control how text is aligned within its containing content box. The available values are as follows, and work in pretty much the same way as they do in a regular word processor application:</p> + +<ul> + <li><code>left</code>: Left justifies the text.</li> + <li><code>right</code>: Right justifies the text.</li> + <li><code>center</code>: Centers the text.</li> + <li><code>justify</code>: Makes the text spread out, varying the gaps in between the words so that all lines of text are the same width. You need to use this carefully — it can look terrible, especially when applied to a paragraph with lots of long words in it. If you are going to use this, you should also think about using something else along with it, such as {{cssxref("hyphens")}}, to break some of the longer words across lines.</li> +</ul> + +<p>If we applied <code>text-align: center;</code> to the {{htmlelement("h1")}} in our example, we'd end up with this:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Text_alignment', '100%', 220) }}</p> + +<h3 id="Line_height">Line height</h3> + +<p>The {{cssxref("line-height")}} property sets the height of each line of text — this can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>, but can also take a unitless value, which acts as a multiplier and is generally considered the best option — the {{cssxref("font-size")}} is multiplied to get the <code>line-height</code>. Body text generally looks nicer and is easier to read when the lines are spaced apart; the recommended line height is around 1.5–2 (double spaced.) So to set our lines of text to 1.5 times the height of the font, you'd use this:</p> + +<pre class="brush: css">line-height: 1.5;</pre> + +<p>Applying this to the {{htmlelement("p")}} elements in our example would give us this result:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Line_height', '100%', 250) }}</p> + +<h3 id="Letter_and_word_spacing">Letter and word spacing</h3> + +<p>The {{cssxref("letter-spacing")}} and {{cssxref("word-spacing")}} properties allow you to set the spacing between letters and words in your text. You won't use these very often, but might find a use for them to get a certain look, or to improve the legibility of a particularly dense font. They can take most <a href="/en-US/Learn/CSS/Introduction_to_CSS/Values_and_units#Length_and_size">length and size units</a>.</p> + +<p>So as an example, if we applied the following to the first line of the {{htmlelement("p")}} elements in our example:</p> + +<pre class="brush: css">p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +}</pre> + +<p>We'd get the following:</p> + +<div class="hidden"> +<pre class="brush: html"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Letter_and_word_spacing', '100%', 250) }}</p> + +<h3 id="볼_가치가_있는_다른_속성들">볼 가치가 있는 다른 속성들</h3> + +<p>The above properties give you an idea of how to start styling text on a webpage, but there are many more properties you could use. We just wanted to cover the most important ones here. Once you've become used to using the above, you should also explore the following:</p> + +<p>Font styles:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Switch between small caps and normal font alternatives.</li> + <li>{{cssxref("font-kerning")}}: Switch font kerning options on and off.</li> + <li>{{cssxref("font-feature-settings")}}: Switch various <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a> font features on and off.</li> + <li>{{cssxref("font-variant-alternates")}}: Control the use of alternate glyphs for a given font-face.</li> + <li>{{cssxref("font-variant-caps")}}: Control the use of alternate capital glyphs.</li> + <li>{{cssxref("font-variant-east-asian")}}: Control the usage of alternate glyphs for East Asian scripts, like Japanese and Chinese.</li> + <li>{{cssxref("font-variant-ligatures")}}: Control which ligatures and contextual forms are used in text.</li> + <li>{{cssxref("font-variant-numeric")}}: Control the usage of alternate glyphs for numbers, fractions, and ordinal markers.</li> + <li>{{cssxref("font-variant-position")}}: Control the usage of alternate glyphs of smaller sizes positioned as superscript or subscript.</li> + <li>{{cssxref("font-size-adjust")}}: Adjust the visual size of the font independently of its actual font size.</li> + <li>{{cssxref("font-stretch")}}: Switch between possible alternative stretched versions of a given font.</li> + <li>{{cssxref("text-underline-position")}}: Specify the position of underlines set using the <code>text-decoration-line</code> property <code>underline</code> value.</li> + <li>{{cssxref("text-rendering")}}: Try to perform some text rendering optimization.</li> +</ul> + +<p>Text layout styles</p> + +<ul> + <li>{{cssxref("text-indent")}}: Specify how much horizontal space should be left before the beginning of the first line of the text content.</li> + <li>{{cssxref("text-overflow")}}: Define how overflowed content that is not displayed is signaled to users.</li> + <li>{{cssxref("white-space")}}: Define how whitespace and associated line breaks inside the element are handled.</li> + <li>{{cssxref("word-break")}}: Specify whether to break lines within words.</li> + <li>{{cssxref("direction")}}: Define the text direction (This depends on the language and usually it's better to let HTML handle that part as it is tied to the text content.)</li> + <li>{{cssxref("hyphens")}}: Switch on and off hyphenation for supported languages.</li> + <li>{{cssxref("line-break")}}: Relax or strengthen line breaking for Asian languages.</li> + <li>{{cssxref("text-align-last")}}: Define how the last line of a block or a line, right before a forced line break, is aligned.</li> + <li>{{cssxref("text-orientation")}}: Define the orientation of the text in a line.</li> + <li>{{cssxref("word-wrap")}}: Specify whether or not the browser may break lines within words in order to prevent overflow.</li> + <li>{{cssxref("writing-mode")}}: Define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow.</li> +</ul> + +<h2 id="글꼴_약식_shorthand">글꼴 약식 (shorthand)</h2> + +<p>Many font properties can also be set through the shorthand property {{cssxref("font")}}. These are written in the following order: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, and {{cssxref("font-family")}}.</p> + +<p>Among all those properties, only <code>font-size</code> and <code>font-family</code> are required when using the <code>font</code> shorthand property.</p> + +<p>A forward slash has to be put in between the {{cssxref("font-size")}} and {{cssxref("line-height")}} properties.</p> + +<p>A full example would look like this:</p> + +<pre class="brush: css">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Active_learning_Playing_with_styling_text">Active learning: Playing with styling text</h2> + +<p>In this active learning session, we don't have any specific exercises for you to do: we'd just like you to have a good play with some font/text layout properties, and see what you can produce! You can either do this using offline HTML/CSS files, or enter your code into the live editable example below.</p> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="Summary">Summary</h2> + +<p>We hoped you enjoyed playing with text in this article! The next article will give you all you need to know about styling HTML lists.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> diff --git a/files/ko/learn/css/styling_text/index.html b/files/ko/learn/css/styling_text/index.html new file mode 100644 index 0000000000..1a5f780b9a --- /dev/null +++ b/files/ko/learn/css/styling_text/index.html @@ -0,0 +1,48 @@ +--- +title: 텍스트 스타일링 +slug: Learn/CSS/Styling_text +tags: + - CSS + - 그림자 + - 리스트 + - 모듈 + - 웹 폰트 + - 초보자 + - 폰트 +translation_of: Learn/CSS/Styling_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">CSS 기초가 어느 정도 완성되었다면, 여러분이 집중해야 할 다음 CSS 주제는 CSS로 가장 흔하게 할 것 중 하나인 텍스트를 꾸며주는 것입니다. 우리는 글꼴 과 볼드체, 이탤릭체, 줄 띄어쓰기, 단어 띄어쓰기, 그림자 넣기 등과 같은 텍스트 기능을 설정하는 것을 포함한 텍스트 스타일링의 기초를 배웁니다. 여러분의 페이지에 사용자 정의 글꼴을 설정하고 리스트와 링크를 꾸며줌으로써 이 강의를 끝마칩니다. </p> + +<h2 id="전제_조건">전제 조건</h2> + +<p>이 강의를 시작하기 전에, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML 소개</a> 에서 설명한대로 이미 HTML 에 대해 잘 알고 있어야하며, <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS 소개</a> 에서 설명한대로 CSS 기본 사항에 익숙해야합니다.</p> + +<div class="note"> +<p><strong>참고</strong>: 자신의 파일을 만들 수 없는 컴퓨터/태블릿/기타 장치에서 작업하는 경우, <a href="http://jsbin.com/">JSBin</a>,<a href="https://codepen.io/"> CodePen</a> 또는 <a href="https://thimble.mozilla.org/">Thimble</a> 와 같은 온라인 코딩 프로그램에서 대부분의 코드 예제를 시험해 볼 수 있습니다.</p> +</div> + +<h2 id="안내">안내</h2> + +<p>이 강의에는 다음 기사가 포함되어 있으며, HTML 텍스트 콘텐츠를 스타일링하는 데 필요한 모든 기본 사항을 알려줍니다.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">기본적인 텍스트 및 글꼴 스타일</a></dt> + <dd>이 기사에서는 글꼴 굵기, 종류 및 스타일 설정, 글꼴 약식 (shorthand), 텍스트 정렬 및 기타 효과, 줄 및 문자 간격 설정을 포함하여 텍스트/글꼴 스타일의 모든 기본 사항을 자세히 설명합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">목록 스타일링</a></dt> + <dd>목록은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">링크 스타일링</a></dt> + <dd>링크를 스타일링 할 때, pseudo-classes 를 사용하여 링크 상태를 효과적으로 스타일링하는 방법과 네비게이션 메뉴 및 탭과 같은 일반적인 다양한 인터페이스 기능을 사용하기 위해 링크를 스타일링하는 방법을 이해하는 것이 중요합니다. 이 기사에서는 이러한 모든 주제를 살펴볼 것입니다.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">웹 글꼴</a></dt> + <dd>여기에서는 웹 글꼴을 자세하게 살펴볼 것입니다 — 웹 글꼴과 함께 사용자 정의 글꼴을 다운로드하여, 보다 다양한 사용자 정의 텍스트 스타일을 지정할 수 있습니다.</dd> +</dl> + +<h2 id="평가">평가</h2> + +<p>다음 평가는 위의 안내에서 다루는 텍스트 스타일링 기술에 대한 이해를 테스트합니다.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">커뮤니티 스쿨 홈페이지 typesetting</a></dt> + <dd>이 평가에서는 커뮤니티 스툴 홈페이지의 텍스트 스타일을 지정함으로써 스타일 텍스트에 대한 이해를 테스트합니다.</dd> +</dl> diff --git a/files/ko/learn/css/styling_text/styling_lists/index.html b/files/ko/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..843636c554 --- /dev/null +++ b/files/ko/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,389 @@ +--- +title: 목록 스타일링 +slug: Learn/CSS/Styling_text/Styling_lists +translation_of: Learn/CSS/Styling_text/Styling_lists +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary"><a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">목록</a> 은 대부분 다른 텍스트처럼 작동하지만, 알아야 할 목록과 관련된 몇 가지 CSS 속성과 고려해야 할 모범 사례가 있습니다. 이 기사는 모든 것을 설명합니다.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">전제조건:</th> + <td>Basic computer literacy, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), CSS basics (study <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">CSS text and font fundamentals</a>.</td> + </tr> + <tr> + <th scope="row">목적:</th> + <td>목록 스타일과 관련된 모범 사례 및 속성에 익숙해지기.</td> + </tr> + </tbody> +</table> + +<h2 id="간단한_목록_예제">간단한 목록 예제</h2> + +<p>우선, 간단한 목록 예제를 봅시다. 이 기사 전체에서 우리는 순서가 없는, 순서가 있는, 설명 목록을 살펴볼 것입니다 — 모두 유사한 스타일링 기능이 있으며, 일부 유형은 목록 유형과 다릅니다. 스타일이 지정되지 않은 예제는 <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">Github 에서 가능</a> 합니다 (<a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">소스 코드</a> 도 확인하십시오.)</p> + +<p>목록 예제의 HTML 은 다음과 같습니다:</p> + +<pre class="brush: html"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Hummus</li> + <li>Pita</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Hummus</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pita</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>If you go to the live example now and investigate the list elements using <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">browser developer tools</a>, you'll notice a couple of styling defaults:</p> + +<ul> + <li>The {{htmlelement("ul")}} and {{htmlelement("ol")}} elements have a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>) and a {{cssxref("padding-left")}} of <code>40px</code> (<code>2.5em</code>.)</li> + <li>The list items ({{htmlelement("li")}} elements) have no set defaults for spacing.</li> + <li>The {{htmlelement("dl")}} element has a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>), but no padding set.</li> + <li>The {{htmlelement("dd")}} elements have {{cssxref("margin-left")}} of <code>40px</code> (<code>2.5em</code>.)</li> + <li>The {{htmlelement("p")}} elements we've included for reference have a top and bottom {{cssxref("margin")}} of <code>16px</code> (<code>1em</code>), the same as the different list types.</li> +</ul> + +<h2 id="Handling_list_spacing">Handling list spacing</h2> + +<p>When styling lists, you need to adjust their styles so they keep the same vertical spacing as their surrounding elements (such as paragraphs and images; sometimes called vertical rhythm), and the same horizontal spacing as each other (you can see the <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">finished styled example</a> on Github, and <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">find the source code</a> too.)</p> + +<p>The CSS used for the text styling and spacing is as follows:</p> + +<pre class="brush: css">/* General styles */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +}</pre> + +<ul> + <li>The first rule sets a sitewide font and a baseline font size of 10px. These are inherited by everything on the page.</li> + <li>Rules 2 and 3 set relative font sizes for the headings, different list types (the children of the list elements inherit these), and paragraphs. This means that each paragraph and list will have the same font size and top and bottom spacing, helping to keep the vertical rhythm consistent.</li> + <li>Rule 4 sets the same {{cssxref("line-height")}} on the paragraphs and list items — so the paragraphs and each individual list item will have the same spacing between lines. This will also help to keep the vertical rhythm consistent.</li> + <li>Rules 5 and 6 apply to the description list — we set the same <code>line-height</code> on the description list terms and descriptions as we did with the paragraphs and list items. Again, consistency is good! We also make the description terms have bold font, so they visually stand out easier.<span id="cke_bm_126E" style="display: none;"> </span></li> +</ul> + +<h2 id="List-specific_styles">List-specific styles</h2> + +<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p> + +<ul> + <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li> + <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li> + <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li> +</ul> + +<h3 id="Bullet_styles">Bullet styles</h3> + +<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; +}</pre> + +<p>This gives us the following look:</p> + +<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p> + +<h3 id="Bullet_position">Bullet position</h3> + +<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p> + +<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p> + +<pre class="brush: css">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3> + +<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p> + +<pre class="brush: css">ul { + list-style-image: url(star.svg); +}</pre> + +<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p> + +<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p> + +<pre class="brush: css">ul { + padding-left: 2rem; + list-style-type: none; +} + +ul li { + padding-left: 2rem; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>Here we've done the following:</p> + +<ul> + <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li> + <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li> + <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows: + <ul> + <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li> + <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li> + <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li> + <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li> + </ul> + </li> +</ul> + +<p>This gives us the following result:</p> + +<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/16226/list_formatting.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="list-style_shorthand">list-style shorthand</h3> + +<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p> + +<pre class="brush: css">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Could be replaced by this:</p> + +<pre class="brush: css">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p> + +<h2 id="Controlling_list_counting">Controlling list counting</h2> + +<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p> + +<h3 id="start">start</h3> + +<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p> + +<pre class="brush: html"><ol start="4"> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p> + +<pre class="brush: html"><ol start="4" reversed> + <li>Toast pita, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Note</strong>: If there are more list items in a reversed list than the value of the <code>start</code> attribute, the count will continue to zero and then into negative values. </p> +</div> + +<h3 id="value">value</h3> + +<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p> + +<pre class="brush: html"><ol> + <li value="2">Toast pita, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pita with salad, hummus, and fried halloumi.</li> +</ol></pre> + +<p>Gives you this output:</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p> +</div> + +<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2> + +<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p> + +<ol> + <li>Give the unordered list square bullets.</li> + <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li> + <li>Give the ordered list lower alphabetical bullets.</li> + <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li> +</ol> + +<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</pre> + +<pre class="brush: js">var htmlInput = document.querySelector(".html-input"); +var cssInput = document.querySelector(".css-input"); +var reset = document.getElementById("reset"); +var htmlCode = htmlInput.value; +var cssCode = cssInput.value; +var output = document.querySelector(".output"); +var solution = document.getElementById("solution"); + +var styleElem = document.createElement('style'); +var headElem = document.querySelector('head'); +headElem.appendChild(styleElem); + +function drawOutput() { + output.innerHTML = htmlInput.value; + styleElem.textContent = cssInput.value; +} + +reset.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = cssCode; + drawOutput(); +}); + +solution.addEventListener("click", function() { + htmlInput.value = htmlCode; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + drawOutput(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p> + +<h2 id="See_also">See also</h2> + +<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Summary">Summary</h2> + +<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> + + + +<h2 id="In_this_module">In this module</h2> + +<ul> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li> + <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li> + <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li> +</ul> |