HTML은 왜 "척노리스"가 색이라고 생각합니까?
HTML에 배경색으로 입력할 때 특정 랜덤 문자열이 색상을 생성하는 이유는 무엇입니까?
를 들면, 들면를예,bgcolor="chucknorris"빨간색 배경이 생성됩니다.
<body bgcolor="chucknorris"> test </body>반로대.bgcolor="chucknorr"노란색 배경이 생성됩니다.
<body bgcolor="chucknorr"> test </body>이는 다양한 브라우저와 플랫폼에서 적용됩니다.이게 무슨 일입니까?
Netscape 시절의 유물입니다.
결측 숫자는 0[...]으로 처리됩니다.잘못된 숫자는 단순히 0으로 해석됩니다.예를 들어 #F0F0F0, F0F0, F0F0F, #FxFxFx 및 FxFx의 값은 모두 동일합니다.
다양한 길이의 색상 값 등을 포함하여 매우 상세하게 다루는 Microsoft Internet Explorer의 색상 구문 분석에 대한 약간의 불평 블로그 게시물입니다.
블로그 게시물에서 규칙을 차례로 적용하면 다음과 같은 정보를 얻을 수 있습니다.
유효하지 않은 모든 16진수 문자를 0으로 바꿉니다.
chucknorris becomes c00c0000000다음 총 문자 수를 3으로 나눈 값(11 → 12)으로 표시합니다.
c00c 0000 0000세 개의 동일한 그룹으로 나누고 각 구성 요소는 RGB 색상의 해당 색상 구성 요소를 나타냅니다.
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"그리고, 음, 갈색으로 나옵니다.
동의하지 못해서 죄송합니다만, 위훙바오가 올린 레거시 컬러 값 구문 분석 규칙에 따르면,chucknorris 와 동일하지 않음#CC0000 려히오에게.#C00000매우 비슷하지만 약간 다른 빨간색이를 확인하기 위해 Firefox ColorZilla 애드온을 사용했습니다.
규칙은 다음과 같습니다.
- 문자열이 : 0 추 가 의 을 문 자 을 길 3 만 니 다 듭 로 이 배
chucknorris0 - 을 세 문자열로 합니다.
chuc knor ris0 - 을 두: 각 문 열 문 자 릅 니 다 로 자 두 자 을 니
ch kn ri - 값을 필요한 합니다. 16진수의 경우 0을 추가합니다.
C0 00 00
이 규칙을 사용하여 다음 문자열을 올바르게 해석할 수 있었습니다.
LuckyCharmsLuckLuckBeALadyLuckBeALadyTonightGangnamStyle
원래 색깔이.#CC0000그 이후로 수정 사항을 포함하도록 답변을 편집했습니다.
그 이유는 브라우저가 그것을 이해할 수 없고 어떻게든 그것을 이해할 수 있는 것으로, 그리고 이 경우에는 16진수 값으로 변환하려고 시도할 수 없기 때문입니다!...
chucknorris 합니다.c되지 않는 를 16진수로 합니다.0!
그렇게chucknorris다음과 같습니다.c00c00000000는 다른모캐들은터릭든은이 됩니다.0그리고.c그들이 있는 곳에...
이제 그들은 3으로 나뉩니다.RGB(빨간색, 녹색, 파란색)... R: c00c, G: 0000, B:0000...
하지만 우리는 RGB에 대한 유효한 16진수가 단지 2자라는 것을 알고 있습니다.R: c0, G: 00, B:00
따라서 실제 결과는 다음과 같습니다.
bgcolor="#c00000";
또한 빠른 참조를 위해 이미지의 단계를 추가했습니다.
대부분의 브라우저는 색상 문자열에서 16진수가 아닌 값을 무시하고 16진수가 아닌 숫자를 0으로 대체합니다.
ChuCknorris에해는하로 됩니다.c00c0000000이 시점에서 브라우저는 빨간색, 녹색 및 파란색 값을 나타내는 세 개의 동일한 섹션으로 문자열을 나눕니다.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>에서 브우저변시있습다니고하도환라을가다있▁is를 변환하려고 합니다.chucknorris유효한 값이 아니기 때문에 16진수 색상 코드로 변환합니다.
chucknorris를 제외한 모든 항목이 유효한 16진수 값이 아닙니다.- 로 변환됩니다.
- 이는 3개의 RGB 그룹으로 나뉩니다(3의 배수가 아닌 경우 끝에 0번 패드가 있음).
- 각 그룹에서 두 개의 캐릭터만 선택할 수 있습니다.
- 드디어 #c00000이 되고, 빨간색이 됩니다.
크롬(31)과 파이어폭스(26) 모두 이를 무시하기 때문에 주로 Internet Explorer와 Opera(12)에서 문제가 발생한 것으로 보입니다.
추신: 괄호 안의 숫자는 제가 테스트한 브라우저 버전입니다.
마찬가지로, 라즈니칸트(인도인 척 노리스)는 검은색의 색조로 대화합니다.
0a0000a0000 => #0a0000
좀 더 가벼운 어조로
Chuck Norris는 웹 표준을 준수하지 않습니다.웹 표준은 그에게 적합합니다.#BADA55
WHATWG HTML 사양에는 레거시 색상 값을 구문 분석하기 위한 정확한 알고리즘이 있습니다.
색 문자열을 구문 분석하는 데 사용되는 Netscape Classic 코드는 netscape/lib/layout/layimage.c입니다.
예를 들어, 각 문자는 16진수로 구문 분석된 다음 오버플로를 확인하지 않고 32비트 정수로 전환됩니다.32비트 정수에는 16진수 8자리만 포함되므로 마지막 8자만 포함됩니다.16진수를 32비트 정수로 구문 분석한 후 8비트에 들어갈 때까지 16으로 나누어 8비트 정수로 잘립니다. 따라서 선행 0은 무시됩니다.
이 코드는 사양에 정의된 것과 정확하게 일치하지 않지만 몇 줄의 코드만 다릅니다.(Netscape 4에서) 추가된 것은 다음과 같은 라인들이라고 생각합니다.
if (bytes_per_val > 4)
{
bytes_per_val = 4;
}
- 브라우저는 척노리스를 16진수 값으로 변환하려고 시도합니다.
- 부터
cChucknorris에서 유효한 16진수 문자이며, 값은 다음으로 바뀝니다.c00c00000000(잘못된 모든 값의 경우 0). - 그런 다음 브라우저는 결과를 세 그룹으로 나눕니다.
Red = c00c,Green = 0000,Blue = 0000. - HTML 배경에 대한 유효한 16진수 값은 각 색상 유형(r, g, b)에 대해 두 자리만 포함하므로 마지막 두 자리는 각 그룹에서 잘리고 RGB 값은 다음과 같습니다.
c00000그것은 벽돌로 장식된 톤의 색입니다.
chucknorris 으로 시작하고 브라우저는 이 값을 16진수 값으로 읽습니다.
A, B, C, D, E, F는 16진수 문자이기 때문입니다.
브라우저가 변환됩니다.chucknorris으로 설정합니다.C00C00000000.
에 그면러그.C00C0000000016진수 값은 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>레거시 속성에서 색상을 구문 분석하는 규칙에는 기존 답변에 언급된 단계보다 추가 단계가 포함됩니다.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 e.g. 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>언급URL : https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color
'programing' 카테고리의 다른 글
| 어떻게 하면 Git가 심볼 링크를 따르도록 할 수 있습니까? (0) | 2023.05.11 |
|---|---|
| 커밋 해시가 지정된 GitHub에서 커밋 찾기 (0) | 2023.05.11 |
| UPSERT *삽입 또는 교체하지 않음* (0) | 2023.05.11 |
| postgres where 절 비교 타임스탬프 (0) | 2023.05.11 |
| 2D 배열을 C++ 함수로 전달 (0) | 2023.05.11 |