0. HTML 개요
1) HTML과 웹 브라우저
✔ HTML 로 작성된 언어
- .html 의 확장명을 갖는다. (ex. .pdf, .hwp ...)
- 웹 브라우저는 .html 확장자를 실행할 수 있다.
웹브라우저 : 크롬, 엣지, 익스플로러, 사파리...
html을 보여주는 단순 뷰어 뿐만아닌 웹페이지 분석 가능한 개발 도구를 제공한다.
✔ HTML(HyperText Markup Language)
- Programing Language : 데이터를 가공 또는 명령
- Markup Language : 데이터를 어떻게 표현할지, 보여질지 정의
2) HTML, CSS and JavaScript
- HTML : markup, 설계 등 웹 페이지의 골격 및 구조
- CSS : 요소의 레이아웃, 스타일링
- JavaScript : 동적인 요소, 사용자와의 인터랙션
여러 파일들을 하나의 파일에 연결할 경우, 수정 및 관리가 용이하다.(ex. 반응형 페이지)
3) 웹 표준과 웹 접근성, 호환성
✔ Web Standard(웹 표준)
- 동일한 html도 웹 브라우저에 따라 조금씩 다름.
- 2014년 W3C에서 HTML5가 공식 표준화 됨.
- 2019년 WHATWG에 의해 HTML Living Standard가 표준화 됨.
- 표준화 되기 전 : 독자적인 플러그인이 존재 했었음.
- 웹표준 준수하여 작성 : 운영체제, 브라우저마다 의도된 대로 표현 가능.
✔ Web accessibility(웹 접근성)
- 모든 사람이 웹 사이트를 이용할 수 있게 하는 방식.
- 사이트가 올바르게 설계되어 개발되고 편집되어 있을 때 정보와 기능에 동등하게 접근할 수 있음.
- 장애가 있거나 키보드 마우스 등을 사용할 수 없는 사람에게도 이점을 줌.
✔ Cross Browsing(웹 호환성)
- 웹 브라우저, 종류와 관계없는 웹사이트 접근
- 웹 표준 준수를 통한 브라우저 호환성 확보
- HTML, CSS 문법 준수 및 동작, 레이아웃, 플러그인 호환성
2) 실습환경 세팅
✔ Web Editer(편집기)
- HTML 문법에 맞춰 작성할 수 있도록 도와주는 편집기.
- 문법에 따라 색깔, 들여쓰기 등을 구분할 수 있다.
- 가벼운 온라인 웹 에디터도 있음.
✔ IDE(Intergrated Development Environment, 통합 개발 환경)
- 개발을 할 때 필요한 여러가지 툴을 한 프로그램을 통해 사용할 수 있도록 한다.
- ex) 소스코드 편집기, 빌더, 디버거, 플러그인...
- vsCode, intelliJ, Xcode, Eclipse 등
✔ Recommanded Extenstion
- Auto Rename Tag : 열린 태그 이름 바꾸면 닫힌 태그도 자동으로 바뀜.
- live server : 수정사항이 바로 렌더링 됨.
- prettier : 이쁘지 못한 코드(포맷팅, 문법)를 알려주고 수정 해줌.(초반엔 비추)
✔ vscode 단축키 (window & 내 컴퓨터 기준)
- 현재 창 닫기 : ctrl + w
- 닫은 창 다시 열기 : ctrl + shift + t
- 사이드바 토글 : alt + 1 (자료엔 ctrl + b)
- 아래 행 삽입 : ctrl + shift + Enter
- 현재 행 이동 : alt + 방향키
- 현재 행 복사 : ctrl + d