HTML에서 배경색으로 입력할 때 특정 임의의 문자열이 색상을 생성하는 이유는 무엇입니까?
예를 들어:
<body bgcolor="chucknorris"> test </body>...모든 브라우저와 플랫폼 에서 빨간색 배경 의 문서를 생성합니다.
반면에, chucknorr 는 노란색 배경을 생성합니다!
무슨 일이야?
반응형
질문자 :user456584
답변자 : dash
Netscape 시절부터 이어온 것입니다.
누락된 숫자는 0[...]으로 처리됩니다. 잘못된 숫자는 단순히 0으로 해석됩니다. 예를 들어 #F0F0F0, F0F0F0, F0F0F, #FxFxFx 및 FxFxFx 값은 모두 동일합니다.
다양한 길이의 색상 값 등을 포함하여 매우 자세히 다루는 Microsoft Internet Explorer의 색상 구문 분석에 대한 블로그 게시물입니다.
블로그 게시물에서 규칙을 차례로 적용하면 다음을 얻습니다.
유효하지 않은 모든 16진수 문자를 0으로 바꿉니다.
chucknorris becomes c00c00000003으로 나눌 수 있는 다음 총 문자 수로 채웁니다(11 → 12):
c00c 0000 0000RGB 색상의 해당 색상 구성 요소를 나타내는 각 구성 요소와 함께 3개의 동일한 그룹으로 분할합니다.
RGB (c00c, 0000, 0000)오른쪽에서 두 문자까지 각 인수를 자릅니다.
마지막으로 다음과 같은 결과를 제공합니다.
RGB (c0, 00, 00) = #C00000 or RGB(192, 0, 0) 다음은 이 "놀라운" 색상 견본을 생성하기 위해 작동 bgcolor 속성을 보여주는 예입니다.
<table> <tr> <td bgcolor="chucknorris" cellpadding="8" width="100" align="center">chuck norris</td> <td bgcolor="mrt" cellpadding="8" width="100" align="center" style="color:#ffffff">Mr T</td> <td bgcolor="ninjaturtle" cellpadding="8" width="100" align="center" style="color:#ffffff">ninjaturtle</td> </tr> <tr> <td bgcolor="sick" cellpadding="8" width="100" align="center">sick</td> <td bgcolor="crap" cellpadding="8" width="100" align="center">crap</td> <td bgcolor="grass" cellpadding="8" width="100" align="center">grass</td> </tr> </table> 이것은 또한 질문의 다른 부분에 대한 답변이기도 합니다. bgcolor="chucknorr" 이 노란색을 생성하는 이유는 무엇입니까? 규칙을 적용하면 문자열은 다음과 같습니다.
c00c00000 => c00 c00 000 => c0 c0 00 [RGB(192, 192, 0)]밝은 옐로우 골드 색상을 제공합니다. 문자열이 9자로 시작하므로 이번에는 두 번째 'C'를 유지하므로 최종 색상 값으로 끝납니다.
color="crap" 을 할 수 있다고 지적했을 때 처음에 이것을 만났고, 음, 갈색으로 나옵니다.
답변자 : Jeremy Goodell
동의하지 않아 유감이지만 @Yuhong Bao가 게시한 레거시 색상 값 구문 분석 규칙에 따르면 chucknorris #CC0000 과 동일하지 않지만 #C00000 , 매우 유사하지만 약간 다른 빨간색 색조입니다. 이를 확인하기 위해 Firefox ColorZilla 추가 기능을 사용했습니다.
규칙 상태:
- 0을 추가하여 문자열 길이를 3의 배수로
chucknorris0 - 문자열을 3개의 동일한 길이 문자열로 분리:
chuc knor ris0 - 각 문자열을 2자로 자릅니다:
ch kn ri - 16진수 값을 유지하고 필요한 경우 0을 추가합니다.
C0 00 00
이 규칙을 사용하여 다음 문자열을 올바르게 해석할 수 있었습니다.
-
LuckyCharms -
Luck -
LuckBeALady -
LuckBeALadyTonight -
GangnamStyle
업데이트: #CC0000 이라고 말한 원래 답변자는 이후 수정 사항을 포함하도록 답변을 편집했습니다.
답변자 : Alireza
그 이유는 브라우저가 그것을 이해할 수 없고 어떻게든 그것을 이해할 수 있는 것으로, 이 경우에는 16진수 값으로 번역하려고 하기 때문입니다!...
chucknorris 는 16진수로 인식되는 문자인 c 시작하며 0 으로 변환합니다!
그래서 chucknorris 진수 형식이된다 : c00c00000000 , 다른 모든 문자가 0 과 c 그들이 남아 ...
RGB (빨간색, 녹색, 파란색)에 대해 3으로 나뉩니다 R: c00c, G: 0000, B:0000 ...
그러나 RGB에 유효한 16진수는 2자이며 R: c0, G: 00, B:00
따라서 실제 결과는 다음과 같습니다.
bgcolor="#c00000";또한 빠른 참조를 위해 이미지의 단계를 추가했습니다.
답변자 : Mike Christensen
대부분의 브라우저는 색상 문자열에서 16진수가 아닌 값을 무시하고 16진수가 아닌 숫자를 0으로 대체합니다.
ChuCknorris 로 변환 c00c0000000 . 이 시점에서 브라우저는 문자열을 Red , Green 및 Blue 값을 c00c 0000 0000 . 각 섹션의 추가 비트는 무시되어 최종 결과가 #c00000 인 붉은색이 됩니다.
CSS 표준을 따르는 CSS 색상 파싱 에는 적용되지 않습니다.
<p><font color='chucknorris'>Redish</font></p> <p><font color='#c00000'>Same as above</font></p> <p><span style="color: chucknorris">Black</span></p>답변자 : aWebDeveloper
유효한 값이 아니기 때문에 브라우저에서 chucknorris 를 16진수 색상 코드로 변환하려고 합니다.
-
chucknorrisc제외한 모든 것은 유효한 16진수 값이 아닙니다. -
c00c00000000변환됩니다. - 이것은 #c00000 , 빨간색 음영이 됩니다.
Chrome(31)과 Firefox(26) 모두 이 문제를 무시 하기 때문에 이것은 주로 Internet Explorer 와 Opera (12)에서 발생하는 문제인 것 같습니다.
PS 괄호 안의 숫자는 내가 테스트한 브라우저 버전입니다.
가벼운 마음으로
Chuck Norris는 웹 표준을 준수하지 않습니다. 웹 표준은 그를 따릅니다. #바다55
답변자 : Yuhong Bao
WHATWG HTML 사양에는 레거시 색상 값을 구문 분석하기 위한 정확한 알고리즘이 있습니다 . https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value .
색상 문자열을 구문 분석하는 데 사용되는 Netscape Classic 코드는 오픈 소스입니다. https://github.com/zii/netscape/blob/master/lib/layout/layimage.c#L150 .
예를 들어, 각 문자는 16진수로 구문 분석된 다음 오버플로를 확인하지 않고 32비트 정수로 이동됩니다. 32비트 정수에는 8자리의 16진수만 들어가므로 마지막 8자만 고려됩니다. 16진수 숫자를 32비트 정수로 구문 분석한 후 8비트에 맞을 때까지 16으로 나누어 8비트 정수로 잘립니다. 이것이 선행 0이 무시되는 이유입니다.
업데이트: 이 코드는 사양에 정의된 것과 정확히 일치하지 않지만 몇 줄의 코드가 있다는 유일한 차이점이 있습니다. (Netscape에서) 다음과 같은 줄 이 추가되었다고 생각합니다.
if (bytes_per_val > 4) { bytes_per_val = 4; }답변자 : Webeng
답변:
- 브라우저는 chucknorris 를 16진수 값으로 변환하려고 시도합니다.
-
c는 Chucknorris 에서 유일하게 유효한 16진수 문자이므로 값은c00c00000000( 유효하지 않은 모든 값의 경우 0) 으로 바뀝니다. - 그런 다음 브라우저는 결과를 3개의 그룹으로 나눕니다.
Red = c00c,Green = 0000,Blue = 0000. - html 배경에 유효한 16진수 값은 각 색상 유형( r , g , b )에 대해 2자리만 포함하므로 각 그룹에서 마지막 2자리가 잘리고 벽돌-붉은 색조
c00000
답변자 : sameera lakshitha
chucknorris 는 c 시작하고 브라우저는 이를 16진수 값으로 읽습니다.
A, B, C, D, E, F는 16진수의 문자 이기 때문입니다.
브라우저의 변환은 chucknorris 16 진수 값으로 C00C00000000 .
그런 다음 C00C00000000 16진수 값은 RGB 형식(3으로 나눕니다)으로 변환됩니다.
C00C00000000⇒R:C00C, G:0000, B:0000
브라우저는 색상을 나타내는 데 두 자리만 필요합니다.
R:C00C, G:0000, B:0000⇒R:C0, G:00, B:00⇒C00000
마지막으로 웹 브라우저에 bgcolor = C00000
다음은 이를 보여주는 예입니다.
<table> <tr> <td bgcolor="chucknorris" cellpadding="10" width="150" align="center">chucknorris</td> <td bgcolor="c00c00000000" cellpadding="10" width="150" align="center">c00c00000000</td> <td bgcolor="c00000" cellpadding="10" width="150" align="center">c00000</td> </tr> </table>답변자 : Salman A
레거시 속성의 색상 구문 분석 규칙 에는 기존 답변에 언급된 것보다 추가 단계가 포함됩니다. 구성 요소를 2자리로 자르는 부분은 다음과 같이 설명됩니다.
- 마지막 8자를 제외한 모든 문자를 버립니다.
- 모든 구성 요소에 선행 0이 있는 한 선행 0을 하나씩 버립니다.
- 처음 2개를 제외한 모든 문자 버리기
몇 가지 예:
oooFoooFoooF 000F 000F 000F <- replace, pad and chunk 0F 0F 0F <- leading zeros truncated 0F 0F 0F <- truncated to 2 characters from right oooFooFFoFFF 000F 00FF 0FFF <- replace, pad and chunk 00F 0FF FFF <- leading zeros truncated 00 0F FF <- truncated to 2 characters from right ABCooooooABCooooooABCoooooo ABC000000 ABC000000 ABC000000 <- replace, pad and chunk BC000000 BC000000 BC000000 <- truncated to 8 characters from left BC BC BC <- truncated to 2 characters from right AoCooooooAoCooooooAoCoooooo A0C000000 A0C000000 A0C000000 <- replace, pad and chunk 0C000000 0C000000 0C000000 <- truncated to 8 characters from left C000000 C000000 C000000 <- leading zeros truncated C0 C0 C0 <- truncated to 2 characters from right다음은 알고리즘의 부분 구현입니다. 사용자가 유효한 색상을 입력하는 오류나 경우를 처리하지 않습니다.
function parseColor(input) { // todo: return error if input is "" input = input.trim(); // todo: return error if input is "transparent" // todo: return corresponding #rrggbb if input is a named color // todo: return #rrggbb if input matches #rgb // todo: replace unicode code points greater than U+FFFF with 00 if (input.length > 128) { input = input.slice(0, 128); } if (input.charAt(0) === "#") { input = input.slice(1); } input = input.replace(/[^0-9A-Fa-f]/g, "0"); while (input.length === 0 || input.length % 3 > 0) { input += "0"; } var r = input.slice(0, input.length / 3); var g = input.slice(input.length / 3, input.length * 2 / 3); var b = input.slice(input.length * 2 / 3); if (r.length > 8) { r = r.slice(-8); g = g.slice(-8); b = b.slice(-8); } while (r.length > 2 && r.charAt(0) === "0" && g.charAt(0) === "0" && b.charAt(0) === "0") { r = r.slice(1); g = g.slice(1); b = b.slice(1); } if (r.length > 2) { r = r.slice(0, 2); g = g.slice(0, 2); b = b.slice(0, 2); } return "#" + r.padStart(2, "0") + g.padStart(2, "0") + b.padStart(2, "0"); } $(function() { $("#input").on("change", function() { var input = $(this).val(); var color = parseColor(input); var $cells = $("#result tbody td"); $cells.eq(0).attr("bgcolor", input); $cells.eq(1).attr("bgcolor", color); var color1 = $cells.eq(0).css("background-color"); var color2 = $cells.eq(1).css("background-color"); $cells.eq(2).empty().append("bgcolor: " + input, "<br>", "getComputedStyle: " + color1); $cells.eq(3).empty().append("bgcolor: " + color, "<br>", "getComputedStyle: " + color2); }); }); body { font: medium monospace; } input { width: 20em; } table { table-layout: fixed; width: 100%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <p><input id="input" placeholder="Enter color eg chucknorris"></p> <table id="result"> <thead> <tr> <th>Left Color</th> <th>Right Color</th> </tr> </thead> <tbody> <tr> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </tbody> </table>답변자 : MuhammadAliDEV
간단한 단어로 대답:
짧은 대답은 HTML은 만족하기를 간절히 원하며 기본적으로 당신이 제공하는 모든 것을 받아들일 것이라는 것입니다. HTML은 형식이 잘못된 입력을 의도적으로 무시하도록 만들어졌습니다.
전체 개념:
HTML은 16진수가 아닌 문자를 0으로 허용하므로 0-9는 0에서 9를 정의하고 AF는 10에서 15를 정의한다는 것을 모두 알고 있습니다. 그래서 "chucknorris" 와 같은 색이 될 수 있는 단어는 이렇게 짙은 핏빛 붉은 색이 될 수 있습니다. 마찬가지로 "stevensegal" 은 녹색을 의미합니다.
예기치 않은 색상 표시: 몇 개의 16진수 문자가 포함된 단어를 bgcolor에 입력하면 해당 문자가 상상하지 못한 예상치 못한 색상을 표시합니다. # F00F00가 #FotFot 동일처럼 작동합니다. 그러나 이것은 다른 곳에서는 테이블 태그 안의 bgcolor에서만 작동합니다.
데모:
<style> h1 { color: green; } </style> <center> <h1>Why HTML thinks Chucknorris as color?</h1> <p> Here is the implementation...!!! </p> <table> It is the color of: <td bgcolor="chucknorris"> chucknorris </td> </table> </center>출처 : Here
출처 : http:www.stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color">
반응형
'etc. > StackOverFlow' 카테고리의 다른 글
| 현재 Git 작업 트리에서 로컬(추적되지 않은) 파일을 제거하는 방법 (0) | 2021.09.25 |
|---|---|
| "let"과 "var"를 사용하는 것의 차이점은 무엇입니까? (0) | 2021.09.25 |
| C#에서 문자열과 문자열의 차이점은 무엇입니까? (0) | 2021.09.25 |
| Git 리포지토리를 이전 커밋으로 되돌리려면 어떻게 해야 합니까? (0) | 2021.09.25 |
| 로컬 Git 브랜치의 이름을 어떻게 바꾸나요? (0) | 2021.09.25 |