[문서] 문서 1.8 ~ 1.11 병합충돌 해결

2-ui/1-document/08-styles-and-classes/article.md

@@ -1,6 +1,6 @@
 # 스타일과 클래스
 
-자바스크립트를 사용해 어떻게 스타일과 클래스를 다룰 수 있는지 알아보기 전에, 중요한 규칙을 하나 집고 넘어가야 할 것 같습니다. 핵심만 요약했기 때문에 충분할진 모르겠지만 꼭 언급하고 넘어가야 하기 때문입니다.
+자바스크립트를 사용해 어떻게 스타일과 클래스를 다룰 수 있는지 알아보기 전에, 중요한 규칙을 하나 짚고 넘어가야 할 것 같습니다. 핵심만 요약했기 때문에 충분할진 모르겠지만 꼭 언급하고 넘어가야 하기 때문입니다.
 
 요소에 스타일을 적용할 수 있는 방법은 두 가지가 있습니다.
 
@@ -86,7 +86,7 @@ elem.style.top = top; // 예시: '456px'
 
 프로퍼티 `elem.style`은 속성 `"style"`에 쓰인 값에 대응되는 객체입니다. `elem.style.width="100px"`은 `style` 속성값을 문자열 `width:100px`로 설정한 것과 같죠.
 
-여러 단어를 이어서 만든 프로퍼티는 다음와 같이 카멜 표기법을 사용해 이름 짓습니다.
+여러 단어를 이어서 만든 프로퍼티는 다음과 같이 카멜 표기법을 사용해 이름 짓습니다.
 
 ```js no-beautify
 background-color  => elem.style.backgroundColor
@@ -128,21 +128,16 @@ setTimeout(() => document.body.style.display = "", 1000); // 1초 후 다시 원
 
 이렇게 `style.display`에 빈 문자열을 할당하면 브라우저는 마치 처음부터 `style.display` 프로퍼티가 없었던 것처럼 CSS 클래스와 브라우저 내장 스타일을 페이지에 적용합니다.
 
-<<<<<<< HEAD
-````smart header="`style.cssText`로 완전히 다시 쓰기"
-개별 스타일 프로퍼티를 적용할 때는 보통 `style.*`를 사용합니다. 그런데 `div.style` 은 객체이고 읽기 전용이기 때문에 `div.style="color: red; width: 100px"`같은 방식으론 전체 스타일을 설정할 수 없습니다.  
-=======
-Also there is a special method for that, `elem.style.removeProperty('style property')`. So, We can remove a property like this:
+이를 위한 특별한 메서드인 `elem.style.removeProperty('style property')`도 있습니다. 아래와 같이 프로퍼티를 제거할 수 있습니다.
 
 ```js run
-document.body.style.background = 'red'; //set background to red
+document.body.style.background = 'red'; // 배경을 빨간색으로 설정
 
-setTimeout(() => document.body.style.removeProperty('background'), 1000); // remove background after 1 second
+setTimeout(() => document.body.style.removeProperty('background'), 1000); // 1초 후 배경 제거
 ```
 
-````smart header="Full rewrite with `style.cssText`"
-Normally, we use `style.*` to assign individual style properties. We can't set the full style like `div.style="color: red; width: 100px"`, because `div.style` is an object, and it's read-only.
->>>>>>> upstream/master
+````smart header="`style.cssText`로 완전히 다시 쓰기"
+개별 스타일 프로퍼티를 적용할 때는 보통 `style.*`를 사용합니다. 그런데 `div.style` 은 객체이고 읽기 전용이기 때문에 `div.style="color: red; width: 100px"`같은 방식으론 전체 스타일을 설정할 수 없습니다.
 
 문자열을 사용해 전체 스타일을 설정하려면 프로퍼티 `style.cssText`를 사용해야 합니다.
 
@@ -273,7 +268,6 @@ pseudo
 ````warn header="`getComputedStyle`엔 프로퍼티 전체 이름이 필요합니다."
 `getComputedStyle`을 사용할 때는 `paddingLeft`, `marginTop`, `borderTopWidth`같이 프로퍼티 이름 전체를 정확히 알고 있어야 합니다. 그렇지 않으면 원하는 값을 얻을 수 없는 경우가 생깁니다.
 
-<<<<<<< HEAD
 `paddingLeft`나 `paddingTop`엔 값이 지정되어있는데 `getComputedStyle(elem).padding`을 사용해 값을 얻으려 하는 경우를 생각해 봅시다. 어떤 값을 얻을 수 있을까요? 아무것도 얻지 못할까요 아니면 값이 설정되어 있는 `paddingLeft`나 `paddingTop`에서 값을 가져올까요? 이런 상황에 적용할만한 표준은 아직 제정되어있지 않습니다.
 
 따라서 브라우저마다 동작 방식이 다릅니다. Chrome 같은 몇몇 브라우저는 아래 예시와 같이 `10px`을 출력해주는데 Firefox에서 빈 문자열이 출력됩니다. 
@@ -289,9 +283,6 @@ pseudo
   alert(style.margin); // Firefox에선 빈 문자열이 출력됩니다.
 </script>
 ```
-=======
-For instance, if there are properties `paddingLeft/paddingTop`, then what should we get for `getComputedStyle(elem).padding`? Nothing, or maybe a "generated" value from known paddings? There's no standard rule here.
->>>>>>> upstream/master
 ````
 
 ```smart header="`:visited` 링크 관련 스타일은 숨겨져 있습니다."

2-ui/1-document/09-size-and-scroll/article.md

@@ -106,11 +106,7 @@ CSS `position` 프로퍼티가 설정되어있는 조상 요소가 없는 경우
 
 따라서 요소(혹은 이 요소의 조상 요소 중 어떤 것이든)의 CSS `display` 프로퍼티가 `none`이거나 문서 내에 해당 요소가 없으면 모든 기하 프로퍼티 값이 0이 됩니다(`offsetParent` 프로퍼티의 값은 `null`).
 
-<<<<<<< HEAD
 요소를 만들긴 했지만 아직 문서에 삽입하기 전이라던가, 새롭게 만든 요소의 `display` 프로퍼티가 `none`이면 기하 프로퍼티 값은 0, `offsetParent` 프로퍼티의 값은 `null`이 되는 것이죠.
-=======
-For example, `offsetParent` is `null`, and `offsetWidth`, `offsetHeight` are `0` when we created an element, but haven't inserted it into the document yet, or it (or its ancestor) has `display:none`.
->>>>>>> upstream/master
 
 이런 특징을 이용하면 요소의 숨김 상태 여부를 아래 같은 방법으로 확인할 수 있습니다.
 
@@ -120,11 +116,7 @@ function isHidden(elem) {
 }
 ```
 
-<<<<<<< HEAD
 참고로 `isHidden`은 요소가 화면에 있긴 하지만 사이즈가 0일 때(비어있는 `<div>` 등)도 `true`를 반환하기 때문에 주의해서 사용해야 합니다.
-=======
-Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes.
->>>>>>> upstream/master
 ````
 
 ## clientTop과 clientLeft