C
HTML/CSS 목록
이전1 / 11다음
HTML/CSS//Lesson 01

HTML은 누가 만들었는가

30분·theory

HTML은 누가 만들었는가

🎯 이 lesson 을 읽고 나면

이 lesson 을 다 읽고 나면 아래 3가지를 자신 있게 할 수 있습니다.

  • ▸✅ HTML (웹 페이지의 뼈대 마크업) · CSS (스타일 입히는 언어) 의 핵심 패턴
  • ▸✅ Tailwind (클래스 이름으로 CSS 를 빠르게 적용하는 도구) 와의 매핑
  • ▸✅ 접근성 (a11y · 누구나 쓸 수 있도록 만드는 것) · 반응형 (화면 크기에 맞춰 자동 조정) 적용 포인트

학습 목표를 체크리스트로 두고 다 답할 수 있게 되면 lesson 을 닫으세요.

👨‍💻 HTML/CSS 를 만든 사람들 — 6명 6컷

01
Tim Berners-Lee팀 버너스-리
Inventor of the WebCERN → MIT → W3C1955~현재

HTML·HTTP·URL 을 혼자 발명한 사람 — 인류 전체의 인프라를 만든 1989년

  • 1989 CERN 에서 "Information Management: A Proposal" 제안서 작성
  • 1990 세계 최초 웹 브라우저 WorldWideWeb + 첫 웹 서버 구동
  • 1994 W3C (World Wide Web Consortium) 설립, 초대 디렉터
  • 2004 대영제국 기사 작위 (Knight Commander)
  • 2017 Turing Award 수상 — 컴퓨터 과학 최고 영예
HTML·HTTP·URL — 인터넷이 아닌 "웹" 그 자체를 만든 사람INVENTOR OF WEB · 웹의 발명가
02
Marc Andreessen마크 앤드리슨
Creator of Mosaic & NetscapeUIUC → Netscape → a16z1971~현재

대중에게 웹을 보여준 첫 브라우저 — 인터넷 붐의 방아쇠를 당기다

  • 1993 일리노이대(UIUC) 학생 시절 NCSA Mosaic 개발 — 이미지 보이는 첫 브라우저
  • 1994 Netscape 공동 창업, Navigator 출시 — 시장 점유율 90% 돌파
  • 1995 Netscape IPO — 닷컴 버블의 시작점
  • 2009 Andreessen Horowitz (a16z) VC 설립 — Facebook·GitHub·Coinbase 투자
Mosaic·Netscape — "Software is eating the world" 의 산 증인BROWSER PIONEER · 대중 브라우저의 시작
03
Håkon Wium Lie호콘 비움 리
Inventor of CSSCERN → Opera Software1965~현재

"문서와 디자인을 분리하자" — 한 장의 제안서가 30년 웹 디자인을 만들었다

  • 1994 CERN 에서 "Cascading HTML Style Sheets" 제안 발표
  • 1996 CSS Level 1 W3C 공식 권고안 — Bert Bos 와 공동 표준화
  • 1999 Opera Software CTO 취임 — 웹 표준 운동 주도
  • 2006 오슬로대학 박사 학위 — CSS 가 학문 영역에 진입
CSS — 웹 디자인을 "문서 분리"라는 철학 위에 세운 사람CSS FATHER · CSS 의 창시자
04
Bert Bos베르트 보스
Co-creator of CSSW3C (네덜란드)1963~현재

CSS 의 또 다른 절반 — 20년간 표준 그룹 의장으로 디테일을 지켜낸 사람

  • 1995 Lie 의 CSS 제안에 합류, 공동 설계 시작
  • 1996 CSS 1 공식 권고안 공동 저자
  • 1998 CSS 2 발표 — 위치 지정·미디어 타입 추가
  • 2011 CSS Working Group 의장 (20년 이상 재직)
CSS WG — 거대해진 표준의 일관성을 지킨 보이지 않는 손CSS STANDARDS · 표준 그룹 의장
05
Ian Hickson이언 힉슨
HTML5 Specification EditorNetscape → Opera → Google1974~현재

XHTML 2.0 을 죽이고 HTML5 를 살린 사람 — WHATWG 단독 에디터 15년

  • 2004 WHATWG 공동 창립 — W3C 의 XHTML 2 노선에 반기
  • 2008 HTML5 첫 working draft 발표 (canvas·video·audio)
  • 2011 "HTML is the new HTML5" — 버전 번호 폐지, Living Standard 전환
  • 2014 HTML5 W3C 공식 권고안 GA — 10년 작업의 결실
HTML5 Living Standard — 오늘 우리가 쓰는 모든 시맨틱 태그HTML5 EDITOR · 명세 단독 작성자
06
Jen Simmons젠 시먼스
CSS Layout AdvocateMozilla → Apple (Safari/WebKit)현재 재직

CSS Grid 를 대중에게 가르친 사람 — 모던 CSS 레이아웃의 얼굴

  • 2016 Mozilla Designer Advocate — CSS Grid 교육 콘텐츠 시작
  • 2017 CSS Grid 전 브라우저 동시 출시 — Layout Land 유튜브 운영
  • 2020 Apple Safari/WebKit 팀 합류
  • 2023 Container Queries / subgrid 표준화 주도 — Safari 1급 지원
CSS Grid·Container Queries — 모던 반응형 디자인의 표준 도구MODERN CSS · 현대 레이아웃의 전도사
👥
한 줄
Berners-Lee(1989 웹 창시) → Andreessen(1993 브라우저) → Lie·Bos(1996 CSS) → Hickson(2014 HTML5) → Simmons(2017+ 모던 CSS). 30년을 만든 6명.

