HTML

HTML5의 로고

Hyper Text Markup Language, HTML은 웹 페이지를 만들기 위해 만들어진 마크업 언어다. 월드 와이드 웹의 기초가 되는 기술로, 웹 브라우저가 웹 페이지를 어떻게 표시할지 지정하는 표준화된 시스템이다. 쉽게 말해서 웹 페이지의 뼈대를 만드는 언어다. 참고로 프로그래밍 언어가 아니다. 이걸 프로그래밍 언어라고 하면 개발자들에게 달걀로 도배당할 수 있으니 주의하자.

개요[편집 / 원본 편집]

HTML은 1989년 팀 버너스리가 CERN에서 일하는 동안 개발했다. 당시 그는 전 세계 연구자들이 문서를 쉽게 공유할 수 있는 시스템이 필요하다고 생각했다. 연구소에서 서로 다른 컴퓨터로 문서 공유하기 힘들어서 만든 게 지금은 전 세계 인터넷의 기반이 되었다는 게 신기하다. 아마 팀 버너스리도 이렇게 될 줄은 몰랐을 것이다.

탄생 배경[편집 / 원본 편집]

사실 HTML이 탄생한 배경은 꽤나 재밌다. CERN의 연구원들이 각자 다른 컴퓨터 시스템을 쓰다 보니 서로 문서를 공유하기가 힘들었다. 윈도우 쓰는 사람, 매킨토시 쓰는 사람, 리눅스 쓰는 사람이 서로 문서를 주고받으려면 이걸 변환하고 저걸 변환하고... 그야말로 노가다의 끝판왕이었던 것. 거기다 당시에는 이메일도 지금처럼 편하지 않았다. 팀 버너스리가 이런 상황을 보다 못해 "아 몰라 그냥 내가 만들어버려!"라는 심정으로 시작한 게 HTML의 시작이었다.

알면 재미있는 HTML 이야기[편집 / 원본 편집]

HTML의 재미있는 점은 처음에는 정말 단순한 문서 작성 도구였다는 것이다. 지금처럼 화려한 웹사이트를 만들 생각은 꿈에도 없었다. 그저 연구 논문이나 문서를 공유하기 위한 도구였을 뿐. 근데 이게 갑자기 폭발적인 인기를 얻으면서 "어? 이거 다른 것도 할 수 있겠는데?"라는 생각에 기능이 점점 추가되기 시작했다.

특히 재미있는 건 이미지 태그의 탄생 배경에 대해 여러 이야기가 있지만, 처음에는 이미지를 넣을 생각도 없었다고 한다. 멀티미디어 요소에 대한 요구가 커지면서 자연스럽게 추가된 기능이었다. 지금 우리가 보는 수많은 움짤과 밈의 시초가 바로 이것이라고 할 수 있다.

HTML의 특징[편집 / 원본 편집]

태그와 괄호의 향연[편집 / 원본 편집]

HTML의 가장 큰 특징은 모든 것을 꺾쇠괄호(<>)로 감싸는 것이다. 이게 바로 태그다. 태그는 열고 닫아야 하는데, 까먹고 안 닫으면... 브라우저가 알아서 해석해준다(!). 관대한 녀석이다. 하지만 이렇게 하면 선배 개발자에게 달걀 세례를 받을 수 있으니 주의하자.

주요 태그들:

div: "나눈다"는 뜻의 divide에서 따왔다. 근데 요즘엔 그냥 아무데나 막 쓴다. div 태그를 너무 많이 쓰면 "div 지옥"이라고 부른다.
span: div의 사촌쯤 된다. 인라인 요소라서 줄바꿈이 안 된다.
p: paragraph의 약자. 문단을 나눌 때 쓴다. 근데 요즘엔 그냥 div 쓴다...
br: break의 약자. 줄바꿈할 때 쓴다. 신기하게도 닫는 태그가 없다. 태그계의 독신주의자다.

웹 브라우저의 관대함[편집 / 원본 편집]

