Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

Flash 시대의 끝, HTML5와 Flexbox로 웹 개발의 미래를 준비하는 방법

Flash는 이제 수동으로만 사용 가능

과거에는 브라우저에 기본 탑재되어 있던 Flash 플러그인은, 현재는 사용자가 브라우저 설정에서 직접 활성화해야만 사용할 수 있습니다. 나아가 2020년 12월 31일부로 어도비(Adobe)가 공식적으로 Flash 지원을 종료하면서, Flash 기반 콘텐츠는 사실상 역사 속으로 사라졌습니다. 따라서 기존 Flash 콘텐츠를 운영하고 있다면 다른 기술로의 전환을 서두르는 것이 좋습니다.

HTML5와 Flex가 열어갈 웹의 미래

웹 개발의 미래는 단연코 HTML5와 Flex입니다. 두 기술은 플러그인 없이도 풍부한 사용자 경험을 제공하며, 데스크톱과 모바일을 아우르는 반응형 웹 구현의 핵심으로 자리 잡았습니다.

HTML5란 무엇인가?

HTML5는 W3C(World Wide Web Consortium, 월드 와이드 웹 컨소시엄)와 WHATWG(Web Hypertext Application Technology Working Group, 웹 하이퍼텍스트 응용 기술 작업 그룹)가 협력하여 제정한 최신 웹 표준입니다. 비디오·오디오 재생부터 캔버스 그래픽, 오프라인 저장까지 다양한 기능을 플러그인 도움 없이 네이티브하게 처리할 수 있는 것이 특징입니다.

주요 브라우저의 HTML5 지원 현황

Apple Safari, Google Chrome, Mozilla Firefox, Opera의 최신 버전은 대부분의 HTML5 기능을 지원하며, Internet Explorer 11 역시 HTML5 기능을 상당 부분 지원합니다.

특히 모바일 환경에서의 지원 수준도 매우 뛰어납니다. iPhone, iPad, 안드로이드 스마트폰에 기본 탑재된 모바일 브라우저들은 HTML5를 폭넓게 지원하기 때문에, 별도의 앱 없이도 모바일 웹에서 풍부한 콘텐츠를 제공할 수 있습니다.

CSS3 Flexbox(Flexible Box)란?

Flexbox는 CSS3에 도입된 레이아웃 모드로, 복잡한 애플리케이션과 웹 페이지의 레이아웃을 손쉽게 구성할 수 있게 해줍니다. 요소의 방향(direction), 정렬(alignment), 순서(order), 크기(size)를 유연하고 정밀하게 제어할 수 있다는 점이 가장 큰 강점입니다. 덕분에 과거에는 복잡한 float나 포지셔닝 기법이 필요했던 레이아웃도 간결한 코드로 구현할 수 있습니다.

Flexbox를 지원하는 브라우저

  • Chrome 29 이상
  • Firefox 28 이상
  • Internet Explorer 11 이상
  • Opera 17 이상
  • Safari 6.1 이상
  • Android 4.4 이상
  • iOS 7.1 이상

위 버전 이상의 브라우저에서는 Flexbox를 안정적으로 활용할 수 있으므로, 신규 프로젝트에서는 Flexbox 기반 레이아웃을 적극적으로 도입해 보시기 바랍니다.