programing

HTML은 왜 "척노리스"가 색이라고 생각합니까?

linuxpc 2023. 5. 11. 21:10
반응형

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의 색상 구문 분석에 대한 약간의 불평 블로그 게시물입니다.

블로그 게시물에서 규칙을 차례로 적용하면 다음과 같은 정보를 얻을 수 있습니다.

  1. 유효하지 않은 모든 16진수 문자를 0으로 바꿉니다.

    chucknorris becomes c00c0000000

  2. 다음 총 문자 수를 3으로 나눈 값(11 → 12)으로 표시합니다.

    c00c 0000 0000

  3. 세 개의 동일한 그룹으로 나누고 각 구성 요소는 RGB 색상의 해당 색상 구성 요소를 나타냅니다.

    RGB (c00c, 0000, 0000)

  4. 각 인수를 오른쪽에서 두 문자로 잘라냅니다.

마지막으로, 다음과 같은 결과를 제공합니다.

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

이 규칙을 사용하여 다음 문자열을 올바르게 해석할 수 있었습니다.

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

원래 색깔이.#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";

또한 빠른 참조를 위해 이미지의 단계를 추가했습니다.

HTML은 왜 "척노리스"가 색이라고 생각합니까?

대부분의 브라우저는 색상 문자열에서 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진수 색상 코드로 변환합니다.

  1. chucknorris를 제외한 모든 항목이 유효한 16진수 값이 아닙니다.
  2. 로 변환됩니다.
  3. 이는 3개의 RGB 그룹으로 나뉩니다(3의 배수가 아닌 경우 끝에 0번 패드가 있음).
  4. 각 그룹에서 두 개의 캐릭터만 선택할 수 있습니다.
  5. 드디어 #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자리 부분으로 잘라내는 구성 요소는 다음과 같습니다.

  1. 마지막 8자를 제외한 모든 문자 삭제
  2. 모든 구성 요소가 선행 0을 갖는 한 선행 0을 하나씩 삭제합니다.
  3. 처음 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>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</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

'programing'의 다른글

  • 현재글HTML은 왜 "척노리스"가 색이라고 생각합니까?

관련글

댓글

티스토리툴바