웬 표준 개요

웹 표준 기술

• 현대 웹 페이지에 사용되는 표준 기술은 HTML5 표준, CSS3 표준, ECMAScript 표준
• HTML5 : 웹 페이지 구성 -> <input type = "button">
• CSS3 : 스타일 적용 -> color : black
• 자바스크립트 : 사용자 반응 처리 -> const onClick = ~~~;

HTML5

• 큰 의미로 CSS3와 자바스크립트를 모두 포함하는 웹 표준 기술을 총칭.
• 작은 의미로 웹 페이지를 구성하는 HTML 마크업 언어 자체.
• 마크업(markup) : 웹 페이지의 서식이나 구조를 표현하는 정보.

CSS3(Cascading Style Sheets)

• HTML 페이지에 스타일 지정하는 스타일 시트를 작성할 때 사용하는 언어.
• 단순한 웹 문서에 스타일 시트를 적용해야 익숙한 메인 페이지로 완성됨.

자바스크립트

• HTML 페이지에 사용자 반응 등을 처리하는 스크립트를 작성하는 언어.
• ECMA(유럽 컴퓨터 제조 협회)에서 ECMAScript 표준을 만들었고, 이후 자바스크립트의 표준 명칭은 ECMAScript가 됨.
• 움직이는 웹 페이지를 만들거나 사용자 반응을 처리할 수 있음.
• 클라이언트 웹 개발을 위해 만들어졌지만 서버 개발, 로봇 개발에도 사용됨.

HTML5 주요 기능

• 멀티미디어 : 플러그인 없이 음악, 동영상을 재생할 수 있게 됨.
• 그래픽 : 하드웨어의 가속을 받아 2차원, 3차원 그래픽을 구현할 수 있음.
  • 2차원 그래픽 구현 방법
    1. HTML 태그를 사용해 2차원 벡터 그래픽을 구현.
    2. 자바스크립트 캔버스를 사용해 2차원 래스터 그래픽 구현.
  • 3차원 그래픽 구현 방법
    1. CSS3를 사용해 3차원 그래픽 구현.
    2. 자바스크립트 WebGL을 사용해 3차원 그래픽 구현.
• 통신 : 서버와 소켓 통신을 할 수 있음.
  • 서버와 실시간으로  쌍방향 통신하여 웹에서 실시간 채팅, 온라인 게임 가능.
• 장치 접근
  • 장치 정보(배터리 잔량, 현재 위치) 가져오거나 장치 기능(알람 등)을 사용.
• 오프라인 및 저장소
  • 인터넷이 연결되지 않은 상태에서도 응용 프로그램을 동작시킴.
  • 크롬OS : 구글에서 리눅스와 크롬 기반으로 만든 운영체제(HTML5 기반 프로그램을 중심으로 사용하는 운영체제)
• 시맨틱
  • HTML5 표준에서는 시맨틱 태그를 새로 추가.
  • 시맨틱 웹(Semantic Web) : 검색 엔진 같은 프로그램이 정보를 분석하고 자료를 검색하고 처리해서 제공하는 지능형 웹.
• CSS3 스타일 시트 : CSS3 스타일 시트를 완벽하게 지원
  • 3차원 변환, 애니메이션 효과를 적용할 수 있음.
• 웹의 성능 극대화 및 통합
  • 웹 워커를 이용하면 사용자 화면은 멈추지 않으면서 연산 처리할 수 있음.
• 요약 및 결론
  • HTML5는 다양한 기능을 추가하면서 일반 데스크톱 응용 프로그램을 만들 수 있을 정도로 발전.
  • HTML5 표준을 적용한 웹 브라우저를 통해 간단한 워드 작업을 하거나 게임을 즐길 수 있음.

HTML5 개발

• 장치마다 운영체제가 달라도 웹에서 작동하는 프로그램은 모든 장치에서 사용할 수 있음.
• 애플리케이션 수준의 웹 페이지를 만들 수 있음.
  • 예를 들면, 다음 금융과 네이버 뉴스의 모바일 웹 페이지는 일반 애플리케이션처럼 동작.
• 데스크톱 애플리케이션을 만들 수 있음.
  • 일렉트론 : HTML5 기반의 데스크톱 애플리케이션 개발 엔진
  • 마이크로소프트에서 스카이프, 비주얼 스튜디오 코드 개발에 사용.
  • 깃허브, 디스코드, 슬랙, 고스트, 워드프레스에서도 데스크톱 애플리케이션 만들 때 일렉트론을 활용함.
• 리액트 네이티브를 사용해 모바일 애플리케이션을 만들 수 있음.
  • 리액트 네이티브 : HTML5로 개발했을 때 내부적으로 안드로이드와 아이폰에 맞는 네이티브 코드로 변환되어 폰갭의 성능 문제를 해결.
• 크로스 플랫폼 개발 : 한번 개발해서 여러 장치(플랫폼)에 대응.