[HTML] '인터렉티브 웹 페이지 만들기'에서 소개한 프로젝트

인터렉티브 웹 페이지

인터렉티브 웹페이지란 사용자와 상호작용할 수 있는 웹페이지를 말합니다. 쉽게 말해, 사용자가 웹페이지에서 버튼을 클릭하거나 정보를 입력하는 등 다양한 방법으로 웹페이지와 소통할 수 있는 페이지를 의미합니다. 이런 웹페이지는 사용자의 행동에 따라 콘텐츠가 변경되거나 새로운 정보가 표시되는 것이 특징입니다. 이를 통해 사용자는 웹페이지를 보다 쉽게 이해하고 원하는 정보를 찾을 수 있습니다.

 

인터렉티브 웹 페이지 구성에 필요한 도구들

1. HTML (HyperText Markup Language): 웹페이지의 구조와 콘텐츠를 정의하는데 사용되는 마크업 언어입니다.
2. CSS (Cascading Style Sheets): 웹페이지의 디자인과 레이아웃을 꾸미는데 사용되는 스타일 시트 언어입니다. 색상, 폰트, 크기 등의 스타일을 조절할 수 있습니다.
3. JavaScript: 웹페이지에 동적인 기능을 추가하기 위한 프로그래밍 언어입니다. 사용자와 상호작용하거나, 페이지의 콘텐츠를 동적으로 변경하는 등의 기능을 구현할 수 있습니다.
4. 프레임워크 및 라이브러리: 웹 개발 작업을 더 효율적으로 진행하기 위한 도구로, 미리 작성된 코드 조각들을 제공합니다. 예를 들어, jQuery, React, Angular, Vue.js 등이 있습니다.
5. 웹 서버: 사용자의 요청을 처리하고 웹페이지의 콘텐츠를 전송하는데 사용되는 소프트웨어입니다. Apache, Nginx, Microsoft IIS 등의 웹 서버 소프트웨어가 있습니다.
6. 백엔드 프로그래밍 언어 및 프레임워크: 웹페이지와 데이터베이스 간의 상호작용을 처리하는 데 사용되는 서버 측 프로그래밍 언어 및 프레임워크입니다. PHP, Python (Django, Flask), Ruby (Ruby on Rails), Node.js (Express) 등이 있습니다.
7. 데이터베이스: 웹페이지에서 사용되는 데이터를 저장, 검색, 관리하는 시스템입니다. 관계형 데이터베이스(RDBMS)로 MySQL, PostgreSQL, Microsoft SQL Server 등이 있고, NoSQL 데이터베이스로 MongoDB, Cassandra 등이 있습니다.

책에서 소개하는 포트폴리오 8가지

1. 온라인 프로필 카드: HTML, CSS 기본 문법을 활용한 온라인 프로필 카드 만들기
2. 시맨틱 태그를 활용한 기본 홈페이지 만들기: 웹페이지를 구성할 때 HTML5의 시맨틱(의미론적) 태그를 사용하여 구조화하고 의미를 부여하는 방법입니다. 시맨틱 태그는 웹페이지의 내용이 어떤 의미를 가지고 있는지 명확하게 표현하고, 검색 엔진이 콘텐츠를 더 잘 이해할 수 있도록 돕습니다. 이를 통해 웹 접근성이 향상되고 검색 엔진 최적화(SEO)에 도움이 됩니다.
3. 마을 애니메이션 페이지: 애니메이션을 이용하여 자바스크립트 구문이 필요 없는 UI 모션 만들기
4. 파노라마 회사 소개 페이지: transform3D를 활용한 파노라마 UI와 자바스크립트로 모션 제어 만들기
5. flex 기반 동영상 웹 페이지: flex를 활용한 레이아웃 배치와 자바스크립트로 동영상 파일 제어하기
6. 뮤직 플레이어: flex를 활용한 레이아웃 배치와 자바스크립트로 음악 파일 제어하기
7. 핀터레스트 스타일의 반응형 웹 갤러리: float를 활용한 가변형 레이아웃 제작과 자바스크립트 함수 만들기
8. 스와이프 갤러리: 자바스크립트와 플러그인을 활용해 스와이프 페이지 제작하기