# HTML은 무엇인가?
현재 HTML은, 웹 페이지를 작성하는 데 가장 기본적인 도구로 평가됩니다.
하이퍼 텍스트 마크업 언어(Hypertext Markup Language)는 웹 페이지의 내용을 구조화하고 표시하기 위한 마크업 언어입니다.
HTML은 텍스트, 이미지, 비디오, 테이블, 폼 등의 웹 페이지 요소를 구조화하는 태그를 사용합니다.
태그는 각 요소의 속성을 정의하는 역할을 합니다.
HTML 태그를 사용하여 웹 페이지의 구조, 내용, 디자인 등을 정의할 수 있습니다.
HTML은 브라우저를 통해서만 접근이 가능한 웹 페이지를 생성할 수 있습니다.
HTML 파일은 .html 혹은 .htm 확장자를 가지며, 웹 서버에 업로드된 후 누구나 접근할 수 있습니다.
HTML은 개인이나 회사, 기관 등이 웹 사이트를 운영할 때 가장 기본적으로 필요한 언어이며, 현재도 계속 사용되고 있습니다.
# HTML의 역사
HTML의 역사는 1989년 팀 버너스리(Tim Berners-Lee)가 유럽 입자 물리 연구소(CERN)에서 개발한 것으로 시작됩니다.
처음에는 링크만 포함하는 간단한 형태였지만, 계속해서 발전하여 다양한 미디어 요소를 포함할 수 있는 기능을 갖추게 되었습니다.
1995년에 HTML 2.0이 공식적으로 출시되었고, 이후 HTML 3.2, HTML 4.0 등이 출시되어 더욱 강력한 기능을 갖추어 향상되었습니다. XHTML은 HTML 4.0을 XML 기술로 개조한 것으로, 웹 페이지의 구조와 내용을 더욱 깔끔하게 관리할 수 있는 기능을 제공하였습니다.
그러나 XHTML은 모바일 기기에서의 호환성 문제와 복잡한 구조 때문에 적극적으로 사용되지 않았습니다.
이에 HTML5가 출시되어 모바일 기기에서의 호환성 문제를 해결하고, 다양한 미디어 요소를 지원하여 비디오, 오디오, 캔버스, 맵 등을 웹 페이지에 포함할 수 있는 기능을 제공하였습니다.
또한, 페이지의 구조를 깔끔하게 관리하는 semantic tag를 제공하여 웹 페이지의 내용을 더욱 직관적으로 나타낼 수 있는 기능을 갖추었습니다.
HTML5의 접근성 개선은 사용자가 웹 페이지를 사용할 때, 장애가 있을 경우에도 웹 페이지를 이용할 수 있도록 개선되었습니다.
또한, 사용자 친화적인 기능으로써 웹 페이지를 더욱 쉽게 이용할 수 있도록 개선되었습니다.
HTML5는 현재 웹 개발의 기본 기술 중 하나로 자리 잡았으며, 다양한 디바이스에서의 호환성을 갖추어 모바일 기기에서도 웹 페이지를 쉽게 이용할 수 있도록 하였습니다.
HTML5의 발전은 웹 개발의 더욱 높은 확장성을 가능케 하여, 그 효용성을 높일 수 있습니다.
또한, HTML5의 지원 브라우저가 대다수로 확대되어 개발자들이 더욱 높은 품질의 웹 콘텐츠를 제공할 수 있는 기회가 제공되고 있습니다.
# HTML 개발 환경 설정
이전에는 Sublime Text, atom 등 많은 텍스트 에디터가 있었지만, 지금에 와서는 비주얼 스튜디오 코드가 거의 천하를 평정하다싶이한 상태입니다. 이 블로그에서는 모든 글이 비주얼 스튜디오 코드를 기본으로 하고있씁니다.
Visual Studio Code(VSCode)를 이용한 HTML 개발 환경 설정 방법은 다음과 같습니다:
- Visual Studio Code 설치: VSCode를 설치하여 개발 환경을 구성합니다. 다운로드 링크: https://code.visualstudio.com/
- 프로젝트 생성: File > Open Folder 메뉴를 선택하여 프로젝트 폴더를 생성합니다.
- HTML 파일 생성: 프로젝트 폴더에 HTML 파일을 생성하고, 적당한 이름으로 저장합니다. (예: index.html)
- 확장 프로그램 설치: VSCode에서 HTML 개발을 편하게 하기 위해 다양한 플러그인을 설치할 수 있습니다. 플러그인을 설치하려면, 마켓 플레이스(Ctrl + Shift + X)에서 원하는 플러그인을 검색하여 설치할 수 있습니다.
- HTML 코드 작성: HTML 파일을 열고, 원하는 HTML 코드를 작성합니다.
- 미리보기: HTML 파일을 저장하고, VSCode에서 Live Server 플러그인을 설치하여 웹 브라우저에서 HTML 파일을 미리보기 할 수 있습니다.
※ 추가 참고: 웹 개발 환경 설정하기 - 비주얼 스튜디오 코드
다음은 Live Server 플러그인을 사용하여 HTML 파일 미리보기의 과정입니다:
- Live Server 플러그인 설치: 마켓 플레이스에서 "live server"를 검색하여 Live Server 플러그인을 설치합니다.
- HTML 파일 열기: 프로젝트 폴더에서 HTML 파일을 열어줍니다.
- Live Server 실행: HTML 파일에서 Right-click > Open with Live Server를 선택하여 Live Server를 실행합니다.
- 미리보기: 브라우저에서 HTML 파일을 미리보기 할 수 있습니다. Live Server 플러그인을 사용하면, 변경된 HTML 파일을 저장하면 브라우저에 변경사항이 바로 적용되어 편리합니다.
이처럼 VSCode를 이용한 HTML 개발 환경을 설정하여 HTML 개발을 시작할 수 있습니다.