반응형

 

HTML구조
HTML구조

처음 배우는 HTML이란?

 

HTML을 처음 배우는 날 나는 드디어 이성적인 사고를 할 수 있었던 사람인것 같았다.

그 전에 내가 살았던 삶은 말이 안되는 뒤죽박죽 엉망의 삶이었는데 HTML을 시작하고는 시작과 끝,  원인과 결과를 항상 찾아려고 했고 중구난방의 어떤 문제가 발생하면 논리적으로 생각을 해 보기 위해 노력을 했던것 같다.

 

그렇게 코딩에 매력에 빠져들어 흥미를 느끼게 해준 언어가 HTML이다.

또한 당시 1999년 쯤에는 웹에 접근하는 속도가 늦어 이미지보다는 HTML로 처리하는게 더 많았던 시절이라 일명

막코딩

 

이라고 해서 되는데로 모양을 만들어 냈던것 같다.

 

1. HTML확장자(.html)

 

HTML은 웹문서를 표현하는 기본문서이다.

한글파일은 hwp이고, 엑셀은 xls, 파워포인트는 ppt 인것처럼 웹에서 보여지는 가장 기본중의 기분 문서는 "html" 이다.

html과 htm도 있고 xhtml, vhtml 등등 거의 같은 개념으로 해석할 수 있다.

 

메모장을 열어 아래와 같이 입력한 후(묻지도 따지지말고 그냥입력), 저장할 때 확장자(html)까지 입력 해보자.

HTML문서샘플
HTML문서의 기본구조
HTML문서저장방법
문서저장할때 확장자까지 입력

저장한 폴더에 가보면 아래와 같이 html파일이 나와있다.

HTML문서 저장방법

aa.html 파일을 더블클릭해서 실행해보면...........

HTML문서 확인

소스와 완성을 비교해보고 어디에 무엇을 써야 나오는 부분인지 스스로 볼 수 있다면 당신은 이미 HTML에 빠지기 시작한 것이다.

2. html 에디터

 

HTML을 입력할 수 있는 에디터는 일반적으로 글을 입력할 수 있는 문서 에디터(Text Editor), 웹 에디터(Web Editor), 통합개발환경(IDE), 웹기반 코드에디터 등이 있다. 

 

1) 문서 에디터(Text Editor)

: 문서에디터에는 메모장, 워드패드 등이 있다. 간단한 코드 편집이나 배치파일 소스를 볼때는 프로그램이 가볍고 간단한 메모장을 열어 코드를 빠르게 수정하거나 확인 할 수 있다. 이 문서에디터는 코드가 아주 익숙하거나 영타를 능숙하게 사용할 수 있는 사람들에게는 빠르고 쉽게 사용할 수 있지만 복잡한 개발을 하는 환경에서는 오타의 위험성도 많고 다른 개발툴과의 호환성 문제도 있다는 아쉬운 점이 있다.

 

2) 웹 에디터(Web Editor)

: 웹 에디터에는 웹페이지를 만들기 쉽게 관련 소스를 색상별로 구분하여 보여지는 에디터로 소스의 가독성도 높아지고 오타의 위험률도 낮아진다. 또한 자동완성 기능도 제공을 하므로 태그의 앞부분만 입력하여도 관련태그가 자동으로 나오므로 입력효율 또한 높아진다고 할 수 있다. 많이 사용하는 프로그램으로는 비주얼스튜디오코드(Visual Studio Code), 노트패드(NotePad), 울트라에디터(UltraEdit Text Editor), 드림위버(Adobe Dreamweaver) 등이 있다.

현재 가장많이 사용되어지는 프로그램은 비주얼스튜디오코드(Visual Studio Code)인데 빈문서를 생성한 후, 확장자를 html로 저장한다음 ! 를 입력하면 Html 기본문서가 자동으로 완성된다.

vc의 html 자동완성
vc의 html 자동완성

 

3) 통합 개발 환경(Integrated Development Environment, IDE)

 

: 통합개발환경이란, 공통된 개발 툴을 하나의 통합된 그래픽 사용자 인터페이스로 결합하는 애플리케이션을 구축하기 위한 소프트웨어를 말한다. 일반적으로 소스코드편집부분, 빌드관련부분, 디버그 등등의 영역으로 나눌 수 있으며 많이 사용되는 프로그램인  Eclipse IDE, STS등이 있다.

 

4) 웹기반 코드에디터

 

: 웹기반 코드에디터에는 웹상에서 소스를 입력하면 바로 결과를 확인할 수 있는 에디터이다. 따로 프로그램을 설치할 필요가 없으며 인터넷만 이용할 수 있는 환경이라면 손쉽게 개발할 수 있는 환경을 제공하는 편리한 에디터이다. 가장많이 사용하는 것으로는 Codepen(https://codepen.io) 이 있다.

 

 

마치며...

 

IT 의 상황은 언제 어떻게 바뀔 지 모르는 가변적인 세계로 한가지 개발 툴, 한가지 개발환경에만 익숙해질 것이 아니라 항상 업그레이드에 대처할 수 있는 자세로 모든 개발환경을 틈틈히 숙지하고 배워나가는데에 그 핵심이 있다고 하겠다. 개발환경이 바뀌었다고 해서 전혀 새로운 개발환경으로 탈바꿈하는것이 아니라 기존의 불편한것들에서 개선해 나가는 식으로 변화하기 때문에 기본에 충실하면 변화된 환경을 쉽고 익숙하게 따라갈 수 있으니 기본을 잘 익혀놓도록 하자!

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기