이상하지만 필요했던 추억의 HTML 꼼수들 🤡

Ernie Smith 님이 쓴 포스트를 요약/의역한 글입니다. 지난 세월 동안 개발자들이 사용했던 HTML 꼼수 몇 가지를 설명한 글이에요.


---

HTML 꼼수가 필요한 이유

예전에는 브라우저나 언어의 제한적인 환경 때문에 원하는 기능을 구현하려면 꼼수가 필요했습니다. 그리고 각 브라우저 마다 환경이 달라서 같은 기능을 구현하려해도 꼼수가 필요한 경우도 허다했어요.


Netscape Navigator 4.0 @import - Netscape에서 지원하지 않는 CSS를 차단할 때 쓴 꼼수입니다. 당시 Netscape는 JSSS를 밀고 있었고 Netscape Navigator 4.0도 JSSS를 염두에 두고 개발되다가 W3C가 CSS를 채택하면서 급하게 CSS 기능을 개발했는데 이게 정말 못 쓸 정도였다고 해요. 그래서 개발자들이 Netscape Navigator에서 CSS 파일을 불러오지 않도록 사용한 꼼수였습니다


HTML table을 레이아웃으로 사용하기 - CSS가 만연하기 전에, 개발자들은 HTML table로 복잡한 레이아웃을 잡았습니다. 모든 브라우저에서 잘 작동했기 때문에 안 쓸 이유가 없었죠.


IE6에서 CSS 스타일 앞에 underscore 붙이기 - IE6에서 특정 스타일을 먹이기 위해 사용한 꼼수입니다. IE6은 당시 W3C에서 의도한 방향으로 스타일이 적용되지 않고, 요상하게 스타일이 먹혔는데 IE6에 특정 스타일을 적용 시킬 때 스타일 앞에 밑줄을 붙이면 됐습니다


투명 PNG 파일 렌더를 위해 사용한 AlphaImageLoader - 이 꼼수도 투명한 PNG 파일을 IE6에서 렌더하기 위해 사용했습니다


조건부 주석 - Microsoft에서 각기 다른 브라우저를 위해 조건부 주석으로 브라우저 특정 코드를 주입할 수 있도록 했습니다. 주로 IE의 다양한 버전에 맞게 코드를 짤 수 있도록 사용한 꼼수에요


sIFR - non-web-safe한 폰트를 사용할 수 있도록 한 꼼수였습니다. JS를 써서 텍스트를 Flash 엠베드로 치환하는 방식이었어요


Preheader 텍스트 꼼수 - 이메일에서 의도된 Preheader 텍스트 이후에 이상한 HTML 태그들을 사용해서 공백을 넣어 의도한 텍스트만 보이도록하는 꼼수입니다


Google Chrome Frame - IE6을 크롬 창으로 바꿔주는 브라우저 플러그인이었습니다. 사용자들에게 IE말고 크롬 사용을 부추기는 장치 역할을 했죠


Webkit-only Selector Hack - Webkit을 사용하는 브라우저에서만 돌아가는 CSS를 넣어서 브라우저가 Webkit을 사용하는 확인하는 꼼수였습니다


반응형 디자인 - 스마트폰 보급이 확산되면서 기존에 사용했던 HTML table로 구성한 레이아웃이 깨지기 시작했고 그때쯤 미디어 쿼리를 사용해서 반응형 디자인을 구현했어요. 당시 미디어 쿼리는 생소한 기능이었고 꼼수(?)라는 인식이 조금 있었습니다


처음 HTML이 나왔을 때 RSS 와 같은 기능을 지원하려고 한 걸로 알고 있는데, 자기의 디자인 감각을 뽐냈던 몇몇 개발자들이 이끌어간 HTML과 CSS의 발전은 신기하고 놀랍기만 합니다. 개발자들은 긴 시간 동안 다양한 꼼수들을 알게 모르게 사용해왔고 몇몇 꼼수들은 더 나은 개발 방식으로 이어지기도 했습니다.

---


원글: https://tedium.co/2023/11/24/weird-html-hacks-history

10 Weird HTML Hacks That Shaped The Internet

Tedium: The Dull Side of the Internet.

10 Weird HTML Hacks That Shaped The Internet

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 12월 28일 오후 6:48

댓글 0

    함께 읽은 게시물

    PM이 이해하면 좋은 지표 개념

    프로덕트 매니저(PM)로 일하면서 늘 지표 이야기를 듣게 됩니다. 대부분 PM은 선행지표(leading indicator)와 후행지표(lagging indicator)의 개념을 잘 이해하고 있습니다. 하지만 선행지표에 영향을 미치는 '인풋(input) 지표, '아웃풋(o

    ... 더 보기

     • 

    댓글 1 • 저장 37 • 조회 1,459


    < 서비스를 중독성 있게 만드는 결정적 원리 >

    1. 진통제이면서 비타민이어야 한다.

    ... 더 보기

    Longest Common Subsequence 자바스크립트 풀이

    ... 더 보기

    Longest Common Subsequence | 알고달레

    알고달레

    Longest Common Subsequence | 알고달레

    [광고] 다음 직무 채용 예정입니다.


    - 프러덕트/사업 기획 1인

    - 프러덕트 디자인 1인

    ... 더 보기

    ‘경영의 신’이란 칭호를 받은 마쓰시타 고노스케는 경영자가 가져야 할 가장 중요한 자질을 ‘인간에 대한 이해’라고 했다. 경영의 진짜 핵심을 찌른 이야기다. 경영이란 무엇인가? 한마디로 ‘사람을 움직여 가치를 창조하는 업(業)’이다.

    ... 더 보기

    [경영의 맥] 성공하는 CEO의 조건은 '인간에 대한 이해'

    한국경제

    [경영의 맥] 성공하는 CEO의 조건은 '인간에 대한 이해'

    하나부터 열까지 리더가 상세히 설명해 주기를 바라는 구성원이 있습니다. 반대로 큰 얼개만 듣고 나머지는 자율적으로 하고 싶어 하는 경우도 있죠. 회식에 참여하는 것을 너무나 힘겨워 하는 구성원이 있는 반면, 동료들과 함께 시간을 보내며 가까워지는 것을 원하는 구성원도 있습니다.

    ... 더 보기

    다양한 구성원을 하나로 모으고 싶다면 - 리더가 가져야 할 모순

    네이버 블로그 | HSG 휴먼솔루션그룹

    다양한 구성원을 하나로 모으고 싶다면 - 리더가 가져야 할 모순

     • 

    저장 5 • 조회 604