Skip to content

Commit 53af5c6

Browse files
SeonHyungJoSeonHyungJo
committed
✏️ </br> => <br/> 변경 진행
1 parent 441520d commit 53af5c6

31 files changed

+759
-760
lines changed

‎Browser/Cookie&Storage.md

+16-16
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,56 @@
11
# Cookie Session Local
22

33
브라우저에는 크게는 2개, 작게는 3개로 나뉘는 저장소가 존재 한다.
4-
</br>
4+
<br/>
55

66
![Storage](https://github.com/SeonHyungJo/FrontEnd-Dev/tree/browser/assets/image/Storage.png?raw=true)
77

88
:point_right: (참고 사진 : Chrome Debugger)
9-
</br>
9+
<br/>
1010

1111
위의 사진은 **Chrome Debugger** 에 들어가게 되면 **Application** 이라는 메뉴란에 보이는 스토리지 모습이다.
12-
</br>
12+
<br/>
1313

1414
현재 여기에는 총 5개의 `Storage`가 보이는데 이 중 지금 보려고하는 것은 3개이다. 나머지는 2개는 다음에 알아보도록 하자.
15-
</br>
16-
</br>
15+
<br/>
16+
<br/>
1717

1818
## Storage
1919

2020
먼저 `Storage`는 `HTML5`에서 새롭게 추가된 저장소이다. 기존에는 쿠키만 존재를 했으나 이제는 더욱 상황에 맞는 저장소를 사용할 수 있는 길이 생긴 것이다.
21-
</br>
21+
<br/>
2222

2323
`Storage`는 크게 2가지로 구분이 된다.
24-
</br>
24+
<br/>
2525

2626
하나는 `Session` 다른 하나는 `Local`이다.
27-
</br>
28-
</br>
27+
<br/>
28+
<br/>
2929

3030
### Session VS Local
3131

3232
두 `Storage`의 차이는 간단하게 브라우저를 끄게 되면 알 수 있다. 세션은 브라우저를 끄게 되면 자동으로 소멸을 하게 되고, 로컬은 따로 지우지 않는 이상 남아있게 된다. 흔히 `Local`은 자동로그인, 설정값에 사용이 된다.
33-
</br>
33+
<br/>
3434

3535
- `Storage`는 쿠키에 비해 용량이 크며 **한 사이트당 5MB이하를 권장**하고 있다.
3636
- 자동으로 서버로 같이 전송되지 않는다.
3737
- 쿠키의 경우는 서버로 같이 넘어간다.
3838
- 쿠키와는 다르게 구현되어있는 함수로 조작이 가능하다.
3939

40-
</br>
41-
</br>
40+
<br/>
41+
<br/>
4242

4343
## Cookie
4444

4545
`Key-Value` 형태의 저장소이다.
46-
</br>
46+
<br/>
4747

4848
`Cookie`는 기본적으로 만료기한 존재한다. 서버에 요청시 `Cookie`가 같이 날라가며, 이는 사용자를 구분할 때 사용이 되기도 한다.
49-
</br>
49+
<br/>
5050

5151
`Cookie`를 사용하기 위해서는 따로 함수를 만들어서 사용해야한다.
52-
</br>
53-
</br>
52+
<br/>
53+
<br/>
5454

5555
### 단점
5656

‎Browser/DOM.md

+9-9
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
# DOM이란 :question:
22

3-
</br>
3+
<br/>
44

55
## Document Object Model :+1:
66

77
웹 서버를 통해서 받은 html코드를 브라우저가 해석을 한 후에 Javascript객체를 통해 **계층화한 구조체** 를 의미한다.
8-
</br>
8+
<br/>
99

1010
## DOM은 Javscript Node개체의 계층화된 트리
1111

1212
:collision:즉 Console로 찍어보면 Document는 Node의 하위에 있는 객체다. :collision:
13-
</br>
13+
<br/>
1414

1515
또한 document(Document와는 완전히 다름)는 Object로 HTMLDocument의 하위 인스턴스로 우리가 실제로 아는 조작을 하는 트리이다.
1616

17-
</br>
17+
<br/>
1818

1919
- 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.
2020
- 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
2121

22-
</br>
22+
<br/>
2323

2424
우리가 위와같이 조작을 할 수 있는 이유는 DOM API를 제공하기 때문이다.
2525
아래의 사진은 Node하위 구조를 보여주고 있다.
2626

27-
</br>
27+
<br/>
2828

2929
![DOM 계층](https://web.stanford.edu/class/cs98si/img/dom_types.png)
3030

3131
처: [http://www.stanford.edu/class/cs98si/slides/the-document-object-model.html](http://www.stanford.edu/class/cs98si/slides/the-document-object-model.html)
3232

33-
</br>
33+
<br/>
3434

3535
프로토타입 기반으로 본다면 아래와 같은 구조를 가지고 있다.
3636

@@ -40,7 +40,7 @@ Object < EventTarget < Node < DocumentType < <!DOCTYPE html>(ElementNode)
4040
Object < EventTarget < Node < Element < HtmlElement < HtmlhtmlElement < html(ElementNode)
4141
```
4242

43-
</br>
43+
<br/>
4444

4545
- 결국 아래 코드와 같이 html ElementNode는 상속(Object, EventTarget, Node, Element, HtmlElement, HTMLhtmlElement) 받은 모든 객체의 속성 및 메서드들을 사용할 수 있게되는 것이다. :bulb:
4646

@@ -56,7 +56,7 @@ console.log(html.__proto__.__proto__.__proto__.__proto__.__proto__); // EventTar
5656
console.log(html.__proto__.__proto__.__proto__.__proto__.__proto__.__proto__); // Object
5757
```
5858

59-
</br>
59+
<br/>
6060

6161
:key: 정리를 하자면
6262

‎Browser/Standard&QuirksMode.md

+44-44
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,25 @@
55
1. **DTD(Document Type Definition)**
66
2. 표준모드와 쿽스모드의 차이점은 :question:
77

8-
</br>
8+
<br/>
99

1010
```html
1111
<!DOCTYPE ... > //예시
1212
```
1313

14-
</br>
15-
</br>
14+
<br/>
15+
<br/>
1616

1717
## DTD란 :question:
1818

1919
> 문서 형식 정의(DTD:Document Type Definition)는 마크업 문서의 요소와 속성등을 해석하는 기준을 명시하는 것입니다.
20-
</br>
20+
<br/>
2121
2222
전체적인 Markup 문서를 **어떤 형식에 맞춰서** 해석해야하는지 명시를 해준다는 것입니다.
23-
</br>
23+
<br/>
2424

2525
문서 형식에는 크게 **HTML5, XHTML, HTML** 의 3가지가 존재합니다.
26-
</br>
26+
<br/>
2727

2828
이전 버전의 **HTML(HTML2 ~ HTML4)** 은 [SGML](https://ko.wikipedia.org/wiki/SGML)에 기반을 두어 만들어졌기 때문에 상세한 `DTD` 참조가 필요하며, 이 때문에 `DOCTYPE` 선언을 하려면 **공개 식별자**와 **시스템 식별자**가 포함된 긴 문자열을 작성해야 합니다.
2929

@@ -36,101 +36,101 @@ PUBLIC "-//W3C//DTD HTML 4.01//EN" //공개 식별자
3636
"http://www.w3.org/TR/html4/strict.dtd" //시스템 식별자
3737
```
3838

39-
</br>
40-
</br>
39+
<br/>
40+
<br/>
4141

4242
## **XHTML :vs: HTML5**
4343

4444
### **SGML과 XML**
4545

4646
`SGML(Standard Generalized Markup Language)`은 문서용 마크업 언어를 정의하기 위한 메타 언어입니다.
47-
</br>
47+
<br/>
4848

4949
`SGML`은 정부나 항공우주 기업의 대규모 계획 사업 과정에서 기계 판독형(machine-readable) 문서를 공유할 목적으로 설계되었습니다.
50-
</br>
50+
<br/>
5151

5252
`SGML`은 인쇄와 출판 산업에 광범위하게 사용되었지만, 너무 복잡한 이유로 소규모 범용 목적으로 사용하는데 걸림돌이 되었습니다.
53-
</br>
53+
<br/>
5454

5555
`XML`은 `SGML`에서 파생된 언어입니다. `SGML`을 단순화하려는 시도로 시작되어, `XHTML`, `RSS` 등을 포함해 여러 방면에서 응용되고 있습니다.
5656

57-
</br>
58-
</br>
57+
<br/>
58+
<br/>
5959

6060
### **XHTML**
6161

6262
`XHTML(Extensible Hypertext Markup Language)`은 `HTML`과 동등한 표현 능력을 지닌 마크업 언어로, **`HTML`보다 엄격한 문법을 가집니다.**
63-
</br>
63+
<br/>
6464

6565
`HTML`이 `SGML`의 응용인 데 반해, `XHTML`은 `SGML`의 제한된 부분집합인 **`XML`의 응용입니다.**
66-
</br>
66+
<br/>
6767

6868
`XHTML` 문서는 하나의 `XML` 문서로서 문법적으로 정확해야 하기 때문에, `HTML`과 달리 **표준 `XML` 라이브러리를 이용한 자동화된 처리가 가능합니다.**
69-
</br>
69+
<br/>
7070

7171
`XHTML 1.0`은 2000년 1월 26일, `W3C(World Wide Web Consortium: 월드 와이드 웹 콘서시엄)`의 권고안이 되었습니다.
7272

73-
</br>
74-
</br>
73+
<br/>
74+
<br/>
7575

7676
### **XHTML vs HTML 5**
7777

7878
2004년 W3C 회의에서 모질라 재단과 오페라 소프트웨어가 새로운 **HTML 표준**을 제안했지만, W3C에 의해 "웹의 혁명을 위한 기존의 지향점에 위배된다"고 거절당했습니다.
79-
</br>
79+
<br/>
8080

8181
이에 인터넷 익스플로러를 제외한 애플, 모질라, 오페라가 `WHATWG`라는 새로운 웹 표준 기관을 설립하고 `HTML5` 표준을 제정했습니다.
82-
</br>
82+
<br/>
8383

8484
비슷한 시기에 `XHTML 2.0`이 나왔지만 기존의 표준과 너무 동떨어져서 개발자들에게 널리 사용되지 않았고, 2009년 폐기되기에 이르렀습니다.
85-
</br>
85+
<br/>
8686

8787
2014년부터 `HTML5`가 새로운 권고안이 되었습니다.
8888

89-
</br>
90-
</br>
89+
<br/>
90+
<br/>
9191

9292
### **HTML5**
9393

9494
HTML5는 HTML의 완전한 5번째 버전
95-
</br>
95+
<br/>
9696

9797
HTML5는 HTML 4.01, XHTML 1.0, DOM 레벨 2 HTML에 대한 차기 표준 제안입니다.
98-
</br>
98+
<br/>
9999

100100
비디오, 오디오 등 다양한 부가기능과 최신 멀티미디어 콘텐츠를 액티브X 없이 브라우저에서 쉽게 볼 수 있게 하는 것을 목적으로 합니다.
101101

102-
</br>
103-
</br>
102+
<br/>
103+
<br/>
104104

105105
## DTD를 정의하지 않으면 쿽스 모드(Quirks mode)로 렌더링된다
106106

107107
`DOCTYPE` 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 웹문서를 쿽스 모드로 해석합니다.
108-
</br>
108+
<br/>
109109

110110
쿽스 모드란 ***오래된 웹 브라우저를 위하여 디자인된 웹 페이지의 하위 호환성을 유지하기 위해 웹 브라우저가 웹문서를 해석하는 방식*** 입니다.
111-
</br>
111+
<br/>
112112

113113
반대로, 표준 모드(Standards Mode)는 W3C나 IETF(국제 인터넷 표준화 기구)의 표준을 엄격히 준수하여 문서를 해석합니다.
114-
</br>
114+
<br/>
115115

116116
쿽스 모드에서는 같은 코드라도 웹 브라우저마다 서로 다르게 해석하므로 전혀 다른 결과물을 보여주게 됩니다.
117-
</br>
117+
<br/>
118118

119119
오래된 브라우저의 경우 HTML과 CSS 명세(W3C 표준)가 완성되기도 전에 개발되어서 표준에 부응하지 못하였고, 그를 위해 쿽스 모드가 오래된 브라우저의 행동을 모방하도록 만들어진 것입니다.
120120

121-
</br>
122-
</br>
121+
<br/>
122+
<br/>
123123

124124
## 표준 모드와 쿽스 모드의 차이
125125

126-
비표준 모드 : Quirks mode, </br>
127-
표준 모드 : Standards mode, </br>
128-
거의 표준 모드 : almost standards mode, 엄격 모드 : strick mode </br>
129-
</br>
126+
비표준 모드 : Quirks mode, <br/>
127+
표준 모드 : Standards mode, <br/>
128+
거의 표준 모드 : almost standards mode, 엄격 모드 : strick mode <br/>
129+
<br/>
130130

131131
> 거의 표준 모드는 표준 모드와 한가지만 빼고 동일함. table 셀에서 비표준모드로 실행하고, 그외 나머지는 표준을 따름 따라서, 테이블 안에 조각난 이미지를 넣을 때, 표준 모드보다 비표준 모드, 거의 표준 모드일 때 이미지 간격이 떨어질 가능성이 덜함
132-
</br>
133-
</br>
132+
<br/>
133+
<br/>
134134
135135
### 표준모드와 쿽스모드가 다르게 나타나는 부분(넘어가도 됨)
136136

@@ -149,8 +149,8 @@ table 안의 font size 상속
149149
- 비표준 모드: table 안에서 텍스트는 기본 font size를 상속하지 않음
150150
- 표준 모드: table 안에서의 텍스트는 기본 font size값을 상속 함.
151151

152-
</br>
153-
</br>
152+
<br/>
153+
<br/>
154154

155155
## 모든 Doctype 선언 방법
156156

@@ -236,8 +236,8 @@ table 안의 font size 상속
236236
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
237237
```
238238

239-
</br>
240-
</br>
239+
<br/>
240+
<br/>
241241

242242
## 정리
243243

@@ -260,7 +260,7 @@ table 안의 font size 상속
260260
:point_right: 표준모드는 W3C나 IETF의 표준을 준수하여 웹페이지를 렌더링합니다.
261261

262262
쿽스모드는 오래된 웹 브라우저에서도 호환되도록 비표준적인 방법의 `CSS`를 적용해 웹페이지를 렌더링하며, 렌더링 방식은 브라우저에 따라 다릅니다.
263-
</br>
263+
<br/>
264264

265265
`DOCTYPE` 선언이 존재하지 않거나 잘못 적혀있을 경우 브라우저는 웹페이지를 쿽스모드로 해석합니다.
266266

0 commit comments

Comments
 (0)