Skip to content

Commit 71271f4

Browse files
snowarisnowari
committed
[문서] 문서 1.8 ~ 1.11 병합충돌 해결
아래의 병합 충돌을 해결했습니다. - 1.8 스타일과 클래스 - 1.9 요소 사이즈와 스크롤 - 1.10 브라우저 창 사이즈와 스크롤 - 1.11 좌표
1 parent 71ab899 commit 71271f4

4 files changed

Lines changed: 57 additions & 156 deletions

File tree

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

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -52,12 +52,12 @@ elem.style.top = top; // 예시: '456px'
5252
```html run
5353
<body class="main page">
5454
<script>
55-
*!*
56-
// 클래스 추가
57-
document.body.classList.add('article');
58-
*/!*
55+
*!*
56+
// 클래스 추가
57+
document.body.classList.add('article');
58+
*/!*
5959
60-
alert(document.body.className); // main page article
60+
alert(document.body.className); // main page article
6161
</script>
6262
</body>
6363
```
@@ -66,7 +66,7 @@ elem.style.top = top; // 예시: '456px'
6666

6767
`classList`에 구현된 메서드는 다음과 같습니다.
6868

69-
- `elem.classList.add/remove("class")` -- `class`를 추가하거나 제거
69+
- `elem.classList.add/remove("class")` -- `class`를 추가하거나 제거
7070
- `elem.classList.toggle("class")` -- `class`가 존재할 경우 `class`를 제거하고, 그렇지 않은 경우엔 추가
7171
- `elem.classList.contains("class")` -- `class` 존재 여부에 따라 `true/false`를 반환
7272

@@ -97,7 +97,10 @@ border-left-width => elem.style.borderLeftWidth
9797
예시:
9898

9999
```js run
100-
document.body.style.backgroundColor = prompt('배경을 무슨 색으로 바꿀까요?', 'green');
100+
document.body.style.backgroundColor = prompt(
101+
"배경을 무슨 색으로 바꿀까요?",
102+
"green",
103+
);
101104
```
102105

103106
````smart header="특정 브라우저 전용 프로퍼티"
@@ -123,26 +126,23 @@ button.style.WebkitBorderRadius = '5px';
123126
// 예시를 실행하면 페이지의 <body>가 깜빡입니다.
124127
document.body.style.display = "none"; // hide
125128

126-
setTimeout(() => document.body.style.display = "", 1000); // 1초 후 다시 원래 상태로 돌아옵니다.
129+
setTimeout(() => (document.body.style.display = ""), 1000); // 1초 후 다시 원래 상태로 돌아옵니다.
127130
```
128131

129132
이렇게 `style.display`에 빈 문자열을 할당하면 브라우저는 마치 처음부터 `style.display` 프로퍼티가 없었던 것처럼 CSS 클래스와 브라우저 내장 스타일을 페이지에 적용합니다.
130133

131-
<<<<<<< HEAD
132-
````smart header="`style.cssText`로 완전히 다시 쓰기"
133-
개별 스타일 프로퍼티를 적용할 때는 보통 `style.*`를 사용합니다. 그런데 `div.style` 은 객체이고 읽기 전용이기 때문에 `div.style="color: red; width: 100px"`같은 방식으론 전체 스타일을 설정할 수 없습니다.
134-
=======
135-
Also there is a special method for that, `elem.style.removeProperty('style property')`. So, We can remove a property like this:
134+
이를 위한 특별한 메서드인 `elem.style.removeProperty('style property')`도 있습니다. 아래와 같이 프로퍼티를 제거할 수 있습니다.
136135

137136
```js run
138-
document.body.style.background = 'red'; //set background to red
137+
document.body.style.background = "red"; // 배경을 빨간색으로 설정
139138

140-
setTimeout(() => document.body.style.removeProperty('background'), 1000); // remove background after 1 second
139+
setTimeout(() => document.body.style.removeProperty("background"), 1000); // 1초 후 배경 제거
141140
```
142141

143-
````smart header="Full rewrite with `style.cssText`"
144-
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.
145-
>>>>>>> upstream/master
142+
````smart header="`style.cssText`로 완전히 다시 쓰기"
143+
개별 스타일 프로퍼티를 적용할 때는 보통 `style.\*`를 사용합니다. 그런데 `div.style`은 객체이고 읽기 전용이기 때문에`div.style="color: red; width: 100px"`같은 방식으론 전체 스타일을 설정할 수 없습니다.
144+
145+
````
146146
147147
문자열을 사용해 전체 스타일을 설정하려면 프로퍼티 `style.cssText`를 사용해야 합니다.
148148
@@ -159,12 +159,13 @@ Normally, we use `style.*` to assign individual style properties. We can't set t
159159
160160
alert(div.style.cssText);
161161
</script>
162-
```
162+
````
163163

164164
`style.cssText`를 사용하면 기존 스타일에 스타일을 추가하는 게 아니라 전체를 교체해버리기 때문에 잘 쓰이지 않습니다. 잘 사용하고 있는 스타일이 실수로 지워진다는 위험이 있죠. 그렇지만 요소를 새로 만들고, 여기에 스타일을 적용할 때는 기존 스타일이 없기 때문에 `style.cssText`를 사용할 수 있습니다.
165165