HTML의 또 다른 특징은 웹 브라우저가 매우 관대하다는 것이다. 태그를 잘못 닫아도, 열지도 않은 태그를 닫아도, 존재하지도 않는 태그를 써도 브라우저는 "뭐... 그럴 수도 있지"하면서 최선을 다해 해석한다. 이런 특성 때문에 초보자들은 HTML이 쉽다고 생각하지만, 실제로는 이게 더 큰 문제를 만들 수 있다. 마치 부모님이 너무 관대하면 버릇없는 자식이 되는 것처럼...

게다가 브라우저마다 자동 보정(오류 수정) 방식이 조금씩 달라서, 무심코 놓친 태그 하나가 다른 브라우저에서는 디자인을 엉망으로 만들 수도 있다. 그러니 관대함을 너무 믿지 말고, 가능한 한 정확한 문법을 지키는 게 좋다.

웹 표준이라는 굴레[편집 / 원본 편집]

W3C라는 단체가 HTML의 표준을 정한다. 최신 브라우저들은 HTML 표준을 거의 완벽하게 지원하며, 새로운 HTML 표준에 맞게 업데이트 한다. 각 브라우저마다 해석하는 방식이 조금씩 다르다. 특히 IE는 예전에 자기 마음대로 해석해서 개발자들의 원수가 되었다. 다행히 이제는 은퇴했다. 부디 평안히 잠드시기를.

HTML 버전의 역사[편집 / 원본 편집]

HTML (1991)[편집 / 원본 편집]

HTML이 1991년에 처음 제안되긴 했지만, 정식 표준으로 발표된 첫 버전은 HTML 2.0(1995)이다. 초창기 HTML은 너무 단순해서 지금 보면 웹페이지라고 부르기도 민망한 수준이었다. 그냥 문서에 링크나 걸 수 있는 정도. 지금으로 치면 메모장에 파란 글씨로 밑줄 그어놓은 수준이었다.

HTML 2.0 (1995)[편집 / 원본 편집]

드디어 폼이랑 표가 추가되었다. 이때부터 뭔가 입력도 받을 수 있고, 데이터도 정리해서 보여줄 수 있게 되었다. 물론 지금처럼 예쁘게는 못 했다. 90년대 초반 워드프로세서 수준이라고 보면 된다.

HTML 3.2 (1997)[편집 / 원본 편집]

이 시기에 브라우저들이 자바스크립트와 CSS를 본격적으로 지원하기 시작했다.

사실 자바스크립트는 ECMAScript(ECMA-262)라는 별도 표준을 따르고, CSS도 HTML 표준과는 별도 권고안으로 나왔지만,*

HTML 3.2가 나온 무렵부터 다양한 기능들이 브라우저에 탑재되면서 웹이 화려해지기 시작했다. 한편, 이때 추가된 기능들 중 일부는 나중에 "이건 좀 아닌 것 같은데..."하면서 없어졌다. 특히 태그는 CSS의 등장으로 완전히 퇴출당했다.

HTML 4.01 (1999)[편집 / 원본 편집]

프레임이라는 괴상한 기능이 HTML 4.0(1997)에서 이미 도입되었고, 4.01에서도 그대로 유지되었다. 한 페이지를 여러 조각으로 나눠서 보여줄 수 있었는데, 당시에는 혁신적이라고 생각했지만, 지금 보면 그냥 "왜 했을까?" 싶은 기능이다. 지금은 거의 안 쓴다.

XHTML의 비극 (2000-2008)[편집 / 원본 편집]

XML의 엄격한 문법을 도입하려다가 실패한 버전. "모든 태그는 반드시 닫아야 해!"라고 고집부렸더니 개발자들이 "귀찮아서 못 하겠다"며 외면했다. 또한 HTML 4를 기반으로 작성된 콘텐츠를 변경해야 했고, 브라우저 호환성도 문제가 있었다. 결국 HTML5의 등장으로 자연스럽게 잊혀졌다.

HTML5 (2014-현재)[편집 / 원본 편집]

드디어 현대적인 웹의 시작. 이전 버전들의 실수를 모두 반성하고(?) 새롭게 태어났다.

