빈 페이지의 색은 무엇입니까?
<html>
<body>
<h1>Hello World</h1>
</body>
</html>
이것은 기교적인 문제라고 말할 수 있다. 왜냐하면 흰색은 진정한 색깔이 아니지만, 페이지도 흰색이 아니다. 그것은 투명하기 때문이다.물론 브라우저는 흰색이지만 브라우저에 표시된 페이지는 투명합니다.
나에게 이 페이지가 흰색이 아니라는 것을 증명해라. 왜냐하면 나는 반드시 그것이 흰색이라고 말해야 하기 때문이다
철학자 모드 오픈:
So what is a page?
여기에는 반드시 두 가지 요소를 고려해야 한다.
body 소자 html 소자 background-color을 놓을 수 있다.body {
background-color: yellow;
}
사실은 그렇지 않다.바디에 테두리를 추가합니다.
실제로 몸은'Hello World'의 내용을 보여주기 위해 필요한 공간만 사용한다는 것을 알 수 있다.
So why all the yellow?
읊다, 읊조리다
The background of the root element becomes the background of the canvas and its background painting area extends to cover the entire canvas.
당신은 신체에 배경을 더합니다.브라우저는 그것을 캔버스의 배경으로 사용할 것이다.
w3c이라고요?
The document canvas is the infinite surface over which the document is rendered.
그래서 이게 상당히 커요.
화포의 개념은 대부분의 CSS 과정에 없다. 비록 브라우저의 매우 중요한 부분이지만.보시다시피
body을 바탕으로 전체 뷰포트에 배경을 제공합니다.이러한 새로운 정보를 통해 페이지의 심지 모형을 위에서 아래로 업데이트할 수 있습니다.
body 소자 html 소자 body이 화포이기 때문이다.아니:화포는 body의 정보만 사용하고 화포는 body 자체보다 훨씬 크다.흥미로운 것은 우리가 주체를 노란색으로 설정했지만 실제로는 투명하다는 것이다.canvas의 설명과 같이
The background of the root element becomes the background of the canvas [...] The root element does not paint this background again, i.e., the used value of its background is transparent.
브라우저가 캔버스 색과 같은
body을 그리는 것은 소용없다. 이것이 바로 투명하게 보이는 이유이다.다시 말하면
body에 배경색을 설정할 때 실제로는 캔버스 스타일을 설정한다(CSS에서 직접 스타일을 설정할 수 없다).캔버스'도둑'body의 값.w3c
몸 밖
철학자 모드 오픈:
So what is the body?
몸은
where the content appears: text, images, colors, graphics, etc.
body이 내용이라면 body 이외의 내용은 내용이 아니라는 것을 확신할 수 있다.
그래서 background-color 요소에 html을 설정하면 아무런 효과가 없을 것이다. 왜냐하면 그것은 내용의 일부분이 아니기 때문이다.
멈춰서 생각해 보자: 이 CSS로 우리의 페이지는 어떻게 될까?
html {
background-color: green;
}
body {
background-color: yellow;
}
지금 이 페이지는 무슨 색입니까?그것은 노란색이고 녹색입니다. 둘 다입니까?물론 둘 다 있습니다.
저희가 뭘 볼 수 있죠?
html {
background-color: green;
}
body {
background-color: yellow;
}
body으로 제한됩니다.html 요소가 전체 뷰포트를 채우는 것처럼 보입니다.But it does fill the viewport! The whole page is green!
알고 있습니다.그러나
html 요소에 테두리를 추가하여 어떤 일이 일어날지 살펴보겠습니다.이때 주의해야 할 것은 브라우저가
body 이외의 스타일(예를 들어 테두리)을 적용할 때 문제가 없다는 것이다.하지만 계속합시다.따라서 실제로
html의 행동은 body과 유사하다. 그 내용을 위탁 관리하는 데 필요한 공간만 차지한다. body과 8px페이지의 간격은 브라우저의 기본 스타일에서 나온다.So WHY the green everywhere?
w3c도 같은 답을 내놓았다.
The background of the root element becomes the background of the canvas.
은 루트 요소가 body 또는 html일 수 있음을 나타냅니다.It is recommended that authors of HTML documents specify the canvas background for the BODY element rather than the HTML element.
w3c는
html 요소를 사용하지 말라고 건의했지만 우리는 이렇게 했을 뿐이다. 이것이 바로 화포의 녹색의 원천이다.첫 번째 예와 같이
html은 투명하게 여겨진다. 녹색이 캔버스에 의해 도둑맞았다.이제 브라우저에서 캔버스 색상을 선택할 수 있는 전체 알고리즘이 생겼습니다.
if (the html has a background-color) {
use it to paint the canvas
}
else if (the body has a background-color) {
use it to paint the canvas
}
else {
the canvas stays transparent
}
우리도 공부해요.
왜 이게 중요합니까?그럼 흰색과 투명한 것은?
흰색과 투명 사이의 차이를 이해하는 것은 두 가지 상황이 동일해 보이더라도 CSS 미스터리를 푸는 관건이다.
우리 함께 mix-blend-mode을 놀자.이 CSS 속성을 사용하면 요소를 부모 요소와 혼합하는 방법을 정의할 수 있습니다.브라우저의 Photoshop이라고도 합니다.과장하든 안 하든 가능성은 놀랍다.
www.visualcinnamon에서 왔습니다.일반 도메인 이름 형식
우리는 간단한 예로부터 시작한다. h1은 녹색이 될 것이다. 우리는 mix-blend-mode: difference으로 그것의 외관을 바꾸고 싶다.
h1 {
color: green;
mix-blend-mode: difference;
}
difference 값은 텍스트의 색상이 원래 색상(녹색)과 배경 색상 간의 차이를 나타냅니다.
녹색과 흰색의 차이는 분홍색이다.그러니까 우리 타이틀이 핑크였으면 좋겠어.
다시 한 번 말하지만, 그것은 분홍색이 아니다.
But it should blend! The background is white!
아니오, 그것은 아닙니다. 그것은 투명합니다.
녹색과 투명 사이의 차이는 녹색이기 때문에 제목의 색깔은 변하지 않는다.
다시 살펴보겠습니다.
h1 {
color: green;
mix-blend-mode: difference;
}
body은 투명(기본값 background-color) html은 투명(기본값 background-color) html 또는 body 모두 미제공) 해결 방법은 간단하다.
background-color에 body을 설치하기만 하면 된다!body {
background-color: white;
}
다시 한 번 살펴보겠습니다.
body은 transparent(white은 CSS에 설치되어 있지만 캔버스에 의해 도둑맞았다)html은 투명(기본값 background-color) body)body(또는 우리의 목표를 포함하는 모든 요소)에는 반드시 배경이 있어야 합니다(당신은 배경을 html으로 설정하여 이를 실현할 수 있지만 이것은 비표준적입니다).우리의 여정은 곧 끝날 것이지만, 마지막 문제가 하나 더 있다..
공백 화포의 색깔은 무엇입니까?
페이지에 대한 우리의 사고방식은 다음과 같다.
body 소자 html 소자 body과 html이 투명하면 화포도 투명할 것으로 알려졌다.But how can the bottom layer be transparent? If this was the case, we would see the desktop and the other windows through the browser! You're nuts!
내 말 다 들어.만약 화포 밑에 또 다른 층이 있다면, 실제로는 흰색일까요?
이 다시 한 번 답을 주었습니다.If the canvas background is not opaque, what shows through is UA-dependent.
캔버스 뒤에 무언가가 있다.만약 화포가 투명하다면, 너는 그것을 볼 수 있다.본 내용은 브라우저에 따라 다릅니다.
내가 생각할 수 있는 모든 브라우저에서, 이 밑바닥은 모두 흰색이다.그러나 이론적으로는 말 한 마리가 파인애플 피자를 먹는 모습을 보여줄 수도 있다.이것은 얼마나 이상한 그물인가.
어쨌든 나는 흰색과 투명한 화포 사이의 차이를 진정으로 볼 수 있는 방법이 없을까 생각했다.우리는 기본 화포가 투명하다는 것을 증명할 수 있습니까?그냥 이상한 친구를 찾았어요.
w3c iframe 단서
아주 간단한 CSS로 돌아가겠습니다.
html, body {
border: 3px dashed black;
}
이 페이지를
iframe 태그가 있는 다른 페이지에 포함합니다.<iframe src="..." width="100%" height="300px"></iframe>
그래서 문제:
iframe의 화포는 투명한 것입니까, 아니면 하얀 것입니까?우리는 부모 페이지에 배경색을 설정해서 이 문제에 대답할 수 있다.
body {
background-color: lightblue;
}
body, html 및 캔버스.우리는 그것을 통해 부모 페이지를 볼 수 있다.Does it really prove that the canvas is transparent? Maybe iframes just don't have a canvas?
이것은 공평한 문제다.이 질문에 대답하기 위해 우리는
iframe의 body 라벨에 하얀 배경을 붙인다.body {
background-color: white;
}
만약 iframe에 화포가 없다면,
body 이외의 구역은 채울 수 없습니다.그러나 화포 메커니즘으로 인해 body의 배경색은 전체 iframe의 뷰포트를 덮을 수 있다.이것이 바로 우리가 모든 페이지에서 기본 캔버스는 흰색이 아니라 투명하다는 것을 볼 수 있는 이유이다.
따라서 공백 페이지를 열 때 흰색 캔버스가 보이지 않는다.이것은 브라우저의 '밑부분', 소프트웨어의 배경일 뿐, CSS 영역 이외에는 어떤 것과도 상호작용을 의미하지 않는다.
그래서 우리(최종?)우리가 본 심리 모델:
body 요소(기본값은 투명) html 요소(기본값은 투명) html 및 body에 따라 기본적으로 투명) 
어쨌든 이것은 작은 너의 좋은 세상이다
그것은 즐거운 여행이었다.네, 파티에서 재미있었어요.만약 당신이 이것에 대해 어떤 의견이 있다면, 메시지를 남겨 주십시오.
CSS는 어느 정도 당신이 무엇을 보았는지에 관한 것이지만, 어느 정도는 당신이 무엇을 보지 못했는지에 관한 것이다.
Reference
이 문제에 관하여(빈 페이지의 색은 무엇입니까?), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bcalou/what-is-the-color-of-a-blank-page-49og텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
