일반문서 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?

The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. How well does your browser support HTML5?

html5test.com

 

웹편집기의 종류

텍스트 편집기

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

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

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

 

 

+ Recent posts