W3C에서 2014년에 권고안으로 확정했으며, 이후 WHATWG에서는 ‘Living Standard’ 형태로 계속 발전시켜 가고 있다. 메이저 버전을 “HTML6” 식으로 따로 낼 계획은 없으며, 꾸준히 개선되는 살아있는 표준(living standard)이다.

특히 다음과 같은 기능들이 추가되었다:

시맨틱 태그: header, footer, nav, article 등이 추가되었다. div만 쓰다가 이런 태그들이 생기니까 코드가 좀 더 의미있어 보인다... 는데 여전히 div를 더 많이 쓴다.
멀티미디어 요소: video와 audio 태그가 추가되었다. 이제 플래시 없이도 동영상을 재생할 수 있다! 플래시는 안녕...^[1]
캔버스: 자바스크립트로 그림을 그릴 수 있는 기능이 추가되었다. 웹 게임 만들기가 쉬워졌다. p5.js와 같은 라이브러리를 사용하면 쉽게 다룰 수 있다.
웹소켓: 실시간 통신이 가능해졌다. 채팅이나 실시간 게임을 만들 수 있다. 근데 이건 자바스크립트 없이는 못 쓴다.

실전에서의 HTML[편집 / 원본 편집]

"안녕하세요" 부터 시작하는 HTML 생활[편집 / 원본 편집]

모든 프로그래밍 언어의 첫 걸음은 "Hello, World!"를 출력하는 것이다. HTML도 마찬가지다. 다만 HTML은 프로그래밍 언어가 아니라서 "출력"이 아니라 "표시"한다.

<!DOCTYPE html>
<html>
<head>
    <title>첫 번째 웹페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
</body>
</html>

See the Pen here!(@pen) on CodePen.

이렇게만 해도 웹페이지가 만들어진다. 물론 너무 허접해서 누가 이런 웹페이지를 만드냐고 할 수 있지만... 처음부터 완벽할 순 없다!

실수하기 쉬운 것들[편집 / 원본 편집]

태그 닫기 깜빡하기[편집 / 원본 편집]

가장 흔한 실수다. 특히 div 태그는 중첩해서 많이 쓰다 보면 어디서 닫아야 할지 헷갈린다. 요즘 에디터들은 자동으로 닫아주긴 하지만... 그래도 실수는 한다. 또한 브라우저에서도 자동으로 처리는 해 주지만, 같은 태그를 여러번 사용했을 때, 한 부분만 닫지 않는 경우에는 해당 부분 전체가 영향을 받는다.

<div>
    <div>
        여기에 뭔가를 쓰고...
    <!-- div 닫는 태그를 깜빡했다! -->
</div>
  <p>다만 이렇게 <b>여러개의 같은 태그를 <b>중복해서 겹치면</b> 부모 태그의 끝까지 속성이 모두 적용 됩니다.</p>

See the Pen here!(@pen) on CodePen.

태그 자동 보정[편집 / 원본 편집]

HTML은 관용적(Permissive) 언어라 오류가 발생해도 최대한 올바르게 보정하려는 태그 자동 보정(Tag-auto closing)을 브라우저에서 수행한다. HTML5에서는 해당 방식에 대한 가이드라인이 존재한다.

다만 DOM 생성 과정 별 브라우저별로 다를 수 있으며, Internet Explorer 6와 같이 HTML5를 지원하지 않는 브라우저의 경우에도 다르게 동작할 수 있다.

대소문자 섞어쓰기[편집 / 원본 편집]

HTML은 대소문자를 구분하지 않는다. DIV나 div나 DiV나 모두 같은 태그로 인식한다. 하지만 보기 좋으려면 통일하는 게 좋다. 보통은 소문자로 통일한다.

속성값에 따옴표 빼먹기[편집 / 원본 편집]

class나 id 같은 속성의 값에는 따옴표를 써야 한다. 안 써도 작동은 하지만... 선배 개발자가 보면 또 달걀을 던질지도 모른다.

<!-- 나쁜 예 -->
<div class=main-content>
<!-- 좋은 예 -->
<div class="main-content">

See the Pen here!(@pen) on CodePen.

현대 웹 개발에서의 HTML[편집 / 원본 편집]

React와 Vue의 시대[편집 / 원본 편집]