166166
`div.setAttribute('style', 'color: red...')`를 사용해 속성을 설정해도 `style.cssText`과 같은 효과를 볼 수 있습니다.
167-
````
167+
168+
`````
168169
169170
## 단위에 주의하기
170171
@@ -273,10 +274,9 @@ pseudo
273274
````warn header="`getComputedStyle`엔 프로퍼티 전체 이름이 필요합니다."
274275
`getComputedStyle`을 사용할 때는 `paddingLeft`, `marginTop`, `borderTopWidth`같이 프로퍼티 이름 전체를 정확히 알고 있어야 합니다. 그렇지 않으면 원하는 값을 얻을 수 없는 경우가 생깁니다.
275276
276-
<<<<<<< HEAD
277277
`paddingLeft`나 `paddingTop`엔 값이 지정되어있는데 `getComputedStyle(elem).padding`을 사용해 값을 얻으려 하는 경우를 생각해 봅시다. 어떤 값을 얻을 수 있을까요? 아무것도 얻지 못할까요 아니면 값이 설정되어 있는 `paddingLeft`나 `paddingTop`에서 값을 가져올까요? 이런 상황에 적용할만한 표준은 아직 제정되어있지 않습니다.
278278
279-
따라서 브라우저마다 동작 방식이 다릅니다. Chrome 같은 몇몇 브라우저는 아래 예시와 같이 `10px`을 출력해주는데 Firefox에서 빈 문자열이 출력됩니다.
279+
따라서 브라우저마다 동작 방식이 다릅니다. Chrome 같은 몇몇 브라우저는 아래 예시와 같이 `10px`을 출력해주는데 Firefox에서 빈 문자열이 출력됩니다.
280280
281281
```html run
282282
<style>
@@ -289,17 +289,15 @@ pseudo
289289
alert(style.margin); // Firefox에선 빈 문자열이 출력됩니다.
290290
</script>
291291
```
292-
=======
293-
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.
294-
>>>>>>> upstream/master
295-
````
292+
`````
296293

297-
```smart header="`:visited` 링크 관련 스타일은 숨겨져 있습니다."
298-
방문한 적이 있는 링크엔 `:visited`라는 CSS 의사 클래스를 사용해 색을 입힐 수 있습니다.
294+
```smart header="`:visited`링크 관련 스타일은 숨겨져 있습니다."
295+
방문한 적이 있는 링크엔`:visited`라는 CSS 의사 클래스를 사용해 색을 입힐 수 있습니다.
299296

300297
그런데 `getComputedStyle`을 사용해서 이 색을 얻을 수 없습니다. 색을 얻을 수 있도록 하면 임의의 페이지에서 사용자가 해당 링크를 방문했는지 아닌지를 `getComputedStyle`을 사용해 알아낼 수 있기 때문입니다.
301298

302299
자바스크립트로는 `:visited`에 적용된 스타일을 얻지 못합니다. 여기에 더하여 CSS에는 `:visited`에 기하학적 변화를 가져오는 스타일을 적용하는 것을 금지하는 제약도 있습니다. 이런 제약들은 악의를 가진 페이지가 사용자가 링크를 방문했는지 여부를 테스트 하고, 방문 여부에 따라 사생활을 침해할 만한 어떠한 것도 하지 못하도록 하려고 만들어졌습니다.
300+
303301
```
304302
305303
## 요약
@@ -311,10 +309,11 @@ For instance, if there are properties `paddingLeft/paddingTop`, then what should
311309
312310
스타일 변경 방법:
313311
314-
- `style` 프로퍼티 -- 카멜 표기법을 이용해 변경한 스타일이 있는 객체로, 이 객체를 조작하는 것은 `"style"` 속성과 대응하는 개별 프로퍼티를 조작하는 것과 같습니다. `important` 등의 규칙을 어떻게 적용할 수 있는지 알아보려면 [MDN](mdn:api/CSSStyleDeclaration)에서 관련 메서드를 살펴보시기 바랍니다.
312+
- `style` 프로퍼티 -- 카멜 표기법을 이용해 변경한 스타일이 있는 객체로, 이 객체를 조작하는 것은 `"style"` 속성과 대응하는 개별 프로퍼티를 조작하는 것과 같습니다. `important` 등의 규칙을 어떻게 적용할 수 있는지 알아보려면 [MDN](mdn:api/CSSStyleDeclaration)에서 관련 메서드를 살펴보시기 바랍니다.
315313
316314
- `style.cssText` 프로퍼티는 `"style"` 속성 전체에 대응하므로 스타일 전체에 대한 문자열이 저장됩니다.
317315
318316
요소의 스타일 결정 값을 읽는 방법:
319317
320318
- 스타일 정보가 들어 있는 객체를 반환해주는 메서드 `getComputedStyle(elem, [pseudo])`를 사용합니다. 이 메서드는 읽기 전용입니다.
319+
```

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

