HTML에서 "chucknorris"가 색상이라고 생각하는 이유는 무엇입니까?

7486

HTML에서 배경색으로 입력 할 때 특정 임의의 문자열이 어떻게 색상을 생성합니까? 예를 들면 다음과 같습니다.

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

스 니펫 확장

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

흥미롭게도 chucknorri빨간색 배경도 chucknorr생성하지만 노란색 배경이 생성됩니다.

무슨 일이야?

html browser background-color

— 사용자 456584
소스

154

참고로 : 사용하지 마십시오 bgcolor. CSS를 사용하십시오 background.

— John Dvorak

47

왜 배경색을 추가하고 싶 chucknorris습니까? 예상 색상은 무엇입니까?

— masterFly 2016

106

@masterFly : 귀하의 질문에 아주 잘 대답하기 때문에 승인 된 답변 아래의 내 의견이 "비 건설적이지 않은"이유로 삭제 된 이유를 모르겠습니다. 사람들은 항상 이런 것들을 실험합니다. 내가 이것을 발견했을 때 나는 단지 10 살이었다. 그리고 내가 당시에하고 있었던 모든 것은 엉망이고 무슨 일이 있었는지보고 있었다. 항상 무언가 이와 같은 무언가를하는 실질적인 이유가있을 필요는 없습니다.

— BoltClock

49

및 <body bgcolor="stevensegal">테스트 </ 몸> 녹색

— 크리스

4

@BenDaggers 다시 편집하기 전에 개정 내역을 읽으십시오. CSS 태그는 관련 이 없으며 이미 두 번 제거되었습니다.

— 궤도에서 가벼움 경주

6878

넷스케이프 시절부터 이어진 것입니다.

누락 된 숫자는 0 [...]으로 처리됩니다. 잘못된 숫자는 단순히 0으로 해석됩니다. 예를 들어 값 # F0F0F0, F0F0F0, F0F0F, #FxFxFx 및 FxFxFx는 모두 동일합니다.

블로그 게시물에서 가져온 것입니다. 다양한 길이의 색상 값 등을 포함하여 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".

— 대시
소스

174

이 블로그 게시물의 말씀은 3 문자 문자열을 처리에 도착하면, 당신이에도 불구하고,주의 중복 이 아니라 0을 붙이는 것보다, 각 문자를 예를 0F6하게 #00FF66하지 #000F06.

— Aaron Dufour

634

@usr : 의도적으로 무시하고 잘못된 입력을 중심으로 구축되고 HTML)

— 릴리 발라드

59

내 임의의 문자열을 CSS 색상 변환기로 사용하여 특정 문자열의 색상을 얻을 수도 있습니다 . Jeremy Goodell의 문자열 색상을 계산 하는 5 단계를 기반으로합니다 .

— TimPietrusky

15

의미론에 숨겨진 기회? 당신은 이것으로 몇 가지 오류 페이지를 만들 <body bgcolor=error><h1 style=text-align:center>Error: Not Found<h1></span>수 있습니다.

— Theraot

32

@Theraot bgcolor="success"도 좋은 녹색입니다. 흥미롭게도 CSS 속성 / 값 선택기 (예 :)를 사용하여 이러한 색상을 무시할 수 있습니다td[bgcolor="chucknorris"] {...} .

— daiscog

970

나는 동의 죄송하지만,에 의해 게시 기존 색상 값 구문 분석에 대한 규칙에 따라 @Yuhong 바오를 , 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는 수정 사항을 포함하도록 답변을 편집했습니다.

— 제레미 구웰
소스

86

나는 파싱 지시의 일부를 잘못 해석했다 : "adamlevine"= "ada00e000e"= "ada00e000e00"= "ada0 0e00 0e00"= "ad 0e 0e"-완벽 !!

— Jeremy Goodell

17

: 당신이 관심이있는 경우에, 나는 오늘 게시 된 비슷한 질문에 갱신으로 5 단계 알고리즘을 게시 stackoverflow.com/questions/12939234/...

— 제레미 구델

18

@TimPietrusky는 무작위 색상 이름을위한이 놀라운 데모 도구를 만들었습니다. randomstringtocsscolor.com으로 가서 상자를 클릭하고 "chucknorris"를 입력하십시오.

— Jeremy Goodell

4

adamlevine당 작업을 수행 jsfiddle.net/LdyZ8/2959 하지만에 문자 차단 ada00e000e에 패딩 ada00e000e00그런데 전형적인 HEX 6 자리의 값까지 감소 [ad]a0[0e]00[0e]00하므로 상기 jsfiddle 나타나는 ad0e0e 제조.

— Martin

4

이 답변 에 현재 상태 만 포함되어 있으면 더 좋을 것 입니다.이 답변 및 다른 답변의 내역은 편집 요약 및 / 또는 의견에 속합니다.

