HTML

HTML HyperText Markup Language의 약자로, 마크업 언어입니다.
웹 페이지의 구조와 콘텐츠를 정의하는데 사용되며, 웹 페이지를 브라우저에서 표시할 때 사용됩니다.
웹 페이지에 있는 텍스트, 이미지, 링크, 비디오 등의 요소를 구조화하고 레이아웃을 정의합니다.

HTML5에서 추가된 새로운 기능

HTML5에서는 여러 가지 새로운 요소와 기능이 추가되었습니다.

• 시멘틱 요소가 추가되었습니다. 예를 들어 header,nav, article, section, footer가 있습니다.
• 비디오와 오디오 태그 video와 audio 태그를 사용하여 비디오와 오디오를 쉽게 재생할 수 있습니다.
• 폼 관련 개선 ( 새로운 폼 요소들이 추가되어, 폼 요소들의 속성과 이벤트들이 개선되었습니다. )
• 캔버스와 SVG canvas와 svg 태그를 사용하여 그래픽과 애니메이션을 만들 수 있습니다.
• 웹 저장소 (Web Storage) : 로컬 저장소와 세션 저장소를 지원합니다. 이를 이용하여 브라우저 내에서 데이터를 저장하고 사용할 수 있습니다.
• 웹 서비스를 개발 할 때 사용하는 localStorage와 sessionStorage 는 HTML5에서 지원하는 기능 중 하나인 Web Storage API의 의 일종이다.
• 웹 워커 (Web Worker) : 웹 워커를 사용하면 백그라운드에서 스크립트를 실행하여 웹 페이지의 성능을 향상시킬 수 있다.
  • 기존의 자바스크립트는 싱글 스레드로 실행되기 때문에, 여러 가지 작업을 동시에 처리하려면 비동기 처리를 해야했다. 하지만 이 비동기 처리는 복잡하고 어려운 방식이라 웹 워커가 이 처리를 쉽게 할 수 있도록 도와줍니다.
  • 메인 스레드와 별도로 동작하며, 브라우저에서 백그라운드에서 스크립트를 실행할 수 있게 한다. 웹 워커는 병렬로 작업을 처리하기 때문에 여러 개의 웹 워커를 사용하면 더 빠르게 처리할 수 있다.
  • 주로 대용량의 데이터 처리나 복잡한 계산, 그리고 이미지 처리에 사용된다.
• 미디어 쿼리
• 웹 폰트
• 드래그 앤 드롭

CSS

CSS는 Cascading Style Sheets의 약자로, 웹 페이지의 스타일을 정의하는 언어입니다.
HTML과 함께 사용되며, HTML 요소들의 스타일으 정의하는데 사용됩니다.

CSS3에서 추가된 새로운 기능

• 그리드 레이아웃
• 플렉스 박스
• 다단 Drop Cap
  • 텍스트의 첫 글자를 크게 만들 어 다단의 시작 부분을 장식할 수 있습니다.
• 그림자
• Transform
• 새로운 셀렉터
  • :not(), :nth-child(), :first-child()
• 애니메이션과 트랜지션 같은 기능

JavaScript

개념

• 객체 기반의 동적 프로그래밍 언어
• 주로 웹 페이지를 동적으로 제어하는 데에 사용
• 브라우저에서 실행되며 HTML 문서와 함께 사용하여 웹 페이지를 만들고 상호작용하는 기능을 추가할 수 있음

특징

• 가볍고 빠름
• 동적 타이핑 (변수의 타입을 런타임 시점에 결정)
• 함수형 프로그래밍과 객체지향 프로그래밍 모두 지원

ES6에서 추가된 내용

• let, const 키워드 추가
• 화살표 함수 (Arrow function) 추가
• 템플릿 리터럴 (Template literal) 추가
• 클래스 (Class) 추가
• 모듈 (Module) 추가
• Async/Await 추가
• for...of 추가
• 객체 리터럴 (Object literal) 추가

ES6

개념

• ECMAScript 2015의 준말로, JavaScript의 버전 업그레이드
• 가독성이 좋고 코드의 양을 줄일 수 있는 새로운 기능들을 제공

주요 기능

let, const

• 블록 레벨 스코프 변수 선언
• let은 재할당이 가능하고 const는 재할당이 불가능

화살표 함수

• 함수를 간결하게 작성할 수 있음
• this, arguments 등의 바인딩을 가지지 않음

템플릿 리터럴

• 문자열을 보다 쉽게 다룰 수 있음
• 백틱(``)으로 감싸고 ${}를 사용하여 변수나 표현식을 삽입할 수 있음

클래스

• 클래스 기반 객체 지향 프로그래밍 지원
• 생성자, 상속 등의 기능 제공

모듈

• 파일 단위로 모듈화할 수 있음
• import, export 키워드로 모듈을 가져오거나 내보낼 수 있음

Promise, Async/Await

• 비동기 처리를 더욱 쉽게 작성할 수 있음

for...of

• for...in과 달리, 배열 등의 컬렉션 객체에 대한 반복문에서 요소의 값을 반환할 수 있음

객체 리터럴

• 객체를 보다 쉽게 작성할 수 있음
• 변수를 속성 이름으로 사용 가능