diff options
Diffstat (limited to 'files/ko/web/css/will-change/index.html')
| -rw-r--r-- | files/ko/web/css/will-change/index.html | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/files/ko/web/css/will-change/index.html b/files/ko/web/css/will-change/index.html new file mode 100644 index 0000000000..c641f89ad1 --- /dev/null +++ b/files/ko/web/css/will-change/index.html @@ -0,0 +1,171 @@ +--- +title: will-change +slug: Web/CSS/will-change +translation_of: Web/CSS/will-change +--- +<div>{{CSSRef}}</div> + +<h2 id="요약">요약</h2> + +<p><span class="seoSummary"><strong><code>will-change</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> 속성은 요소에 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공케 한다. 그래서 실제 요소가 변화되기 전에 미리 브라우저는 적절하게 최적화할 수 있다. 이러한 종류의 최적화는 잠재적으로 성능 비용이 큰 작업을 그것이 실제로 요구되기 전에 미리 실행함으로써 페이지의 반응성을 증가시킬 수 있다.</span></p> + +<p>이 속성을 적당하게 사용하는 것이 꽤 어려울 수 있다:</p> + +<ul> + <li> + <p id="Don't_apply_will-change_to_too_many_elements"><em>너무 많은 요소에 will-change 를 적용하지 말라.</em> 브라우저는 모든 것을 최적화하기 위해 가능한 모든 것을 이미 시도하고 있다. will-change 와 묶인 강한 최적화의 몇은 많은 기기 자원을 소모할 것이다. 또한 이 같은 과도한 사용은 페이지 속도를 늦추거나 엄청난 자원을 소비할 수 있다.</p> + </li> + <li> + <p><em>아껴 사용하라.</em> 브라우저가 만드는 최적화의 기본 행동은 가능한 바로 최적화를 제거하고 기본 상태로 돌리는 것이다. 그러나 will-change를 스타일시트에 직접 추가하는 것은 목표 요소가 곧 변경되어 (will-change 를 정의하지 않았을 때보다) 더 오랜 시간동안 최적화를 유지하리란 것을 암시한다. 스크립트 코드를 사용하여 변화발생의 전후로 will-change 의 활성/비활성을 바꿔주는 것이 좋다.</p> + </li> + <li> + <p><em>서둘러 최적화하기 위해 will-change 를 적용하지 말라. </em>만약 페이지가 잘 돌아간다면 단지 조금 더 빨리하기 위해 will-change 속성을 추가하지 말라. <code>will-change</code> 는 당장의 성능 문제를 해결하기 위한 마지막 수단으로 사용되기 위해 계획된 것이다. 성능문제를 예상하며 사용되어선 안된다. will-change 의 초과사용은 브라우저가 가능한 변화에 대한 준비를 시도하기 때문에 과도한 메모리 사용과 더 복잡한 렌더링을 초래할 것이다. 더 열악한 성능을 이끌 것이다.</p> + </li> + <li> + <p id="Give_it_sufficient_time_to_work"><em>작업할 충분한 시간을 줘라.</em> 이 속성은 작성자로 하여금 사용자 에이전트가 변경가능한 속성을 미리 알 수 있게 하도록고안되었다. 그러면 브라우저는 실제 속성변화가 발생하기 전에 속성에 요구되는 어떠한 최적화던지 미리 적용하는 것을 선택할 수 있다. 그래서 브라우저가 실제 최적화를 할 시간을 주는 것은 중요하다. 변화가 발생하기 조금 전에라도 그 변화를 예상할 방법을 찾아 <code>will-change</code> 를 설정하라.</p> + </li> +</ul> + +<p>{{cssinfo}}</p> + +<h2 id="구문">구문</h2> + +<pre class="brush:css">/* 키워드 값 */ +will-change: auto; +will-change: scroll-position; +will-change: contents; +will-change: transform; /* Example of <custom-ident> */ +will-change: opacity; /* Example of <custom-ident> */ +will-change: left, top; /* Example of two <animateable-feature> */ + +/* 전역 값 */ +will-change: inherit; +will-change: initial; +will-change: unset; +</pre> + +<h3 id="값">값</h3> + +<dl> + <dt><code>auto</code></dt> + <dd>이 키워드는 특정 의도 없음을 나타낸다; 사용자 에이전트는 보통 실행하는 어떤 발견한 방법이던 최적화이던 적용해야 한다.</dd> +</dl> + +<p><code><animateable-feature></code> 는 다음의 값중 하나일 수 있다:</p> + +<dl> + <dt><code>scroll-position</code></dt> + <dd>머지않아 요소 스크롤 위치의 변경 혹은 변이에 대한 기대를 가르킨다.</dd> + <dt><code>contents</code></dt> + <dd>머지않아 요소 내용에 대한 변경 혹은 변이에 대한 기대를 가르킨다.</dd> + <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> + <dd>머지않아 해당 요소의 주어진 이름의 속성에 대한 변경 혹은 변이에 대한 기대를 가르킨다. 만약 주어진 속성이 축약형이라면 그 안에 들어간 나열된 속성 모두에 대한 기대이다. 다음의 값들은 불가능하다: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, <code>contents</code>. 명세는 특정값의 행동을 정의하지 않으나 but it is common for <code>transform</code> to be a compositing layer hint. <a href="https://github.com/operasoftware/devopera/pull/330">Chrome currently takes two actions</a>, given particular CSS property idents: establish a new compositing layer or a new {{Glossary("stacking context")}}.</dd> +</dl> + +<h3 id="Formal_syntax">Formal syntax</h3> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<h2 id="예시">예시</h2> + +<pre class="brush: css">.sidebar { + will-change: transform; +} +</pre> + +<p>상단 예시는 will-change 속성을 스타일시트에 직접 추가한다: 이것은 브라우저가 항상 메모리내에서 필요보다 더 오래동안 최적화를 유지하도록 하는데 바로 이렇게 스타일시트에 직접 삽입하는 것을 피해야 할 이유로서 살펴봤던 것이다. 아래는 스크립트를 통해 will-change 를 적용하는 법의 다른 예시를 보여주고 십중팔구 대부분의 경우에 이렇게 시행해야 한다.</p> + +<pre class="brush: js">var el = document.getElementById('element'); + +// 요소가 hover 상태일 때 will-change 설정 +el.addEventListener('mouseenter', hintBrowser); +el.addEventListener('animationEnd', removeHint); + +function hintBrowser() { + // 애니메이션 키프레임 단락 내에서 + // 변경될 예정인 최적화 가능한 속성들 + this.style.willChange = 'transform, opacity'; +} + +function removeHint() { + this.style.willChange = 'auto'; +}</pre> + +<p>그러나 페이지가 크고 복잡한 앨범 혹은 슬라이드 다발로 이뤄진 프레젠테이션등 키를 눌러서 페이지를 넘기는 어플리케이션등을 위해선 스타일시트에 will-change 를 직접 포함시키는 것이 적절할 것이다. 이것은 브라우저가 미리 변이를 준비하게 해 키가 눌리자마자 페이지간의 팔팔한 애니메이션을 가능케 할 것이다.</p> + +<pre class="brush: css">.slide { + will-change: transform; +}</pre> + +<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('CSS Will Change', '#will-change', 'will-change')}}</td> + <td>{{Spec2('CSS Will Change')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(36)}}</td> + <td>{{CompatGeckoDesktop(36)}} [1]</td> + <td><a href="https://dev.modern.ie/platform/status/csswillchange/?filter=f3e0000bf&search=will-change">{{CompatNo}}</a></td> + <td>{{CompatOpera(24)}}</td> + <td>{{CompatSafari(9.1)}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Phone</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>37</td> + <td>{{CompatGeckoMobile(36)}} [1]</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>9.3</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] From Firefox 31 to 35, <code>will-change</code> was available, but only if the user flipped the <code>layout.css.will-change.enabled</code> flag to <code>true</code>. The preference have been removed in Firefox 43.</p> + +<p>Firefox allows to set <code>will-change: will-change</code> up to version 42.0, which is invalid by the spec. This was fixed in Firefox 43.0. See {{bug("1195884")}}.</p> |