[Frontend] HTML5, CSS3 & JavaScript
Chapter #1 개요
Section 1. 알아보자!
#1 HTML
: HyperText Markup Language
: 웹 페이지를 작성할 때 사용하는 프로그래밍 언어
: 웹 페이지의 구조를 <html>,<head>,<body>,<p> 등의 태그를 사용해서 표현
#2 CSS
: Cascading Style Sheets
: HTML 웹 페이지를 웹 브라우저에 표현하는 방법을 제공 → HTML 태그를 어떤 형태로 표현할지 결정
: HTML 태그에 CSS 코드를 적용해서 웹 페이지를 표현
#3 JavaScript
: 웹 브라우저에서 동작하는 프로그래밍 언어로 주로 태그 등을 클릭해서 어떤 동작을 처리할 때 사용
: jQuery → 자바스크립트를 간결하고 쉽게 사용할 수 있게 제공되는 라이브러리
Section 2. 사용처
#1 웹 사이트 작성
반응형 웹 사이트
• 웹 사이트가 표시되는 화면의 크기에 따라 사이트의 표현 구조가 자동으로 변경되는 웹 페이지
• 1개의 사이트만 만들어서 자동으로 화면 크기에 따라 최적으로 표현
⇒ 다양한 화면 크기에 대응하는 각각의 웹 사이트를 만들 필요가 없어져서 개발비용이 단축, 유지보수가 간편해짐
#2 게임 작성
HTML의 태그와 자바스크립트를 사용한 HTML5 기반의 게임도 다양하게 선보이기 시작
→ 웹 기반으로 스마트 기기의 운영체제에 상관없이 실행되는 장점, 과거 Flash 프로그램을 사용해서 만들어졌던 게임들을 대체
#3 인공지능 프로그래밍
• Deep Learning 라이브러리인 텐서플로가 자바스크립트 라이브러리로 제공되어 HTML 기반에서 머신러닝/딥러닝 프로그래밍이 가능
Chapter #2 코드를 작성하고 실행하는 개발 환경 설정
Section 1. Java, Tomcat, Eclipse 기반의 웹 개발 환경
개발 환경 작성 순서
1. JDK Download, 설치 및 환경 변수 설정
2. Tomcat Download, 설치 및 환경 변수 설정
✴︎ 웹 애플리케이션을 서비스하려면 웹 서버가 필요
✴︎ 웹 서버와 웹 애플리케이션 서버를 각각 설치하는 이유 : 웹 사이트 성능 향상을 위해
3. Eclipse Download, 설치 및 실행
4. Eclipse에서 웹 애플리케이션 작성
✴︎ Eclipse에서 작성한 웹 프로젝트는 웹 애플리케이션으로 웹 사이트나 게시판 등도 모두 웹 애플리케이션
✴︎ 웹 서버, 동적 웹 프로젝트, 웹 페이지 순서로 제작
✴︎ 웹 서버 : 한번만 만듬 / 동적 웹 프로젝트 : 웹 사이트 1개당 1개 / 웹 페이지 : 필요한 만큼
Section 2. 클라우드 기반의 코드 학습 및 테스트 사이트를 사용한 웹 프로그래밍
학습에 유용한 사이트
1. w3schools.com
2. jsbin.com