diff options
Diffstat (limited to 'files/ko/web/css/css_backgrounds_and_borders')
3 files changed, 309 insertions, 0 deletions
diff --git a/files/ko/web/css/css_backgrounds_and_borders/index.html b/files/ko/web/css/css_backgrounds_and_borders/index.html new file mode 100644 index 0000000000..4fc6295885 --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/index.html @@ -0,0 +1,113 @@ +--- +title: CSS 배경 및 테두리 +slug: Web/CSS/CSS_Backgrounds_and_Borders +tags: + - CSS + - CSS Backgrounds and Borders + - Guide + - Overview + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>CSS Backgrounds and Borders</strong> 모듈의 스타일은 배경에 색과 이미지를 채우거나, 기타 다른 방식으로 수정할 수 있습니다. 또한 테두리를 선이나 이미지로 장식할 수 있고, 직각 뿐 아니라 원형 테두리로 만들 수도 있습니다.</span> (추가로, 요소 박스를 그림자로 꾸밀 수도 있습니다.)</p> + +<h2 id="참고서">참고서</h2> + +<h3 id="속성">속성</h3> + +<div class="index"> +<ul> + <li>{{cssxref("background")}}</li> + <li>{{cssxref("background-attachment")}}</li> + <li>{{cssxref("background-clip")}}</li> + <li>{{cssxref("background-color")}}</li> + <li>{{cssxref("background-image")}}</li> + <li>{{cssxref("background-origin")}}</li> + <li>{{cssxref("background-position")}}</li> + <li>{{cssxref("background-position-x")}}</li> + <li>{{cssxref("background-position-y")}}</li> + <li>{{cssxref("background-repeat")}}</li> + <li>{{cssxref("background-size")}}</li> + <li>{{cssxref("border")}}</li> + <li>{{cssxref("border-bottom")}}</li> + <li>{{cssxref("border-bottom-color")}}</li> + <li>{{cssxref("border-bottom-left-radius")}}</li> + <li>{{cssxref("border-bottom-right-radius")}}</li> + <li>{{cssxref("border-bottom-style")}}</li> + <li>{{cssxref("border-bottom-width")}}</li> + <li>{{cssxref("border-collapse")}}</li> + <li>{{cssxref("border-color")}}</li> + <li>{{cssxref("border-image")}}</li> + <li>{{cssxref("border-image-outset")}}</li> + <li>{{cssxref("border-image-repeat")}}</li> + <li>{{cssxref("border-image-slice")}}</li> + <li>{{cssxref("border-image-source")}}</li> + <li>{{cssxref("border-image-width")}}</li> + <li>{{cssxref("border-left")}}</li> + <li>{{cssxref("border-left-color")}}</li> + <li>{{cssxref("border-left-style")}}</li> + <li>{{cssxref("border-left-width")}}</li> + <li>{{cssxref("border-radius")}}</li> + <li>{{cssxref("border-right")}}</li> + <li>{{cssxref("border-right-color")}}</li> + <li>{{cssxref("border-right-style")}}</li> + <li>{{cssxref("border-right-width")}}</li> + <li>{{cssxref("border-style")}}</li> + <li>{{cssxref("border-top")}}</li> + <li>{{cssxref("border-top-color")}}</li> + <li>{{cssxref("border-top-left-radius")}}</li> + <li>{{cssxref("border-top-right-radius")}}</li> + <li>{{cssxref("border-top-style")}}</li> + <li>{{cssxref("border-top-width")}}</li> + <li>{{cssxref("border-width")}}</li> + <li>{{cssxref("box-shadow")}}</li> +</ul> +</div> + +<h2 id="도구">도구</h2> + +<dl> + <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">다수의 배경 사용하기</a></dt> + <dd>하나의 요소에 여러 배경을 적용하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images">배경 이미지 크기 조정하기</a></dt> + <dd>배경 이미지의 크기와 반복 여부를 설정하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/HTML/Applying_color">CSS로 HTML 요소에 색 입히기</a></dt> + <dd>HTML 요소에 테두리를 비롯한 색상을 CSS로 적용하는 법을 배웁니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator">Border-image 생성기</a></dt> + <dd>테두리 이미지를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator">Border-radius 생성기</a></dt> + <dd>둥근 모서리를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> + <dt><a href="/ko/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator">Box-shadow 생성기</a></dt> + <dd>요소 뒤의 그림자를 실시간으로 확인하며 만들 수 있는 도구입니다.</dd> +</dl> + +<h2 id="명세">명세</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{ SpecName('CSS3 Backgrounds') }}</td> + <td>{{ Spec2('CSS3 Backgrounds') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS2.1', 'box.html')}}</td> + <td>{{Spec2('CSS2.1')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('CSS1', '#border')}}</td> + <td>{{Spec2('CSS1')}}</td> + <td></td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html new file mode 100644 index 0000000000..f3f0d6529b --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/scaling_background_images/index.html @@ -0,0 +1,137 @@ +--- +title: 배경 이미지 크기 조정하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Scaling_background_images +tags: + - CSS + - CSS Background + - Example + - Guide + - Intermediate + - Reference + - Web +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images +--- +<div>{{cssref}}</div> + +<p><span class="seoSummary">CSS 배경 이미지의 기본 설정값에서는 원본 이미지가 크기 변화 없이 바둑판식으로 배열됩니다. {{cssxref("background-size")}} 속성에 가로와 세로 크기를 지정해 크기를 바꿀 수 있습니다.</span> 이미지는 원하는대로 확대할 수도, 줄일 수도 있습니다.</p> + +<h2 id="큰_이미지_바둑판식_배열">큰 이미지 바둑판식 배열</h2> + +<p>2982x2808의 커다란 Firefox 이미지를 가지고 있다고 해보겠습니다. 모종의 이유(끔찍하게 잘못된 사이트 디자인 등)로 300x300 픽셀 요소에 저 이미지 4개를 바둑판식으로 보여야 합니다. <code>background-size</code>와 고정값 150 픽셀로 목표를 달성할 수 있습니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="tiledBackground"> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css; highlight:[3]">.tiledBackground { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: 150px; + width: 300px; + height: 300px; + border: 2px solid; + color: pink; +} +</pre> + +<h3 id="Result">Result</h3> + +<p>{{EmbedLiveSample("큰_이미지_바둑판식_배열", 340, 340)}}</p> + +<h2 id="Stretching_an_image" name="Stretching_an_image">이미지 늘리기</h2> + +<p>가로와 세로 크기를 각각 지정할 수도 있습니다.</p> + +<pre class="brush:css">background-size: 300px 150px; +</pre> + +<p>결과는 다음과 같습니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8967/ss2.png"></p> + +<h2 id="Scaling_an_image_up" name="Scaling_an_image_up">작은 이미지 키우기</h2> + +<p>반대로 배경 이미지를 키울 수도 있습니다. 다음 코드는 32x32 픽셀 파비콘을 300x300 픽셀로 늘린 결과입니다.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8969/ss3.png"></p> + +<pre class="brush: css; highlight:[5]">.square2 { + background-image: url(favicon.png); + background-size: 300px; + width: 300px; + height: 300px; + border: 2px solid; + text-shadow: white 0px 0px 2px; + font-size: 16px; +} +</pre> + +<p>보시다시피 CSS는 이미지 파일 이름을 제외하면 동일합니다.</p> + +<h2 id="Special_values.3A_.22contain.22_and_.22cover.22" name="Special_values.3A_.22contain.22_and_.22cover.22">특별한 값: "contain" 과 "cover"</h2> + +<p>길이를 나타내는 {{cssxref("<length>")}} 값 대신, {{ cssxref("background-size") }} CSS 속성에 <code>contain</code> 과 <code>cover</code> 두개의 특별한 값을 지정할 수 있습니다. 살펴봅시다.</p> + +<h3 id="contain" name="contain"><code>contain</code></h3> + +<p><code>contain</code> 값을 지정하면, 배경 이미지의 가로, 세로 모두 요소보다 작다는 조건하에 가능한 크게 조정됩니다. 이미지의 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 작거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><div class="bgSizeContain"> + <p>Try resizing this element!</p> +</div></pre> + +<h4 id="CSS_2">CSS</h4> + +<pre class="brush: css">.bgSizeContain { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: contain; + width: 160px; + height: 160px; + border: 2px solid; + color: pink; + resize: both; + overflow: scroll; +}</pre> + +<h4 id="결과">결과</h4> + +<p>{{ EmbedLiveSample('contain', 250, 250) }}</p> + +<h3 id="cover" name="cover"><code>cover</code></h3> + +<p>값을 <code>cover</code> 로 지정하면 배경이미지의 가로, 세로 길이 모두 요소보다 크다는 조건하에 가능한 배경 이미지를 작게 조정합니다. 가로, 세로 비율은 유지됩니다. 따라서 배경 이미지의 크기는 요소의 크기보다 항상 크거나 같습니다. 아래 예제의 크기를 조절해서 실제로 어떻게 동작하는지 확인해보세요.</p> + +<h4 id="HTML_3">HTML</h4> + +<pre class="brush: html"><div class="bgSizeCover"> + <p>Try resizing this element!</p> +</div></pre> + +<h4 id="CSS_3">CSS</h4> + +<pre class="brush: css">.bgSizeCover { + background-image: url(https://mdn.mozillademos.org/files/8971/firefox_logo.png); + background-size: cover; + width: 160px; + height: 160px; + border: 2px solid; + color: pink; + resize: both; + overflow: scroll; +}</pre> + +<h4 id="결과_2">결과</h4> + +<p>{{ EmbedLiveSample('cover', 250, 250) }}</p> + +<h2 id="See_also" name="See_also">같이 보기</h2> + +<ul> + <li>{{ cssxref("background-size") }}</li> + <li>{{ cssxref("background") }}</li> + <li><a href="/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds">Scaling of SVG backgrounds</a></li> +</ul> diff --git a/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html new file mode 100644 index 0000000000..1e0e3deeca --- /dev/null +++ b/files/ko/web/css/css_backgrounds_and_borders/using_multiple_backgrounds/index.html @@ -0,0 +1,59 @@ +--- +title: 한 번에 여러 배경 사용하기 +slug: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +tags: + - CSS + - CSS Background + - Example + - Guide + - Reference +translation_of: Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds +--- +<div>{{CSSRef}}</div> + +<p><span class="seoSummary"><strong>여러 개의 배경</strong>을 한 번에 적용할 수도 있습니다. 첫 번째 배경이 맨 위에, 마지막 배경이 맨 밑에 위치하는 레이어 구조를 사용하게 됩니다.</span> 마지막 배경에만 배경색을 적용할 수 있습니다.</p> + +<p>여러 배경을 적용하는 건 쉽습니다.</p> + +<pre class="brush: css">.myclass { + background: background1, background 2, ..., backgroundN; +} +</pre> + +<p>{{ cssxref("background") }} <a href="/ko/docs/Web/CSS/Shorthand_properties">단축 속성</a>뿐 아니라 {{cssxref("background-color")}}를 제외한 단일 속성에서도 사용할 수 있습니다. 즉, {{ cssxref("background") }}, {{ cssxref("background-attachment") }}, {{ cssxref("background-clip") }}, {{ cssxref("background-image") }}, {{ cssxref("background-origin") }}, {{ cssxref("background-position") }}, {{ cssxref("background-repeat") }}, {{ cssxref("background-size") }}에는 목록을 값으로 지정할 수 있습니다.</p> + +<h2 id="예제">예제</h2> + +<p>다음 예제는 Firefox 로고, 거품, <a href="/ko/docs/Web/CSS/linear-gradient">선형 그레이디언트</a> 총 세 개의 배경을 사용합니다.</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div class="multi-bg-example"></div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css">.multi-bg-example { + width: 100%; + height: 400px; + background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), + url(https://mdn.mozillademos.org/files/11307/bubbles.png), + linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); + background-repeat: no-repeat, + no-repeat, + no-repeat; + background-position: bottom right, + left, + right; +}</pre> + +<h3 id="결과">결과</h3> + +<p>{{EmbedLiveSample('예제','600','400')}}</p> + +<p>결과에서 볼 수 있듯, {{cssxref("background-image")}}에서 첫 번째로 지정한 Firefox 로고가 맨 위, 그 다음이 거품 그림이고 선형 그레이디언트는 모든 '이미지' 밑에 위치합니다. 하위 속성({{ cssxref("background-repeat") }}, {{ cssxref("background-position") }})의 각 값도 순서에 맞는 배경에 적용됩니다. 따라서 <code>background-repeat</code>의 첫 번째 값은 처음(맨 위) 배경에 적용되고, 두 번째와 두 번째 배경, 세 번째와 세 번째 배경...도 같습니다.</p> + +<h2 id="같이_보기">같이 보기</h2> + +<ul> + <li><a href="/ko/docs/CSS/Using_CSS_gradients" title="en/Using gradients">CSS 그레이디언트 사용하기</a></li> +</ul> |