▲

GN⁺: 인터넷을 형성한 HTML 해킹 기술

 (tedium.co)
2P by neo 11달전 | favorite | 댓글 1개

HTML 해킹의 기발함

  • HTML 해킹의 필요성: HTML 코드의 실패나 브라우저 구현의 미흡으로 인해 기대한 결과를 얻기 위해 우아하지 않은 코드를 작성해야 하는 경우가 있음. 이러한 해킹은 때로는 창의적이고 기억할 가치가 있음.
  • 넷스케이프 내비게이터 4.0 @import 해킹: 넷스케이프가 지원하지 않는 CSS 스타일을 차단할 수 있도록 함. 넷스케이프가 CSS 대신 JSSS를 지지했으나 W3C가 CSS를 선택하면서 넷스케이프 4의 CSS 구현이 서두르게 되었고, 이로 인해 나중의 브라우저에 비해 성능이 떨어짐.
  • HTML 테이블을 레이아웃에 사용: 더 실험적인 레이아웃을 가능하게 함. HTML 테이블을 레이아웃 도구로 사용하는 것은 해킹의 정의이며, 이메일 세계에서는 여전히 사용됨.
  • CSS 스타일 앞에 밑줄을 사용: 특정 스타일을 IE6에만 적용하도록 함. IE가 특수 문자를 파싱하는 한계를 이용함.
  • AlphaImageLoader를 사용하여 PNG 투명성 제공: IE6이 지원하지 않는 PNG 파일의 투명성을 렌더링함. 이미지를 필터를 통해 실행함.
  • 조건부 주석: 특정 IE 버전에서만 특정 트릭을 사용할 수 있도록 함. HTML 주석 기능을 해킹하여 코드를 실행할 수 있도록 변경함.
  • Scalable Inman Flash Replacement (sIFR): 비 웹 안전 폰트를 사용할 수 있게 함. 텍스트를 Flash 임베드로 교체하는 자바스크립트 해킹을 사용함.
  • 프리헤더 텍스트 해킹: 이메일에서 추가 텍스트가 설명 라인에 흘러 들어가는 것을 방지함. 비표준 또는 이례적인 공백 문자 배열을 사용함.
  • Google Chrome Frame: IE6을 크롬 창으로 대체함. 브라우저 플러그인을 통해 구현함.
  • Webkit 전용 선택자 해킹: CSS 코드를 Webkit 브라우저에만 적용함. 특정 브라우저 특정 CSS 코드를 지원하는지 감지함.
  • 반응형 디자인: 다양한 설정, 특히 태블릿과 모바일에서 정보를 효과적으로 배치함. 대부분의 경우 미디어 쿼리를 사용하여 장치에 따라 정보를 배치함.

GN⁺의 의견

  • 가장 중요한 것은 HTML과 CSS의 표준을 벗어나 창의적인 해결책을 찾아내는 개발자들의 노력임.
  • 이 글은 웹 개발자들이 브라우저의 한계를 극복하고 사용자 경험을 향상시키기 위해 어떻게 창의적인 해킹을 사용했는지 보여줌으로써 흥미롭고 매력적임.
  • 이러한 해킹은 웹 표준의 발전과 더 나은 웹 디자인을 위한 개발자들의 끊임없는 노력을 반영함.
▲
neo 11달전  [-]
Hacker News 의견

  • 테이블을 레이아웃으로 사용하는 것은 이해할 수 있음.

    테이블이 유행을 따르지 않게 되면서 몇 년간 레이아웃을 위해 float 사용이 대세였음. 이 방법이 리스트에서 빠진 것에 대해 놀람. MDN 문서에 따르면, float 속성은 원래 텍스트 블록 내 이미지를 띄우기 위해 사용되었으나, 웹페이지의 다중 컬럼 레이아웃을 만드는 데에 자주 사용되었음. 이제 flexbox와 grid의 등장으로 원래의 목적으로 돌아감.

  • spacer.gif에 대한 존중이 없음.

    HN에서 여전히 사용 중이며, 모든 페이지 요청에 포함됨: s.gif

  • 가장 좋아하는 기술들:

    • 사이드바가 내용만큼 길어 보이게 하기 위한 'Faux columns'
    • 아홉 개의 패치와 9개의 div 또는 3x3 테이블을 사용하여 경계를 해킹하고, 배경을 일부 축에서 반복함. CSS3에서는 이를 돕는 border-image가 등장함. 하지만 이러한 경계 스타일은 더 이상 선호되지 않음.
    • 둥근 경계를 만들기 위해 아홉 개의 패치를 사용할 수 있으나, 많은 사람들이 HTML을 생성하는 제너레이터를 사용하여 둥근 경계를 시뮬레이션함. 기사에서 설명하듯, 추가 마크업이 이미지보다 더 많은 바이트를 차지할 것이라는 전통적인 지혜가 있었으나, 라운드트립이 적고 실행하기 쉬움.

  • HN이 오늘날에도 이러한 기술 중 하나를 사용함:

    • HTML 테이블을 레이아웃으로 사용함
    • 이 리스트는 표준 없는 개발이 어떻게 다양한 용인 가능한 부수적인 채널에 제어 정보를 인코딩하는지 강조함.
    • 이로 인한 잠재적인 혼란과 충돌은 때때로 W3C 프로세스에 대해 느껴지는 경멸을 부각시킴. 이 프로세스는 표준 기반의 웹 기술 진화와 브라우저 주도의 혁신을 결합함. 때로는 서로를 이끌거나 동시에 진행됨.
    • 종종 비판받지만, 이 프로세스는 이전 것보다 더 지속 가능하고 안정적으로 해석될 수 있음.
    • 새로운 W3C-벤더 규범을 비판하는 이들 중 몇 명이 이 10가지 이상한 해킹을 회상하며 그 시절로 돌아가고 싶어할지 궁금함.

  • 접근성을 위한 제목을 화면에 표시되지 않게 -10000 위치에 두는 것을 포함하지 않음.

  • HTML5 shiv를 CSS 이전에 설치하여 모든 브라우저의 특이점을 제거하는 것에 대한 언급이 없음.

    HTML5 shiv의 역사

  • 투명한 1×1 픽셀 gif를 사용하여 테이블 셀을 제어하던 좋은 옛날을 기억함.

  • 초기에 널리 사용된  , 즉 공백을 끊지 않는 공간 문자 엔터티에 대한 추가 언급:

    텍스트를 컨테이너 내에서 오른쪽 또는 왼쪽으로 이동하기 위해 사용됨. 또는 테이블 셀이 제대로 동작하도록 하기 위해 1x1 스페이서 gif와 유사하게 사용됨. 일부 페이지에는 수백 개의  가 사용됨. 일반적으로 여백이나 패딩을 추가하는 방법으로 사용됨.

  • 현대 웹 개발자들이 CSS Grid와 IE의 종말로 인해 버릇없어졌는지, 아니면 복잡한 현대 프레임워크와 빌드 프로세스를 다루지 않아서 그 시절에 버릇없었는지 가끔 구분이 안 됨.

  • 반응형 디자인이 정말 해킹인지에 대한 의문:

    미디어 쿼리는 놀라움. 조건부 로직을 자바스크립트에 넣는 것 대신 CSS에 넣는 것은 서버 사이드 렌더링을 원할 때 큰 이점임.

답변달기