HTML5와 CSS3의 ES6의 변화 정리

웹 개발 언어 3요소

HTML, CSS, JS은 웹개발에서 뗄레야 뗄수없는 언어들이다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어이고, CSS는 웹 페이지의 디자인과 레이아웃을 정의하는 스타일 시트 언어이다. 마지막으로 JS는 웹 페이지를 동적으로 만들고 상호작용 가능하게 하는 스크립트 언어이다.

그렇다면 각각의 확장된 버전인 HTML5, CSS3, ES6에서 어떠한 발전과 변화가 일어났는지 살펴보자.

HTML5

• 시멘틱 요소의 변화: <header>, <nav>, <footer>, <article>, <section> 등의 의미론적인 시멘틱 태그 요소들이 추가되어 웹 페이지의 구조와 콘텐츠를 명확하게 표현할 수 있다.
• 멀티미디어 지원: 비디오와 오디오를 통합으로 지원해 <video>, <audio>요소가 사용이 가능해져, 멀티미디어 콘텐츠를 페이지에 쉽게 삽입이 가능하다.
• Canvas 그래픽: <canvas>요소를 사용하여 JavaScript와 함께 그래픽을 그릴 수 있다. 이를 활용하여 게임, 데이터 시각화, 그래픽 편집 등 다양한 그래픽 콘텐츠를 구현할 수 있다.
• 웹 스토리지 적용: 웹 페이지에서 로컬 스토리지를 통해 영구적으로 데이터를 저장해 브라우저를 종료하고 다시 실행해도 데이터가 유지된다. 세션스토리지를 사용하면 브라우저를 닫을 때 데이터가 삭제된다.
• 웹 소켓사용: HTML5는 웹 페이지와 웹 서버 간의 양방향 통신을 지원하는 웹 소켓을 도입해, 실시간 상호작용(실시간 채팅, 온라인게임)을 구현하는 데 유용하게 쓰인다.

CSS3

• 그리드 레이아웃: CSS3에서 도입된 그리드 레이아웃은 웹 페이지의 복잡한 레이아웃을 구축하는 데 매우 유용한 기능이다. 열과 행의 그리드를 생성하여 유연하고 복잡한 레이아웃을 정렬할 수 있다.
  (사용 예시: display: grid; grid-template-columns: 200px 1fr;)
• 플렉스 박스 레이아웃: Flexbox는 요소들을 유연하게 정렬하고 배치할 수 있는 기능을 제공한다. 이를 통해 복잡한 레이아웃을 더 쉽게 다룰 수 있으며, 다양한 화면 크기와 디바이스에 대한 반응형 디자인을 구현할 수 있다.
  display: flex; justify-content: center; align-items: center;
• 트랜지션과 애니메이션: CSS3는 요소의 상태 변화에 따른 트랜지션(전환)과 CSS 속성을 활용한 애니메이션을 지원해 웹 요소의 동작을 부드럽게 제어하고 애니메이션 효과를 추가할 수 있다.
• 다중 배경 이미지: 하나의 요소에 여러 개의 배경 이미지를 지정할 수 있는 다중 배경 이미지 기능이 도입되어 요소의 배경을 더 복잡하게 구성할 수 있습니다.
• 글꼴 아이콘: CSS3에서는 아이콘을 폰트 형태로 표현하는 글꼴 아이콘 기능을 제공합니다. 이를 활용하여 벡터 기반의 아이콘을 사용하고 스타일링할 수 있습니다.
  (폰트어썸의 벡터기반 아이콘 예시: <i class="fas fa-heart icon"></i>)

ES6

ES6는 JavaScript의 표준 규격으로 도입된 중요한 업데이트이다. ES6는 코드의 유지보수성과 가독성을 향상시키는 데 큰 역할을 했고, 이후의 ECMAScript(스크립트 언어 규격) 업데이트들도 ES6를 기반으로 하여 JavaScript 언어를 지속적으로 발전중이다. ES6에 도입된 주요 변화는 다음과 같다.

• 변수선언: var 외에도 let, const를 사용해 블록 범위의 변수 선언이 가능해졌다. let은 변수 재할당 가능, const는 불가능하다.
• 화살표함수: 더 간결한 문법으로 함수를 정의가 가능해졌다.(function(){}에서() => {}사용)
• 클래스 문법: 클래스 문법을 도입해 객체 지향 프로그래밍을 명확하고 구조하된 형태로 작성할 수 있게 되었다.
• 모듈: 모듈 시스템을 통해 파일 간의 코드를 모듈화하고 재사용 가능한 구조를 만들 수 있게 되었다. (import와 export 키워드로 모듈을 가져오고 내보내기 가능)
• 템플릿 리터럴: 템플릿 리터럴(${}) 을 통해 변수나 표현식을 문자열 내에 삽입할 수 있다.
• 디스트럭처링: 배열이나 객체 값을 추출해 변수에 할당하는 문법이 추가되었다.
  const [a, b] = [1, 2]; // 배열 디스트럭처링
const person = { firstName: "John", lastName: "Doe" }; // 객체 디스트럭처링
const { firstName, lastName } = person;
• 기본 매개변수: 함수의 매개변수에 기본 값을 설정할 수 있는 기능이 추가되었다.
  const addTwoNumber (a, b=1) => a+b
• 비동기 작업 수행: Promise 객체가 도입되어 비동기 코드의 관리와 에러핸들링이 개선되었다. 또한 sync,await를 통해 비동기함수 선언과 비동기 함수 내에 비동기작업을 기다리는 기능이 추가 되었다.
  const getData = Promise((resolve, reject) => {resolve(100)}
getData().then((resolvedData) => {console.log(resolvedData)} // 100 출력
• 전개연산자: ...을 사용해 매개변수와 전개 연산자를 통해 배열, 객체를 편리하게 다룰 수 있다.
  const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]