Lines changed: 9 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,12 @@
99
프로퍼티 사용법을 알아보기 위해 아래와 같은 샘플 요소를 사용할 예정입니다.
1010

1111
```html no-beautify
12-
<div id="example">
13-
...텍스트...
14-
</div>
12+
<div id="example">...텍스트...</div>
1513
<style>
1614
#example {
1715
width: 300px;
1816
height: 200px;
19-
border: 25px solid #E8C48F;
17+
border: 25px solid #e8c48f;
2018
padding: 20px;
2119
overflow: auto;
2220
}
@@ -37,9 +35,10 @@
3735
샘플 예시에서 스크롤바가 없었다면 콘텐츠 영역 너비는 `300px`이었을 겁니다. 그런데 스크롤바가 `16px`을 차지하기 때문에 콘텐츠 영역 너비가 `284px`(300 - 16)이 되었습니다(스크롤바 너비는 브라우저나 디바이스마다 다릅니다). 스크롤바가 없었다면 계산이 매우 쉬웠겠지만, 연습을 위해 샘플 요소에 스크롤바를 일부러 포함했습니다. 요소를 다룰 때는 스크롤바가 차지하는 공간을 항상 염두에 두세요.
3836
```
3937

40-
```smart header="`padding-bottom` 영역으로 텍스트가 넘칠 수 있습니다."
41-
그림에선 패딩에 아무것도 보이지 않게 해두었긴 하지만 요소 내 텍스트가 길어 넘치게 될 경우엔 브라우저가 이 텍스트들을 `padding-bottom`에 표시합니다. 이는 정상적인 동작입니다.
42-
```
38+
```smart header="`padding-bottom`영역으로 텍스트가 넘칠 수 있습니다."
39+
그림에선 패딩에 아무것도 보이지 않게 해두었긴 하지만 요소 내 텍스트가 길어 넘치게 될 경우엔 브라우저가 이 텍스트들을`padding-bottom`에 표시합니다. 이는 정상적인 동작입니다.
40+
41+
````
4342
4443
## 기하 프로퍼티
4544
@@ -78,7 +77,7 @@ CSS `position` 프로퍼티가 설정되어있는 조상 요소가 없는 경우
7877
alert(example.offsetLeft); // 180 (주의: 문자열 '180px'이 아닌 숫자 180이 반환됩니다.)
7978
alert(example.offsetTop); // 180
8079
</script>
81-
```
80+
````
8281

8382
![](metric-offset-parent.svg)
8483

@@ -106,11 +105,7 @@ CSS `position` 프로퍼티가 설정되어있는 조상 요소가 없는 경우
106105
107106
따라서 요소(혹은 이 요소의 조상 요소 중 어떤 것이든)의 CSS `display` 프로퍼티가 `none`이거나 문서 내에 해당 요소가 없으면 모든 기하 프로퍼티 값이 0이 됩니다(`offsetParent` 프로퍼티의 값은 `null`).
108107
109-
<<<<<<< HEAD
110108
요소를 만들긴 했지만 아직 문서에 삽입하기 전이라던가, 새롭게 만든 요소의 `display` 프로퍼티가 `none`이면 기하 프로퍼티 값은 0, `offsetParent` 프로퍼티의 값은 `null`이 되는 것이죠.
111-
=======
112-
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`.
113-
>>>>>>> upstream/master
114109
115110
이런 특징을 이용하면 요소의 숨김 상태 여부를 아래 같은 방법으로 확인할 수 있습니다.
116111
@@ -120,11 +115,7 @@ function isHidden(elem) {
120115
}
121116
```
122117
123-
<<<<<<< HEAD
124118
참고로 `isHidden`은 요소가 화면에 있긴 하지만 사이즈가 0일 때(비어있는 `<div>` 등)도 `true`를 반환하기 때문에 주의해서 사용해야 합니다.
125-
=======
126-
Please note that such `isHidden` returns `true` for elements that are on-screen, but have zero sizes.
127-
>>>>>>> upstream/master
128119
````
129120

130121
## clientTop과 clientLeft
@@ -223,6 +214,7 @@ element.style.height = `${element.scrollHeight}px`;
223214
```
224215

225216
이런 특징을 이용하면 `scrollTop`을 `0`이나 `1e9`같은 아주 큰 숫자로 설정해 스크롤바를 최상단이나 최하단으로 옮길 수 있습니다.
217+
226218
````
227219
228220
## CSS를 사용해 너비와 높이를 얻지 마세요
@@ -285,3 +277,4 @@ Windows가 설치된 데스크톱 PC의 Firefox, Chrome, Edge 브라우저는
285277
- `scrollLeft`와 `scrollTop` -- 스크롤바가 오른쪽, 아래로 움직임에 따라 가려지게 되는 요소 콘텐츠의 너비와 높이
286278
287279
스크롤바를 움직일 수 있게 해주는 `scrollLeft`와 `scrollTop`을 제외한 모든 프로퍼티는 읽기 전용입니다.
280+
````

0 commit comments

Comments
 (0)