HTML/CSS — *모든 UI 의 알파벳*

핵심 한 줄

HTML (HyperText Markup Language · 웹 페이지의 구조·뼈대를 표시하는 언어) 과 CSS (Cascading Style Sheets · 색·크기·배치 같은 스타일을 입히는 언어) 는 웹의 알파벳 입니다. React·Vue·Svelte 같은 모든 프레임워크가 결국 HTML/CSS 로 변환되어 화면에 그려집니다. 이 두 가지를 모르면 모든 UI 개발이 짐작 으로 됩니다.

30년 진화

  • ▸1990 — 팀 버너스리, 첫 HTML
  • ▸1996 — CSS1 표준
  • ▸2014 — HTML5 + CSS3 표준화 (시맨틱 마크업 (태그가 의미를 가짐) · Flexbox (한 줄 배치 도구) · 미디어 쿼리 (화면 크기별로 스타일 다르게 적용))
  • ▸2017 — CSS Grid (격자판으로 화면을 나누는 도구)
  • ▸2023 — Container Queries (부모 컨테이너 크기에 따라 스타일 변경), :has() (자식 요소를 가진 부모를 골라내는 선택자)

지금까지 호환성을 유지 하면서 발전. 1995년 코드가 지금도 거의 동작합니다.

왜 지금도 필요한가

> "React 만 알면 되지 않나요?"

React 는 결국 HTML/CSS 를 만듭니다. 다음 셋 중 하나만 부족해도 개발 막힘:

1. 시맨틱 HTML (div 가 아닌 article·nav 처럼 의미가 있는 태그) 모르면 — SEO (검색엔진 노출) ·접근성 망함
2. CSS 박스 모델·Flexbox·Grid 모르면 — 레이아웃이 짐작 으로
3. 반응형 (화면 크기별 자동 조정) 모르면 — 모바일 사용자 60% 잃음

> 💡 HTML/CSS 기본기 를 진짜로 안다 는 것은 모든 프론트엔드 개발의 출발점.

이 카테고리에서 배우는 것

  • ▸HTML 시맨틱 구조 (head·body·시맨틱 태그)
  • ▸폼 입력 표준
  • ▸CSS 선택자·명시도
  • ▸박스 모델 (가장 헷갈리는 부분)
  • ▸Flexbox·Grid (현대 레이아웃)
  • ▸반응형 (미디어 쿼리)

이걸 다 알면 React·Vue 도 자연스럽게 익혀집니다.

왜 HTML/CSS가 모든 UI의 기반인가

한 줄: 웹·모바일 앱·전자메일·문서 — 모두 HTML/CSS 위에. 30년 진화한 UI 표준 언어.

도구 매핑 — 각 칸의 영어는 도구 이름일 뿐, 옆 설명만 보세요

영역표준
마크업 구조HTML5 (Semantic) (의미가 있는 태그로 페이지 구조 표현)
스타일CSS3 + Custom Properties (변수처럼 색·크기 재사용)
레이아웃Flexbox · Grid (한 줄·격자판으로 자동 배치)
반응형미디어 쿼리 · Container Queries (화면·컨테이너 크기에 따라 스타일 변경)
디자인 시스템Tailwind · CSS Modules (클래스 이름으로 스타일 빠르게 적용)
접근성ARIA · WCAG (스크린리더 등 보조 기술 호환 표준)

5가지 핵심 이유

이유의미
시맨틱 HTML (의미 있는 태그)<article>·<nav> — 스크린리더·SEO·AI 인식 모두 향상
Flexbox/Grid (자동 배치 도구)손으로 픽셀 계산 X. 선언만으로 반응형 레이아웃
Custom Property (CSS 변수)--brand-color 한 줄로 테마 전환
반응형 디자인모바일·태블릿·데스크탑 한 코드로
접근성 (a11y · 누구나 쓸 수 있게)시각·청각·운동 장애 사용자에게도 동작
Core Web Vitals (구글이 정한 페이지 체감 속도 지표)LCP·CLS·INP — 검색 순위·UX 직결

핵심: HTML/CSS 모르면 React·Vue 도 이상한 div 무더기. UI 개발의 알파벳.

🤖 AI 에게 이렇게 요청해보세요

이 lesson 의 개념을 알면 AI 에게 구체적으로 지시할 수 있습니다. 막연한 "고쳐줘" 가 아니라 어휘를 가진 요청 — 그게 토큰(AI 가 한 번에 처리하는 글자 단위) 절약의 출발점입니다.

  • ▸"이 HTML/CSS 에 시맨틱 마크업 (의미 있는 태그 사용) 개념을 적용해 리팩토링(같은 동작·더 깔끔한 구조) 해줘"
  • ▸"이 페이지의 접근성 (a11y) · SEO (검색엔진 노출) 점검해줘"
  • ▸"Tailwind (클래스 이름으로 CSS 빠르게 적용) 클래스로 같은 결과 만들어줘"

왜 이게 토큰을 줄이나

개념을 모를 땐 AI 답변을 받고도 "그게 뭐예요?" 를 다시 물어야 합니다. 그 "다시 물음" 이 토큰을 잡아먹습니다. 개념 한 번 익혀두면 대화가 한 번에 끝납니다.

먼저 읽으면 좋은 개념: DB 고급 — 복제·샤딩·캐시·커넥션풀·파티셔닝
다음 추천: HTML이란?
이전목록다음
HTML/CSS 기초 - HTML/CSS