[DEV] HTML의 구조와 에디터 추천

headerimg 거두절미 HTML5 강좌

  1. HTML의 개요
  2. 실험
  3. 구조
  4. Editor(문서 편집 에디터)

HTML의 개요

html은 웹페이지를 만드는 3가지 큰 요소 중 1부분을 차지한다. 보통 마크업(Markup)이라 한다. 가끔 보면 특이한 마크업이 있는데 jade, pug 등은 node.js에 express라는 서버에서 사용한다.

실험

html은 메모장으로 간단하게 실험해볼 수 있는데,

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
    </head>
    <body>
        <h1>This is a Heading</h1>
        <p>This is a paragraph.</p>
    </body>
</html>

위 코드를 메모장에 써보자

  1. 메모장에 위코드를 붙여넣기 img

  2. 저장할때, .html로 저장. img

    index.html로 저장

  3. 브라우저로 열어본다. img

    잘 작동 하는 것을 볼 수 있다.

구조

원리 앞에 HTML코드를 보면 html은 <>인 Opening Tag와 </> Closing Tag가 한쌍으로 이루어져있다.

img

Attribute는 tag의 속성값을 넣는 구역으로 class가 foo로 지정되어있다.

Content는 tag안의 표시할 정보를 넣는 구역이다.

HTML 구조 앞에 실험해본 HTML의 구조는 아래처럼 시각화 할 수 있다.

흰색 영역은 <body> 태그는 브라우저 안에 표시된다. <head> 태그는 브라우저 이름이나 다른 meta 데이터가 들어가는 구역이다.

<!DOCTYPE>는 브라우저에게 문서 유형을 보여주는 곳인데 HTML태그보다 먼저 맨위에 작성되어야한다. HTML5는 아래와 같이 작성하면된다.

<!DOCTYPE html>

html5 전에는 겁나 귀찮았는데 아주 쉬워졌다. 굿.

Editor(문서 편집 에디터)

앞으로 작성할 html문서들을 계속 메모장에 사용할 수 없으니 간단히 Editor를 추천한다.

Visual Studio Code 줄여서 vsCode라고 한다. 다양한 커스터마이징과 강력한 기능들이 있다. 특히나 마이크로소프트가 모든 플랫폼 용으로 개발한 편집기로 git제어 디버깅 등 꼭 필요한 기능이 기본으로 들어있어서 좋다. 참고로 일렉트론기반으로 제작되었다. 무거울 것같은 마소이지만 vsCode만큼은 너무나 가볍게 잘돌아간다. 저사양PC에서도 좋다. 나도 사용중.

Atom은 vsCode전에 사용한 편집기로 역시 Electron 기반이다. vsCode와 비슷하지만 단점으로는 조금 무겁고 버벅거림이 있을 수 있다. 가끔은 아예 응답없음이 떠버려서 난감한 경우도 있지만 어쨌든 자동저장이라 껏다 키면된다. 장점은 vsCode보다 UI UX에 접근하여 커스터마이징이 매우매우 자유롭고 상당히 특이한 플러그인들이 많다. 대표적으로 Power Mode 이 플러그인 때문에 6개월 정도 사용했지만 결국 vsCode로 이전했다..ㅠ

Power

미친 .. 다시 사용하고 싶어질만큼 매력적이다.

다른 에디터도 많지만 일단 기본적으로 웹개발에서는 이 두 개가 대표적이다.


© 2018. All rights reserved.