컴알못의 HTML 기초 - HTML 시작하기 (개발 환경 설정하기)

 컴알못의 HTML

 얼마 전 부터 HTML 공부를 시작했습니다. 블로그에 기록을 남기며 스스로 정리도 하고, 혹여나 도움이 될 수 도있는 비전공자 및 초보자 분들을 위해 HTML 이 무엇인지, 작성 및 스킬에 대하여 조금씩 정리해보려고 합니다.

1. HTML이란? 

 HTML은 웹 문서를 만들기 위해 사용하는 프로그래밍 언어의 한 종류 입니다. 에이치티엠엘, 굉장히 읽기도 불편하고 꼭 무엇의 줄임말 같이 생겼죠. 

 Hypertext Markup Language 하이퍼 텍스트 마크업 랭기지의 줄임말입니다. Hypertext는 웹페이지에서 'Link 링크' 를 의미하는 기능 이고, markup은 컴퓨터 프로그래밍 언어 중에 markup 이라고 하는 문법적인 형식을 의미 합니다. 즉 하이퍼텍스트를 작성하기 위한 마크업 형식의 프로그래밍 Language라는 뜻 입니다.

 HTML은 말 그대로 웹문서 중 특히 하이퍼텍스트를 작성하기 위해 개발되었습니다. 우리가 인터넷을 사용하여 웹에 접근하려 할때 사용하는 크롬, 인터넷 익스플로러, 마이크로 소프트 엣지, 파이어폭스, 사파리 등과 같은 웹 브라우저(Web Browsers)들은 HTML 문서를 읽어주는 역할을 합니다. 

 HTML은 굉장히 쉬운 언어 입니다. 심지어 html의 모든 문법을 배우는데는 몇 일이 걸리지 않는다는 말이 있죠. 그 만큼 웹 브라우저가 해석이 가능한 언어중 가장 사용하기 쉬운 언어입니다. 초반의 웹 서비스는 정적인 웹 페이지가 대부분이여서 HTML 페이지가 대부분이었으나, HTML은 다양하게 설계하고 스타일을 변경하는데 많은 제약이 따릅니다. 이런 HTML의 변화에 적응 할 수 없고 새로운 것을 추가 하기 힘든 환경을 보완하기 위해 만들어진것이 스타일 시트(Style sheets)이며 스타일 시트의 표준안이 CSS(Cascading Style Sheets)입니다. 그래서 웹 개발자들은 CSS를 이용하여 보다 다양하고 풍부한 디자인으로 설계하는것이 가능해졌으며 유지, 보수도 간편하게 할 수 있게 되었습니다. 

2. 개발 환경 구축하기 

 1) HTML 편집기 다운로드

  HTML은 인터넷 웹페이지를 작성하기 위한 언어이며, HTML 편집기는 웹페이지를 작성하기 위한 편집도구 이며, HTML과 CSS의 문법을 잘 몰라도 쉽게 사용하게 해주는 툴입니다. 편집기에는 VS code, atom, Sublime Text, 에디트 플러스, 노트패드 등등 종류가 많이 있으며 대부분 무료로 제공 되고 있습니다.

★ 2018년 무료 HTML 편집기 BEST 10위 링크

 ☞ ( https://www.lifewire.com/best-free-html-editors-for-windows-3471313 )

위 링크에서 10 Best Free HTML Editors for Window for 2018을 볼 수 있습니다. 현재 2018년의 HTML 무료 편집집툴 1위는 NOTEPAD++이기에 저는 노트패드로 다운 받았으며 향후 계속 노트패드를 사용할 예정입니다.

★ NOTEPAD++ 다운로드 ☞ ( https://notepad-plus-plus.org/download/v7.5.6.html )

 2) 도메인 및 웹호스팅 받기

  웹 호스팅(Web Hosting) 이란 ISP(Internet service provider) 인터넷 서비스 제공업체로 부터 일정 금액을 지불하여 임대받아 웹 사이트를 구축하는것을 말합니다. 흔히 이런 업체들을 웹호스팅 사이트라고 부릅니다. 수 많은 사이트 중 닷홈(http://Dothome.co.kr) 에서는 100MB까지 무료로 제공 하므로 저는 닷홈에 가입하고 무료 호스팅을 받았습니다. 

★ 닷홈 회원가입 후 무료 호스팅 받기☞ ( http://Dothome.co.kr )

 3) FTP 프로그램 다운로드

  FTP란 File Transfer Protocol 즉 파일 전송규약이며 ftp프로토콜은 컴퓨터간 파일을 전송 할 수 있는 프로그램 입니다. 컴퓨터에서 작업한 HTML 웹문서를 웹서버에 올려주는 프로그램입니다. 

 일반적인 용도로 사용하는 경우에는 상대적으로 가볍고 안정적이며 한글버전이 지원되는 파일질라를 추천합니다.

★ 파일질라 다운로드☞ ( https://filezilla-project.org/ )

 

4) 선택사항 - 나눔고딕코딩 글꼴 설치

  프로그래밍을 하다보면 I, l, 1과 같이 비슷 비슷하게 생긴 문자들로 헷갈릴때가 많고, 몇몇 툴의 디폴트 폰트는 가독성이 떨어집니다. 개발자들을 위한 프로그래밍 전용 폰트중 네이버에서 제공하는 무료폰트인 나눔 고딕 코딩체를 소개합니다. 프리웨어이며 개발자들의 코딩 환경에 최적회시킨 글꼴입니다. 

★ 나눔고딕코딩글꼴 다운로드☞ ( http://software.naver.com/software/summary.nhn?softwareId=GWS_000331 )

 여기까지 HTML 첫걸음을 떼기 위한 기본 개발 환경준비가 완료되었으며, 추후 사용할 유용한 도구들은 글을 쓰면서 소개하도록 하겠습니다.