글꼴 색상 속성의 이상한 것이 실제 색상을 생성하는 이유는 무엇입니까?
저는 주니어를 가르치고 있습니다. 고등학교 / 고등학교 웹 프로그래밍 수업에서 CSS로 넘어 가기 전에 글꼴 및 색상과 같은 간단한 요소와 속성으로 시작합니다. 색상이 더 이상 사용되지 않고 글꼴이 HTML5에 포함되어 있지 않다는 것을 알고 있지만 교육 목적으로 간단한 HTML 태그로 시작하여 CSS까지 작업하는 것이 편리합니다. 학생들은 수업 첫 주 동안 페이지의 색상을 변경할 수 있다는 점에서 많은 기쁨을 얻습니다. (나는 또한 그들에게 1 주차에 천막과 눈 깜박임을 가르치지 만 그들이 다시 사용하면 점수를 잃을 것이라고 알려줍니다).
학생 중 한 명이 "Skittles"또는 "Spiderman"과 같은 색 속성 값에 이상한 내용으로 숙제를 제출하기 시작했습니다. 나는 이것을 실험하기 시작했고 글꼴 태그의 color = ""속성에 넣은 거의 모든 것이 일종의 색상을 생성한다는 것을 발견했습니다. 그리고 색상은 최신 버전의 IE, Firefox, Chrome, Opera 및 Safari에서 일관된 것으로 보입니다.
"LuckyCharms"를 CSS 색상으로 넣는 것이 작동하지 않는다는 것을 발견했습니다. HTML 속성에서 색상이 예상되는 경우에만 작동하는 것 같습니다 (예 : font color = "LuckyCharms"또는 body bgcolor = "LuckyCharms").
나는 왜 이런 일이 발생하는지 내 수업에 설명하려고 노력하고 있으며 지금까지 나는 그것을 이해할 수 없었거나 Google에 좋은 대답을 할 수 없었습니다. 색상 코드로 해석되는 것처럼 보이지만 방법을 이해할 수 없습니다.
업데이트 : 시행 착오 끝에 5 단계 알고리즘 (제공된 링크 사용)을 결정하여 거의 모든 문자열을 해당 16 진수 색상으로 변환했습니다. 나는 미래 방문자의 교화를 위해 여기에 알고리즘을 제공 할 것입니다.
- 16 진수가 아닌 각 문자를 0으로 변경합니다.
- 길이가 3의 배수가 될 때까지 문자열에 0을 추가합니다.
- 문자열을 3 등분으로 나눕니다.
- 하위 문자열의 길이가 2보다 크고 세 하위 문자열이 모두 0으로 시작하는 동안 각 문자열에서 선행 0을 제거합니다.
- 하위 문자열의 길이가 여전히 2보다 크면 각 하위 문자열을 2 자로 자릅니다.
그게 전부입니다. 부분 문자열을 모아서 16 진수 색상 코드를 얻었습니다. 약 20 개의 샘플로이 알고리즘을 확인하고 Firefox ColorZilla 추가 기능 색상 선택기를 사용하여 결과를 비교했습니다.
이 경우 규칙은 실제로 답변 중 하나에 지정된 링크에 구체적으로 명시되어 있으며 모든 브라우저에서 준수됩니다. 따라서 모든 브라우저에서 작업 할 수 있습니다 (정말 재미있는 색상 이름을 사용하고 싶은 경우).
HTML 5 사양에는 레거시 색상 구문 분석 규칙이 포함되어 있습니다.
그것들은 다소 길며 브라우저가 깨진 코드를 처리하는 방법에 대해 일관성을 유지할 수 있도록 설계되었습니다.
매우 흥미로운. 브라우저가 가능한 모든 문자를 해석하고 (af) 일치 할 수없는 경우 나머지는 0으로 두는 것처럼 보입니다. 예를 들면 :
Spiderman
00DE0 A
그래도 더 많은 실험이 필요합니다.
이것은 흥미로운 질문입니다.
간단한 실험을 통해 "Luck"은 "LuckyCharms"와 같은 색상을 생성하지만 "LuckBeALady"는 더 어두운 색조를, "LuckBeALadyTonight"는 더 파란색을 나타냅니다.
BTW, 내 첫 번째 생각은 인식 할 수있는 16 진수 문자에 대해 작동하는 것이었지만 "LuckyCharms"를 검정색으로 렌더링하는 cca로 바 꾸었습니다. Madara Uchiba가 제안한 것처럼 0과 16 진수 문자의 조합은 "LuckyCharms"와 동일한 잔디 녹색을 렌더링하지 못했습니다.
tho에 대한 대답이 없습니다.
예상되는 일에 대한 기본적인 대답은 "브라우저에 따라 다름"입니다. 5 이전 버전의 HTML의 문제점 중 하나는 브라우저에서 비표준 HTML이 발견 될 때 발생하는 일이 지정되지 않았다는 것입니다. @Madara Uchiha의 해석은 브라우저가 색상 사양을 해석하는 방법의 한 예이지만 브라우저가 충돌하거나 CD 트레이를 꺼내거나 모니터의 해상도를 400x300으로 변경하는 것은 허용 가능한 표준입니다. px. 물론 이것은 이상적이지 않습니다. 그래서 여러분이보고있는 것은 비표준 HTML 색상 사양이 발견되면 어떤 일이 발생해야하는지에 대한 한 프로그래머의 아이디어입니다.
CSS에서 발생하지 않는 이유는 색상을 해석하는 다른 파서이기 때문입니다. 이 동일한 파서는 인라인 CSS이든 연결된 CSS 문서이든 색상을 해석합니다. CSS 는 부적절한 값이 발견 될 때 발생하는 일을 정의 합니다. 이는 무시되고 문서에 전혀 영향을주지 않습니다.
나는 이것이 학생들에게 중요한 이해 분야이기 때문에 표준 준수에 대해 학급과 이야기하기에 좋은 시간이라고 말하고 싶습니다. 그들이 "하지만 color Skittles는 잘 작동합니다."라고 말할 때, 그들이 그것을 보면 잘 작동한다고 말할 수 있습니다 .하지만 이것이 강사의 브라우저를 충돌시켜 큰 F를 얻을 수 있다는 것은 전적으로 가능합니다. 우리 중 일부는 주말을 포기해야하는 실제 시나리오로 이동합니다. 데모 시간에 다른 누군가의 엉터리 코드가 제대로 작동하지 않기 때문입니다.
나는 씁쓸하지 않다. 대부분 :)
'programing' 카테고리의 다른 글
| Swift 2, 경고 : dyld 공유 캐시에서 Objective-C 클래스 정보를로드 할 수 없습니다. (0) | 2021.01.16 |
|---|---|
| 자동 증가 기본 키를 사용하는 경우와 사용하지 않는 경우 (0) | 2021.01.16 |
| 속성 대신 마커 인터페이스를 사용하는 설득력있는 이유 (0) | 2021.01.16 |
| PHP : 세션의 기본 수명은 얼마입니까? (0) | 2021.01.15 |
| 왜 True / False가 파이썬에서 대문자로 쓰이나요? (0) | 2021.01.15 |