ProgramingTip

브라우저가 개행을 공백으로 기술하는 이유는 무엇입니까?

bestdevel 2020. 11. 27. 21:06
반응형

브라우저가 개행을 공백으로 기술하는 이유는 무엇입니까?


오랫동안 저는 이해하고있는 HTML 요소 사이에 NewLine이있을 때 빈 공간을 추가하는 이유를했습니다. 예를 들면 다음과 같습니다.

<span>Hello</span><span>World</span>

위의 html 은 "Hello"와 "World"사이에 공백 없이 "HelloWorld"문자열 출력 하지만 다음 예제에서는 다음과 있습니다.

<span>Hello</span>
<span>World</span>

위의 html 은 "Hello"와 "World"사이에 공백이 있는 "Hello World"문자열 출력합니다 .

자, 나는 그것이 작동하는 방식을 받아들이지 만 나를 조금 괴롭히는 것은 항상 html 요소 사이의 공백 (또는 줄 바꿈)이 그 시간에 중요하지 않다는 인상을 받았다는 것입니다. 브라우저는 html을 사용자에게 공개했습니다.

그래서 제 질문은이 행동의 철학적 또는 이유를 아는 사람이 있습니다.

감사합니다.


여러 개의 공백 문자 (줄 바꿈 포함)를 단일 공백으로 압축합니다. 예외는 유일한 <pre>요소 또는 CSS이 속성white-space 설정 pre되거나 pre-wrap설정된 요소 내에 있습니다. (또는 XHTML에서는 xml:space="preserve"속성입니다.)


블록 요소 사이의 공백은 무시됩니다. 그러나 인라인 요소 사이의 공백은 하나의 공백으로 변환됩니다. 이유는 인라인 요소가 부모 요소의 일반 내부 텍스트와 함께 산재 할 수 있기 때문입니다.

다음 예를 고려하십시오.

<p>This is my colored <span class="red_text">Hello</span> <span class="blue_text">World</span> example</p>

이 경우에는 사용자가

This is my colored Hello World example

그러나 두 범위 사이의 공백을 제거하면 다음과 같은 결과가 발생합니다.

This is my colored HelloWorld example

그러나 동일한 샘플은 작성자가 (HTML 형식에 대한 OCD 포함 :-)) 다음과 같이 다시 수 있습니다.

<p>
  This is my colored
  <span class="red_text">Hello</span>
  <span class="blue_text">World</span>
  example
</p>

이것이 이전 예제와 일관 오류 메시지 더 좋을 것입니다.


HTML은 다음과 같이 지정됩니다.

줄 바꿈도 공백 문자입니다.

http://www.w3.org/TR/REC-html40/struct/text.html#h-9.1


두 태그 사이에 문자 'a'가있을 수 있습니다. 이 경우 두 태그 사이에 '\ n'문자가 있습니다. 동작은 유사하고 일관 적입니다 ( '\ n'는 단일 공백으로 됨).


브라우저는 여기서 실수를합니다.

http://www.w3.org/TR/html4/appendix/notes.html#hB.3.1

SGML ([ISO8879], 7.6.1 절 참조)는 시작 태그 바로 뒤의 줄 바꿈을 무시해야하며 종료 태그 바로 앞의 줄 바꿈도 무시해야합니다. 예외없이 모든 HTML 요소에 적용됩니다.

참고 URL : https://stackoverflow.com/questions/588356/why-does-the-browser-renders-a-newline-as-space

반응형