요즘은 순수 HTML만 쓰는 경우가 거의 없다. React나 Vue 같은 *프레임워크(혹은 라이브러리)*를 사용한다. 이런 도구들은 HTML을 자바스크립트 안에 넣어서 쓴다. 이걸 JSX라고 부른다(React 기준).

function App() {
    return (
        <div>
            이게 HTML 같지만 사실은 JSX라는 녀석이다! 신기하지 않은가?
        </div>
    );
}

이런 식으로 쓴다. HTML을 자바스크립트 안에 쓰는 게 좀 이상해 보일 수 있지만... 이게 요즘 트렌드다. 옛날 개발자들이 보면 기절할지도 모른다.

CSS의 통치 시대[편집 / 원본 편집]

현대의 HTML은 CSS없이는 아무것도 할 수 없다고 해도 과언이 아니다. 예전에는 HTML에서 직접 스타일을 지정하는 태그들이 있었다.

<!-- 90년대 스타일 -->
<font color="red" size="5">빨간 글씨</font>
<marquee>움직이는 글자!</marquee>

<!-- 현대 스타일 -->
<style>
/* 빨간 글씨 스타일 */
  .text-red {
    color: red;
    font-size: 1.5rem; /* 약 24px */
    margin-bottom: 20px; /* 움직이는 글자와 간격 */
  }

  /* 움직이는 글자 영역 */
  .animate-scroll-container {
    position: relative;
    width: 100%; /* 부모 요소의 너비 */
    overflow: hidden; /* 넘치는 부분 숨기기 */
    white-space: nowrap; /* 한 줄 유지 */
    height: 2rem; /* 높이 설정 */
    border: 1px solid #ddd; /* 시각적 영역 구분 (선택 사항) */
  }

  /* 움직이는 글자 애니메이션 */
  .animate-scroll {
    display: inline-block;
    white-space: nowrap;
    position: absolute;
    animation: scroll 5s linear infinite;
  }

  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
</style>

<span class="text-red text-xl">빨간 글씨</span>
<div class="animate-scroll">움직이는 글자!</div>

See the Pen here!(@pen) on CodePen.

marquee 태그는 글자가 좌우로 흘러가는 효과를 주는 태그였다. 90년대에는 이게 특별한 기능이라고 생각했지만, 지금 보면 그저 눈을 어지럽게 만드는 기능일 뿐이다. 참고로 이 태그는 HTML5에서 완전히 퇴출당했다.

웹 브라우저들의 전쟁[편집 / 원본 편집]

브라우저 전쟁의 역사[편집 / 원본 편집]

HTML의 역사는 브라우저 전쟁의 역사라고도 할 수 있다. 특히 Internet Explorer(IE)와 다른 브라우저들 간의 전쟁은 유명하다.

제1차 브라우저 전쟁 (1995-2001): 넷스케이프 vs IE

 IE가 윈도우에 기본 탑재되어 있다는 이점을 이용해 승리했다. 이때부터 "IE only" 사이트들이 늘어나기 시작했다.

제2차 브라우저 전쟁 (2004-2017): 파이어폭스 vs IE vs 크롬

 2004년 파이어폭스 1.0 출시 이후, 크롬이 2008년에 등장하면서 경쟁이 더 심해졌다. 크롬은 압도적인 속도로 점유율 1위를 달성했고, IE는 서서히 몰락하기 시작했다.

모바일 시대 (2017-현재): 크롬 vs 사파리

 모바일에서는 iOS에서는 사파리가^[2], 안드로이드에서는 크롬^[3]가 우세하다. 윈도우에서는 IE는 완전히 은퇴하고 엣지로 환생... 했다가 결국 크로미움(크롬) 엔진으로 갈아탔다.

브라우저별 특징[편집 / 원본 편집]

각 브라우저마다 HTML을 해석하는 방식이 조금씩 다르다. 이게 개발자들을 미치게 만드는 주요 원인.

크롬: "난 뭐든지 잘 돌아가게 할 거야!"
파이어폭스: "표준은 반드시 지켜져야 해!"
사파리: "애플 기기에서는 내가 최고야!"
IE: "난 내 맘대로 할 거야!" ~~고인이 되었다...~~
엣지: "이제 크롬처럼 할게요... 제발 써주세요..."

