Html5+CSS3 시작!

책은 학교에있는 "HTML5+CSS3 실무 테크닉" 책으로 공부하였다.

예제 파일 : http://www.cyber.co.kr

<--HTML5 소개-->

HTML5는 웹 문서를 만들기 위한 기본 프로그래밍 언어 HTML의 최신 기술이고 현재 웹 개발에 많이 사용되는 언어 이다.

<--HTML5 주요 기능-->

주요 기능	설명
비디오/오디오	자체적으로 비디오 및 오디오 지원
웹 폼	사용자의 정보를 입력받기 위해 사용되는 다양한 형태의 인터페이스 지원
CSS3	다양한 스타일 및 효과 제공
시멘틱	웹 문서의 내용이 의미를 가질 수 있도록 시멘틱 태그를 추가하고, 이를 토앻 웹 문서의 효율적인 검색이 가능하도록 지원
캔버스	캔버스 기능을 이용하여 그래프,차트,2D,3D 객체 등과 같은 복잡한 이미지를 처리하도록 지원
장치 제어	별도의 플러그인 및 프로그램 설치 없이 장치를 제어할 수 있도록 지원
오프라인 웹 애플리케이션  및 로컬 저장소	인터넷이 연결되어 있지 않은 경우에도 웹 애플리케이션이 정상적으로 수행될 수 있도록 지원
위치 정보	사용자의 지리적 위치 정보를 제공하도록 지원

<--CSS3 소개-->

HTML5만 하면 웹이 멋져보이지 않지만 CSS3를 적용하면 더 자연스러워지고 멋지게 만들 수 있다.

<--CSS 개념-->

HTML에 다양한 모양을 추가하거나 변경하여 웹 사이트에 통일감을 부여하고 글자 크기나 모양, 줄 간격, 배경 색상 등을 자유롭게 제어할 수 있도록 한 것이 바로 CSS이다

<--CSS3 주요 기능-->

주요 기능	설명
selector	사용자 정의 형태를 추가
box	박스에 관련된 속성을 지정
background, border	배경 이미지와 테두리에 관련된 속성을 지정
텍스트 효과	텍스트 효과에 관련된 속성을 지정
2D & 3D	위치와 모양에 관련된 속성을 지정
애니매이션	애니메이션 효과에 관련된 속성을 지정
멀티 컬럼 레이아웃	여러 개의 컬럼 레이아웃 속성을 지정
사용자 인터페이스	사용자 인터페이스에 관련된 속성을 지정

<--Java Script 소개-->

CSS가 모양이라면, JavaScript는 HTML을 동적으로 움직일 수 있개 하는 기능을 담당한다.

<--Web문서 작성 시 지켜야할 규칙-->

1.웹 문서에서 블록의 의미를 알 수 있는 태그를 사용하여 블록을 묶어준다. 대표적인 예로는 header, footer, nav, section등이 있다.

2.웹 문서의 제목에는 <h1>~<h6>태그를 사용한다.

3.HTML태그 내에 모양을 위해 사용하던 속성은 모두 CSS로 표현한다. 글자 크기,색상, 배경 등에서 사용하던 요소들이 이에 해당한다.

4.웹 문서의 모양을 표현하는 것들은 모두 CSS 문서에 작성하고, HTML문서와 CSS 문서는 반드시 분리해야 한다. 그래야만 추후 웹 문서를 수정하기가 수얼하다. 예를 들어 웹 문서 100개의 글자 색상을 바꿔야 한다고 가정했을 때, CSS 문서가 분리되어 있지 않다면 100개의 HTML문서를 모두열어 수정해야 하지만, 분리되어 있다면 CSS문서 하나만 열어 수정하면 우리가 원하는 작업을 간단히 끝낼 수 있기 때문이다.

5.웹 문서의 액션을 담당하는 JavaScript에서 공통으로 사용되는 기능은 웹 문서 내에 작성하지 않고 공통 JavaScript파일을 만들어 반드시 분리해야 된다.

<--Web IDE-->

웹의 IDE (개발 툴)로는 대표적으로 웹 스톰과 서브라임텍스트등이 있다.

서브라임텍스트3 : http://www.sublimetext.com/3 

웹 스톰 : https://www.jetbrains.com/webstorm/