[HTML+CSS3] HTML이란?

일반문서 vs 웹문서

일반문서 : 내용을 입력하는 프로그램과 나중에 그 내용을 확인하는 프로그램 동일

웹문서 : 웹문서를 작성하는 프로그램(web editor), 웹문서를 보는 프로그램(web browser)

 

HTML 이란? (HyperText Markup Language)

'HyperText' : 웹 사이트에서 링크를 클릭해 다른 문서나 사이트로 즉시 이동할 수 있는 기능

'Markup' : 태그(tag)를 사용해 문서에서 어느 부분이 제목이고 본문인지, 어느부분이 사진이고 링크인지 표시하는 것

HTML : 웹에서 자유롭게 오갈 수 잇는 웹문서를 만드는 언어

 

웹표준 이란?

웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것

장소나 브라우저와 상관없이 쉽게 웹사이트를 볼 수 있고 웹 개발자와 디자이너들은 시간절약

 

HTML5 와 CSS3

- 최신 웹 표준에 맞는 웹사이트(HTML5) + 반응형 웹 디자인(접속하는 기기에 따라 레이아웃 바뀜)(CSS3) 제작 가능

- 앱 화면 디자인하기 위한 기초

- 소스를 이해해 웹 사이트와 블로그 수정 가능

 

웹브라우저와 웹 편집기

웹브라우저의 지원정도 -> http://HTML5test.com/에 접속 (555점 만점)

The HTML5 test - How well does your browser support HTML5?

 

웹편집기의 종류

텍스트 편집기	HTML 태그와 속성을 알고 있어야함, 오류 발생하기 쉬움 -윈도우의 메모장
웹 편집기	태그와 속성, 일반 텍스트, 등을 서로 다른색으로 표시해줌 -> 소스를 읽기 쉽고 편집기에 따라 속성의 일부만 입력하더라도 전체를 완성 - 윈도우에서 사용할 수 있는 편집기 : Notepad++,에디트 플러스,VisualStudio Code, Dreamweaver
통합개발환경(IDE)	웹 개발시, HTML, 자바스크립트, ASP.NET,PHP,등 여러 언어들을 함께 사용함 웹 IDE는 사용자에게 필요한 개발 환경을 한꺼번에 구축하고 사용할 수 있도록 해줌 - Visual Studio, Webstorm, Sublime Text, 등
웹 기반코드 편집기	소스코드를 입력하고 결과를 바로 확인할 수 잇는 편집기 웹 코딩을 위한 시스템 환경을 만들거나 별도의 편집기 프로그램을 이용하지 않고 브라우저 화면에 코드를 입력하고 결과를 볼 수 있음 팀작업에 유용 -Codepen, JSFiddle, Liveweave, Plunker 등

 

Visual Studio Code 이용하여 공부!

설치 -> http://code.visualstudio.com/ 

Visual Studio Code - Code Editing. Redefined

 라이버 서버(Live Server-Ritwick Dey) 확장 설치할 것