diff options
Diffstat (limited to 'files/ko/learn/css/building_blocks')
13 files changed, 3153 insertions, 0 deletions
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> |