— Peter Mortensen

397

대부분의 브라우저는 색상 문자열에서 16 진이 아닌 숫자를 0으로 대체하여 NON 16 진 값을 무시합니다.

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>

스 니펫 확장

— 마이크 크리스텐슨
소스

7

OP가 왜 "HTML"이 아닌 "CSS"라고 말했는지 궁금하지만 여전히 오래된 브라우저를 사용하고 있거나 실수 한 것일까 요?

— 마이크 크리스텐슨

7

그래서 그는 더 이상 사용되지 않는 bgcolor속성을 사용하고 있습니다.

— animuson

12

유효하지 않은 문자는 건너 뛰지 않고 0으로 취급됩니다.

— 모드를 잘 처리하십시오.

5

(이 답변이 죽었을 수 있음) 제안 : 대신 배경색을 사용하여 색을 시연하십시오. 텍스트 색상이 너무 작은 상대 영역 위에있어 차이점이나 유사점을보기가 어렵습니다.

— Zoe

304

브라우저가 chucknorris유효한 값이 아니기 때문에 16 진 색상 코드 로 변환하려고 합니다.

에서이 chucknorris모든 것을 제외하고는 c유효한 16 진수 값이 아닙니다.
따라서로 변환됩니다 c00c00000000.
빨간색 인 # c00000 이됩니다 .

Chrome (31)과 Firefox (26)는 모두 이것을 무시하므로 Internet Explorer 와 Opera (12)에서 주로 문제가됩니다 .

PS 괄호 안의 숫자는 내가 테스트 한 브라우저 버전입니다.

.

가벼운 노트

척 노리스는 웹 표준을 준수하지 않습니다. 웹 표준은 그를 따릅니다. # 바다 55

— 웹 개발자
소스

296

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

chucknorrisc16 진수로 인식되는 문자로 시작하고 인식 할 수없는 모든 문자를 0! 로 변환합니다 .

따라서 chucknorris16 진수 형식이됩니다 : c00c00000000, 다른 모든 문자는 그대로 0있고 c그대로 유지됩니다 ...

이제 RGB(빨강, 녹색, 파랑)에 대해 3으로 나눕니다 ... R: c00c, G: 0000, B:0000...

그러나 RGB에 유효한 16 진수는 2 자에 불과하다는 것을 알고 있습니다. R: c0, G: 00, B:00

실제 결과는 다음과 같습니다.

bgcolor="#c00000";

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

— 알리레자
소스

23

이것은 매우 귀여운 설명입니다 : D : D : D

— Dominik Bucher

2

제가 경험 한 현명하고 매우 간단하고 단호한 설명

— Saurin Vala 13:12의

1

매우 창의적인 답변 :)

— ahmednawazbutt

222

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 진수로 구문 분석 된 다음 overflow를 확인하지 않고 32 비트 정수로 이동됩니다 . 32 비트 정수에는 8 개의 16 진 숫자 만 들어가므로 마지막 8 자만 고려됩니다. 16 진 숫자를 32 비트 정수로 구문 분석 한 후 16 비트를 8 비트에 맞을 때까지 16으로 나누어 8 비트 정수로 잘 리므로 선행 0이 무시됩니다.

업데이트 :이 코드는 사양에 정의 된 것과 정확하게 일치하지 않지만 몇 줄의 코드가 다릅니다. Netscape 4에서 추가 된 것은 다음과 같습니다.

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

— 유홍 바오
소스

고마워, 당신은 이전 Netscape 소스 코드가 어디에 있는지 보여주었습니다 ... 왜 그렇게 찾기가 어렵습니까?

— kb1000

202

대답:

브라우저는 척 노리스 를 16 진수 값으로 변환하려고 시도 합니다.
이 이후 c에 대해서만 유효 진수 문자 척 노리스 의 값으로 턴 : c00c00000000( 올바르지 모든 값 0 ).
브라우저는 다음 3 groupds에 결과를 분할 : Red = c00c, Green = 0000, Blue = 0000.
html 배경에 유효한 16 진수 값은 각 색상 유형 ( r , g , b ) 에 대해 2 자리 숫자 만 포함 하므로 마지막 두 자리는 각 그룹에서 잘리고 rgb 값은 c00000벽돌색을 띤 색조입니다.

— Webeng
소스

22

chucknorris 는 c로 시작 하고 브라우저는이를 16 진수 값으로 읽습니다.

A, B, C, D, E 및 F 때문에있는 16 진수 문자 .

브라우저는 chucknorris16 진수 값으로 변환 합니다 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>

스 니펫 확장

— Sameera lakshitha
소스

15

레거시 속성에서 색상을 구문 분석 하는 규칙 에는 기존 답변에서 언급 한 것보다 추가 단계가 포함됩니다. 자르기 구성 요소를 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>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>

스 니펫 확장

— 살만 A
소스