AI 요약관련 정보

• 초기 웹 개발 (2000년대 초): 레이아웃을 위해 <table> 태그를 사용했으며, 여러 열을 배치하는 유일한 방법이었습니다. 🧱
• 스타일링의 한계: 둥근 모서리, 그림자, 그라데이션 등은 대부분 포토샵으로 이미지를 잘라 사용했습니다. 🖼️
• 폰트 제약: 사용자 컴퓨터에 설치된 폰트만 사용 가능했으며, 커스텀 폰트는 sIFR(Flash 기반) 같은 복잡한 해킹이나 이미지로 처리했습니다. ✒️
• JavaScript의 어려움: 브라우저 간 호환성 문제로 jQuery가 필수적이었고, 기본적인 DOM 조작도 라이브러리에 의존했습니다. 🧩
• CSS Floats 시대 (2000년대 후반): 레이아웃을 위해 float 속성을 사용했지만, 원래 목적과 달라 "clearfix" 같은 해킹이 필요했습니다. 🌊
• 빌드 도구의 등장 (2010년대 중반): 개발자 요구사항과 브라우저 기능 간의 격차로 인해 Sass, Babel, Webpack 등 복잡한 빌드 도구 생태계가 폭발적으로 성장했습니다. 🛠️
• 빌드 도구 필요성: ES6 미지원, CSS 변수/네스팅/함수 미지원, HTTP 1.1의 파일 전송 비효율성(번들링 필수)이 주요 원인이었습니다. 📉
• 현대 웹 개발 (현재): 브라우저가 ES 모듈, Import Maps, CSS 네스팅, 변수, 컬러 함수 등 대부분의 최신 기능을 기본 지원합니다. 🚀
• "No Build" 접근 방식: HTTP/2, HTTP/3 덕분에 번들링이 필수가 아니며, 빌드 도구 없이도 효율적인 개발이 가능해졌습니다. 💡
• 향상된 브라우저 기능: SVG 지원, 이미지 지연 로딩(lazy loading), WEBP 같은 최신 이미지 포맷 지원 등 다양한 기능이 내장되어 있습니다. ✨