자바스크립트 없이 HTML로만 구현[편집 / 원본 편집]

각종 효과[편집 / 원본 편집]

HTML에는 의외로 자바스크립트 없이도 사용 가능한 기능들이 숨어있다.

<blink>깜빡거리는 텍스트!</blink>  <!-- 사라진 전설의 태그 -->
<details>
    <summary>여기를 클릭해보세요</summary>
    짜잔! 숨겨진 내용이 나타났다!
</details>

See the Pen here!(@pen) on CodePen.

blink 태그는 비표준 태그로, 대부분의 브라우저에서는 지원되지 않고 그냥 텍스트로 출력된다. details 태그는 실제로 있는 태그다. 클릭하면 내용이 펼쳐지는 아코디언 효과를 준다. CSS나 자바스크립트가 없어도 된다!

표로 구조 잡기[편집 / 원본 편집]

<table>
    <caption>이건 진짜 테이블이에요</caption>
    <tr>
        <td>레이아웃을 위한 게 아니라고요!</td>
    </tr>
</table>

See the Pen here!(@pen) on CodePen.

예전에는 웹페이지 레이아웃을 모두 table 태그로 만들었다. 지금 생각하면 말도 안 되는 일이지만... 당시에는 그게 최선이었다. CSS가 없었으니까. 지금도 가끔 이메일 템플릿을 만들 때는 table을 쓴다. 이메일 클라이언트들이 HTML5를 제대로 지원하지 않는 것들이 있기 때문.

미래의 HTML[편집 / 원본 편집]

HTML6?[편집 / 원본 편집]

HTML6는 오지 않을 것 같다. 대신 HTML5가 계속 진화하고 있다. "Living Standard"라고 부른다. 마치 살아있는 생물처럼 계속 발전한다는 의미다.

웹 컴포넌트의 시대[편집 / 원본 편집]

<gaonwiki-button>
    이건 내가 만든 버튼이야!
</gaonwiki-button>

See the Pen here!(@pen) on CodePen.

이런 식으로 자신만의 HTML 태그를 만들 수 있다. 물론 자바스크립트 등의 도움이 필요하다. 따로 구현하지 않는 경우에는 블록 레벨^[4]로 처리된다. 이걸 웹 컴포넌트라고 부른다. 미래에는 이런 식의 개발이 더 많아질 것으로 예상된다.

2023 문법 개선 프로젝트에서 지원하는 다양한 문법들과 태그들은 이런식으로 커스텀 한 것이다.

각주[편집 / 원본 편집]

↑ 플래시의 몰락은 HTML5 등장과 함께 iOS, 안드로이드 등의 모바일 OS에서 지원하지 않겠다는 결정, 윈도우 최신 버전 미지원, 결정적으로 플래시 개발사인 어도비에서 개발 지원 중단을 했기 때문이다.
↑ iOS에서는 무조건 브라우저 엔진을 사파리가 사용하는 WebKit을 사용해야 하므로, 크롬 등 다른 앱도 사파리 위에 기능을 얹은 것이다. 따라서 무조건 사파리가 우세했다고 보기엔 어렵긴 하다...
↑ 안드로이드 기본 탑재의 영향도 있다.
↑ div, section, article 등

• 현재 페이지 URL 줄이기

[1] 플래시의 몰락은 HTML5 등장과 함께 iOS, 안드로이드 등의 모바일 OS에서 지원하지 않겠다는 결정, 윈도우 최신 버전 미지원, 결정적으로 플래시 개발사인 어도비에서 개발 지원 중단을 했기 때문이다.

[2] OS에서는 무조건 브라우저 엔진을 사파리가 사용하는 WebKit을 사용해야 하므로, 크롬 등 다른 앱도 사파리 위에 기능을 얹은 것이다. 따라서 무조건 사파리가 우세했다고 보기엔 어렵긴 하다...

[3] 안드로이드 기본 탑재의 영향도 있다.

[4] v, section, article 등

[1]

[2]

[3]

[4]