html - php label 태그




HTML은 "chucknorris"가 색상이라고 생각하는 이유는 무엇입니까? (6)

HTML에서 배경색으로 입력 할 때 특정 무작위 문자열이 어떻게 색을 생성합니까? 예 :

<body bgcolor="chucknorris"> test </body>

... 모든 브라우저와 플랫폼에서 빨간색 배경 의 문서를 생성합니다.

흥미롭게도 chucknorri 은 빨간색 배경을 생성하지만 chucknorri 은 노란색 배경을 생성합니다.

무슨 일 이니?


WHATWG HTML 사양에는 레거시 색상 값을 파싱하기위한 정확한 알고리즘이 있습니다. https://html.spec.whatwg.org/multipage/infrastructure.html#rules-for-parsing-a-legacy-colour-value

컬러 문자열 파싱에 사용되는 Netscape Classic 코드는 오픈 소스입니다. https://dxr.mozilla.org/classic/source/lib/layout/layimage.c#155

예를 들어 각 문자는 16 진수로 파싱 된 다음 오버플로를 확인하지 않고 32 비트 정수로 이동 합니다 . 오직 8 자리의 16 진수가 32 비트 정수에 들어가기 때문에 마지막 8 문자 만 고려됩니다. 16 진수를 32 비트 정수로 파싱 한 후에는 8 비트 정수로 잘라내어 8 비트 정수로 잘라내어 8 비트에 맞출 때까지 16으로 나눕니다.이 때문에 맨 앞의 0은 무시됩니다.

업데이트 :이 코드는 사양에 정의 된 것과 정확히 일치하지 않지만 몇 줄의 코드 만 차이가 있습니다. 나는 이것이 넷스케이프 4에서 추가 된이 줄이라고 생각한다.

if (bytes_per_val > 4)
{
      bytes_per_val = 4;
}

그 이유는 브라우저가 그것을 이해할없고 어떻게 든 그것을 16 진수 값으로 이해할 수있는 것으로 변환하려고 시도하기 때문입니다! ...

chucknorris 는 16 진수로 인식 된 문자 인 c 시작합니다. 인식 할 수없는 문자를 모두 0 으로 변환합니다!

그래서 chucknorris 는 16 진수 형식이됩니다 : c00c00000000 , 다른 모든 문자는 0 되고 c 는 그대로 있습니다.

이제 그들은 RGB (빨강, 초록, 파랑)에 대해 3으로 나눕니다. R: c00c, G: 0000, B:0000 ...

그러나 RGB에 대한 유효한 16 진수는 R: c0, G: 00, B:00

따라서 실제 결과는 다음과 같습니다.

bgcolor="#c00000";

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


대부분의 브라우저는 16 진수를 0으로 대체하여 색상 문자열의 비 16 진수 값을 무시합니다.

ChuCknorris 변환됩니다. 이 시점에서 브라우저는 문자열을 빨강 , 녹색파랑 값 ( c00c 0000 0000 나타내는 3 개의 동일한 섹션으로 나눕니다. 각 섹션의 추가 비트는 무시되며 최종 결과 #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>


동의하지 않는 것이 유감이지만 유유 바오가 게시 한 기존 색상 값을 파싱하는 규칙에 따라 chucknorris#CC0000#C00000 않지만 빨간색과 매우 유사하지만 약간 다른 색상 인 #C00000 과 동일합니다. 나는 그것을 확인하기 위해 Firefox ColorZilla 애드온 을 사용했다.

규칙 상태 :

  • 0을 추가하여 문자열의 길이를 3의 배수로 chucknorris0 . chucknorris0
  • 문자열을 3 개의 동일한 길이의 문자열로 분리하십시오. chuc knor ris0
  • 각 문자열을 2 문자로 자릅니다. ch kn ri
  • 16 진수 값을 유지하고 필요한 경우 0을 추가하십시오. C0 00 00

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

  • LuckyCharms
  • Luck
  • LuckBeALady
  • LuckBeALadyTonight
  • GangnamStyle

업데이트 : 색을 #CC0000 이라고 말한 원래 응답자가 답변을 수정하여 수정했습니다.


레거시 속성에서 색상을 구문 분석 하는 규칙 은 기존 답변에서 언급 한 것보다 추가 단계가 필요합니다. 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>


chucknorris 는 브라우저가 16 진수 값으로 읽은 상태의 통계입니다.

a, b, c, d, e, f는 16 진수 문자 이기 때문에

브라우저 chucknorrisc00c00000000 16 진수 값으로 변환됩니다.

그런 다음 c00c00000000 16 진수 값을 RGB 형식으로 변환 (3으로 나눕니다)

c00c00000000 => R:c00c,G:0000,B:0000

브라우저는 색상을 나타 내기 위해 2 자리 숫자 만 필요합니다.

R:c00c,G:0000,B:0000 => R:c0,G:00,B:00 => c00000

마지막으로, 웹 브라우저에 bgcolor = 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>







background-color