[HTML 개념잡기] HTML의 개요와 실습 환경 세팅



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