[아이티센 부트캠프] 웹 클라이언트 1

1. WWW

개념

WWW는 World Wide Web의 줄임말이다.
인터넷에 연결된 컴퓨터들 사이에서 사람들이 정보를 보고, 찾고, 공유할 수 있게 만든 전 세계적인 정보 공간을 말한다. 보통은 그냥 웹(Web)이라고 부른다.

여기서 먼저 분명하게 구분해야 하는 것은 인터넷과 웹이 같은 말이 아니라는 점이다.
인터넷은 컴퓨터들을 서로 연결해 주는 큰 네트워크이고, 웹은 그 인터넷 위에서 동작하는 여러 서비스 중 하나다.

쉽게 말하면 인터넷이 길과 연결망이라면,
WWW는 그 길 위에서 우리가 실제로 들어가 보고 이용하는 웹페이지와 웹사이트의 공간이다.

핵심 특징

인터넷 위에서 동작하는 정보 공유 공간이다

웹은 인터넷 자체를 뜻하는 말이 아니다.
인터넷이라는 더 큰 기반 위에서 동작하는 대표적인 서비스가 바로 웹이다.

이 구분이 중요한 이유는 뒤에서 나오는 URL, HTTP, HTML이
모두 “웹이 인터넷 위에서 어떻게 동작하는가”를 설명하는 요소들이기 때문이다.

즉, 웹은 인터넷을 통해 정보를 주고받고,
그 결과를 사용자가 웹페이지 형태로 보고 이용할 수 있게 만든 공간이라고 이해하면 된다.

하이퍼텍스트 방식으로 문서가 연결된다

웹의 가장 큰 특징 중 하나는 문서들이 서로 연결되어 있다는 점이다.
사용자는 한 문서만 보고 끝나는 것이 아니라, 문서 안에 들어 있는 연결을 따라 다른 문서로 계속 이동할 수 있다.

이때 알아두면 좋은 개념이 하이퍼텍스트다.
하이퍼텍스트는 문서 안에 다른 문서로 이어지는 연결을 넣어 둔 형태를 말한다.

그리고 사용자가 실제로 누르게 되는 연결이 하이퍼링크다.
즉, 하이퍼텍스트는 연결 구조를 가진 문서 방식이고, 하이퍼링크는 그 안에서 실제 이동에 쓰이는 연결이다.

그래서 웹은 단순히 문서를 모아 둔 공간이 아니라,
문서와 문서가 이어져 있는 연결된 정보 공간이라고 이해하는 것이 중요하다.

웹페이지와 웹사이트는 구분해서 봐야 한다

웹페이지는 각각의 한 장 한 장의 문서를 말한다.
우리가 브라우저에서 보고 있는 화면 하나하나가 웹페이지라고 생각하면 된다.

반면 웹사이트는 서로 관련된 여러 웹페이지가 모여 있는 전체 묶음이다.
예를 들어 어떤 쇼핑몰의 메인 페이지, 상품 페이지, 장바구니 페이지, 주문 페이지가 함께 있다면 그것을 하나의 웹사이트라고 볼 수 있다.

사용자가 링크를 따라 페이지에서 페이지로 이동하는 행동은
보통 웹 서핑 또는 웹 브라우징이라고 한다.

브라우저와 서버가 역할을 나눠 동작한다

사용자는 보통 웹 브라우저를 통해 웹을 사용한다.
웹 브라우저는 서버에 있는 문서나 정보를 받아 해석한 뒤, 사람이 읽기 쉬운 화면으로 보여 주는 프로그램이다.

여기서 서버는 문서나 정보를 가지고 있다가 요청이 오면 보내 주는 쪽이고,
브라우저는 그 내용을 받아서 사용자 화면에 보여 주는 쪽이라고 보면 된다.

겉으로는 그냥 페이지를 여는 것처럼 보이지만, 실제로는
브라우저가 서버에서 받은 내용을 읽고 제목, 본문, 이미지, 링크 같은 형태로 화면에 보여 주는 것이다.

웹은 요청과 응답의 흐름으로 움직인다

웹의 기본 흐름은 이렇게 이해하면 쉽다.

브라우저를 연다 → 주소를 입력하거나 링크를 누른다 → 브라우저가 서버에 요청한다 → 서버가 문서나 정보를 보낸다 → 브라우저가 그 내용을 화면에 보여 준다

즉, 웹은 사용자가 무엇을 보고 싶다고 요청하면,
서버가 그에 맞는 문서나 정보를 보내 주고, 브라우저가 그것을 해석해서 화면에 보여 주는 방식으로 동작한다.

또 사용자는 페이지를 보기만 하는 것이 아니라,
링크를 따라 다른 문서로 이동하거나 필요한 정보를 서버로 다시 보낼 수도 있다.

URL, HTTP, HTML이 함께 웹을 만든다`

WWW를 이해할 때 반드시 같이 봐야 하는 핵심 요소는 URL, HTTP, HTML이다.
이 세 가지는 웹이 실제로 동작하기 위한 기본 약속이라고 볼 수 있다.

URL은 원하는 자원이 어디에 있는지 알려 주는 주소다.
우리가 사이트 주소를 입력해서 원하는 페이지로 들어갈 수 있는 이유가 바로 이 주소 체계 덕분이다.

HTTP는 브라우저와 서버가 정보를 주고받을 때 따르는 통신 규칙이다.
브라우저가 문서를 요청하고, 서버가 그 문서를 다시 보내 줄 때 이 규칙을 사용한다.

HTML은 웹 문서의 구조를 표현하는 언어다.
브라우저는 이 문서를 읽고 제목, 문단, 이미지, 링크 같은 구조를 화면에 보여 준다.

결국 웹은
주소를 찾고(URL) → 규칙에 따라 요청하고 응답받고(HTTP) → 받은 문서를 구조에 맞게 보여 주는(HTML) 방식으로 동작한다고 이해하면 된다.

초기의 웹과 지금의 웹은 성격이 다르다

웹은 1989년 CERN에서 시작되었다.
처음 목적은 연구자들끼리 정보를 빠르게 교환하고 공동으로 활용하기 위한 것이었다.

초창기 웹은 문서와 텍스트 중심이었다.
필요한 정보를 서로 연결해서 보는 것이 중요했고, 지금처럼 화려한 화면이나 다양한 기능이 중심은 아니었다.

하지만 시간이 지나면서 웹은 이미지, 오디오, 비디오까지 다루게 되었고,
이제는 단순한 문서 열람을 넘어서 정보 검색, 쇼핑, 멀티미디어 감상, 다양한 서비스 이용까지 가능한 공간으로 확장되었다.

즉, 초창기 웹이 문서 공유 중심의 공간이었다면,
지금의 웹은 다양한 서비스를 이용하는 생활 기반으로 커졌다고 볼 수 있다.

웹에는 공통 기준이 필요하다

웹이 널리 쓰이기 시작하면 브라우저나 개발 방식이 제각각일 때 서로 맞지 않는 문제가 생긴다.
어떤 환경에서는 열리고 어떤 환경에서는 제대로 열리지 않는다면, 많은 사람이 같은 웹을 편하게 사용할 수 없게 된다.

그래서 웹에는 공통 기준이 필요하다.
이런 기준을 만들고 장려하는 대표적인 조직이 W3C다.

여기서는 웹에 공통 기준이 필요하다는 점만 먼저 잡아 두면 충분하다.
자세한 내용은 다음 웹 표준 파트에서 이어서 이해하면 된다.

헷갈리기 쉬운 부분

• 인터넷과 웹은 같은 말이 아니다.
  인터넷은 기반 네트워크이고, 웹은 그 위에서 동작하는 서비스다.

• 하이퍼텍스트와 하이퍼링크는 비슷해 보여도 다르다.
  하이퍼텍스트는 연결 구조를 가진 문서 방식이고, 하이퍼링크는 실제 이동에 쓰이는 연결이다.

• 웹페이지와 웹사이트는 다르다.
  웹페이지는 한 장의 문서이고, 웹사이트는 그런 페이지들의 묶음이다.

• 브라우저가 곧 웹은 아니다.
  브라우저는 웹을 보기 위한 프로그램이지, 웹 자체를 뜻하지 않는다.

• 웹은 단순히 문서를 읽는 공간만이 아니다.
  사용자는 링크를 따라 이동하고, 필요한 정보를 서버로 보내고, 서버의 응답을 다시 화면에서 확인할 수 있다.

• URL, HTTP, HTML은 서로 따로 노는 개념이 아니다.
  웹에서는 이 세 가지가 함께 묶여서 동작한다.
  
  
  
  

참고

WWW는 뒤에서 배우게 될 웹 표준, HTML5, CSS3, JavaScript, AJAX를 이해하기 위한 출발점이다.
특히 URL, HTTP, HTML의 역할 구분은 이후 내용에서도 계속 기준이 된다.

먼저 웹이 어떤 공간이고 어떤 흐름으로 움직이는지 이해해 두면,
뒤에서 배우는 각 기술이 왜 필요한지도 훨씬 덜 헷갈리게 된다.

---

2. 웹 표준

개념

웹 표준은 특정 브라우저에서만 동작하는 비표준 기술에 기대지 않고, 모두가 공통으로 사용할 수 있는 표준 기술로 웹페이지를 만드는 것을 말한다.

쉽게 말하면
어떤 브라우저에서 열어도, 어떤 기기에서 보아도, 기본적인 내용과 기능이 공통 기준 안에서 안정적으로 동작하게 만드는 방식이라고 이해하면 된다.

여기서 중요한 기준은 문서의 구조, 화면에 보이는 표현, 사용자와의 동작을 한곳에 섞어 쓰지 않고 나눠서 만드는 것이다.

• HTML : 문서의 구조
• CSS : 화면의 표현과 디자인
• JavaScript : 동작과 상호작용

즉, 웹 표준은 단순히 “정해진 태그를 쓰는 것”만 뜻하지 않는다.
웹문서를 역할별로 나누고, 공통 규칙에 맞게 구현하는 방식 전체를 뜻한다.

핵심 특징

구조, 표현, 동작을 나눠서 만든다

웹 표준의 핵심은 역할 분리다.
문서의 내용과 구조는 HTML이 맡고, 색상·크기·배치 같은 표현은 CSS가 맡고, 클릭·입력 처리 같은 동작은 JavaScript가 맡는다.

이 세 가지가 한 군데에 뒤섞이면 처음 만들 때도 복잡하고, 나중에 고칠 때는 더 힘들어진다.
반대로 역할을 나눠 두면 어디를 수정해야 하는지가 분명해지고, 문서도 훨씬 정리된다.

즉, 웹 표준은 코드를 나눠 쓰는 습관이 아니라
웹문서를 역할에 맞게 설계하는 방식이라고 보는 것이 맞다.

특정 브라우저 전용 방식에 기대지 않는다

웹 표준은 어떤 브라우저에서만 되는 방식보다,
여러 환경에서 공통으로 동작할 수 있는 방식을 우선으로 본다.

예를 들어 특정 브라우저에서만 열리거나, 특정 환경에서만 정상 동작하는 기능에 의존하면
다른 브라우저나 다른 운영체제에서는 같은 페이지가 제대로 보이지 않을 수 있다.

그래서 웹 표준을 지킨다는 것은
“내 환경에서만 되면 된다”가 아니라
“다른 사람의 환경에서도 기본적인 내용과 기능이 공통으로 동작해야 한다”는 생각에 가깝다.

유지보수와 수정이 쉬워진다

웹 표준을 지키면 가장 크게 느껴지는 장점 중 하나가 유지보수다.
문서 구조와 디자인이 분리되어 있으면, 내용을 바꾸는 일과 모양을 바꾸는 일을 따로 처리할 수 있다.

예를 들어 문장 안에서 강조 표현을 할 때마다 글자 크기와 색을 직접 태그에 써 넣으면
나중에 강조 색상이나 크기를 바꾸고 싶을 때 같은 부분을 하나씩 다시 수정해야 한다.

하지만 강조용 클래스를 CSS로 따로 만들어 두면
스타일 한 곳만 바꿔도 전체 화면에 바로 반영된다.

즉, 웹 표준은 보기 좋은 코드를 만드는 데서 끝나지 않는다.
수정이 쉬운 구조를 만드는 데에도 큰 의미가 있다.

웹 문서가 더 정리되고 가벼워진다

구조, 표현, 동작을 나누면 문서 안에 불필요하게 섞여 있던 코드가 줄어든다.
그러면 문서 구조가 더 분명해지고, 전체 문서도 더 정리된 형태가 된다.

이것은 단순히 코드가 깔끔해 보인다는 뜻이 아니다.
같은 내용을 더 효율적으로 관리할 수 있고, 필요할 때 더 빠르게 수정할 수 있다는 뜻이다.

여러 기기와 환경에 더 잘 대응할 수 있다

지금은 웹을 PC에서만 보는 시대가 아니다.
스마트폰, 태블릿, TV처럼 다양한 화면 크기와 환경에서 웹을 사용한다.

이런 상황에서 웹 표준을 지키면
기기마다 전혀 다른 방식으로 따로 만들기보다, 공통된 구조를 바탕으로 더 안정적으로 대응할 수 있다.

즉, 웹 표준은 단순한 기술 규칙이 아니라
다양한 환경에서도 내용을 공통으로 전달하기 위한 기본 토대라고 볼 수 있다.

웹 접근성을 높이는 바탕이 된다

웹 표준은 웹 접근성과도 바로 연결된다.
웹 접근성은 장애인, 고령자처럼 정보 이용이 어려운 사람들뿐 아니라, 일반 사용자까지 포함해서 누구나 웹 서비스를 사용할 수 있게 만드는 생각이다.

즉, 웹 접근성은
신체적 조건이나 기술 환경과 관계없이 웹을 이용할 수 있어야 한다는 뜻이다.

웹 표준을 지키면 문서 구조가 더 명확해지고, 브라우저와 다양한 보조 기술이 내용을 이해하기도 쉬워진다.
그래서 웹 접근성을 높이는 가장 기본적이고 효과적인 방법 가운데 하나가 바로 웹 표준을 지키는 것이다.

웹의 목표는 누구나 어디서든 이용할 수 있게 하는 것이다

웹 표준의 바탕에는 중요한 생각이 있다.
웹은 특정 사람만 쓰는 공간이 아니라, 누구나 정보를 함께 공유하고 이용할 수 있는 공간이어야 한다는 점이다.

그래서 웹 표준의 목표는 단순히 문법을 맞추는 데 있지 않다.
어디서든, 누구나, 큰 제약 없이 같은 정보를 이용할 수 있게 만드는 것이 더 본질적인 목표다.

모바일 웹으로 자연스럽게 이어진다

웹 표준이 중요한 이유는 모바일 환경과도 바로 연결되기 때문이다.
휴대폰으로 웹사이트를 볼 때 PC 화면을 그대로 작은 화면에 넣으면 글씨도 작고 구조도 복잡해서 보기 불편하다.

그래서 등장한 것이 모바일 웹이다.
모바일 웹은 PC용 사이트를 그대로 보여 주는 것이 아니라, 모바일에 최적화된 웹사이트를 말한다.

즉, 모바일 웹은 완전히 별개의 개념이라기보다
다양한 기기에서도 웹을 더 보기 쉽고 사용하기 쉽게 만들기 위한 대응 방식으로 이해하면 된다.

결국 웹 표준을 지키는 방향은
모바일처럼 작은 화면을 가진 환경에서도 내용을 더 안정적으로 전달하는 흐름으로 이어진다.

헷갈리기 쉬운 부분

• 웹 표준은 HTML만 잘 쓰는 것을 뜻하지 않는다.
  HTML, CSS, JavaScript를 역할에 맞게 나눠 쓰는 전체 방식까지 함께 봐야 한다.

• 웹 표준은 “모든 브라우저에서 화면이 완전히 똑같아야 한다”는 뜻은 아니다.
  핵심은 내용과 기능이 공통 기준 안에서 안정적으로 동작하는 것이다.

• 웹 표준과 웹 접근성은 같은 말이 아니다.
  하지만 서로 매우 가깝고, 웹 표준을 지키는 것이 웹 접근성을 높이는 중요한 출발점이 된다.

• 특정 브라우저 전용 기능은 당장은 편해 보여도
  다른 환경에서는 문제가 생길 수 있다. 그래서 웹 표준은 처음보다 나중을 더 편하게 만드는 방식이기도 하다.

• 모바일 웹은 PC 웹과 완전히 끊어진 별개 기술이라기보다,
  다양한 기기에서도 웹을 더 잘 이용할 수 있게 만든 대응 방식으로 이해하는 편이 좋다.
  
  
  
  

참고

웹 표준을 이해하면 왜 HTML은 구조, CSS는 표현, JavaScript는 동작으로 나눠 배우는지가 자연스럽게 연결된다.

또 웹 표준은 웹 접근성, 모바일 웹, 그리고 뒤에서 배우게 될 HTML5, CSS3, JavaScript를 이해하는 기준점이 된다.
즉, 이 주제는 각 기술을 따로 외우는 것이 아니라, 왜 역할을 나눠 써야 하는지를 먼저 이해하게 해 주는 출발점이라고 보면 된다.

---

3. HTML5

1. HTML5란

HTML5는 차세대 마크업 언어 표준이다.
예전 HTML이 문서를 작성하고 보여 주는 역할에 더 가까웠다면, HTML5는 멀티미디어와 다양한 웹 기능까지 함께 다룰 수 있도록 확장된 표준이다.

핵심은 세 가지다.

• 문서 중심의 웹을 더 풍부한 웹 애플리케이션으로 확장했다.
• 특정 브라우저나 특정 기기에 덜 묶이는 방향으로 발전했다.
• 외부 플러그인에 의존하던 기능을 브라우저 안으로 많이 가져왔다.

왜 HTML5가 필요했는가

초기 HTML은 텍스트 중심의 정보 전달이 목적이었다.
그런데 웹에서 이미지, 오디오, 비디오, 동적인 기능 요구가 커지면서 기존 방식만으로는 한계가 생겼다.

그래서 예전에는 Active-X, 플러그인 같은 외부 기술에 많이 의존했고, 브라우저마다 따로 지원하는 기능도 달라서 같은 페이지라도 다르게 동작하는 문제가 생겼다.
HTML5는 이런 한계를 줄이고, 웹에서 필요한 기능을 표준 안에서 직접 처리할 수 있게 하려는 흐름으로 나온 것이다.

HTML5가 바꾼 점

HTML5는 웹 문서의 구조와 내용을 더 분명하게 표현하게 했고, 멀티미디어와 여러 기능을 브라우저 안에서 직접 다룰 수 있게 했다.
강의에서는 이를 크게 두 가지로 정리한다.

• 더 풍부한 웹 애플리케이션
• 더 시맨틱한 마크업

---

2. HTML 요소와 기본 문서 구조

HTML 요소의 기본 형태

HTML 문서는 여러 개의 HTML 요소로 이루어진다.
요소를 볼 때 먼저 알아야 하는 것은 시작 태그, 종료 태그, 속성, 보이는 내용이다.

<tag>보이는 내용</tag>
<tag attribute="value">보이는 내용</tag>

• <tag> : 시작 태그
• </tag> : 종료 태그
• attribute="value" : 속성
• 태그 사이의 글자 : 화면에 보이는 내용

태그 이름은 요소의 역할을 정하고, 속성은 그 요소가 어떻게 동작할지를 더 구체적으로 정한다.
예를 들어 a의 href는 이동할 주소, img의 src는 이미지 파일 위치, video의 controls는 재생 버튼 표시를 뜻한다.
또 주석 <!-- 설명 -->은 코드 설명용이며 화면에는 출력되지 않는다.

head와 title

head 안에는 문서 정보가 들어간다.

<head>
  <title>제목</title>
</head>

여기서 title은 브라우저 탭 제목 같은 문서 정보다.
본문 안에 실제로 보이는 큰 제목은 body 안에서 h1, h2 같은 태그로 작성한다.

HTML5 기본 문서 구조

HTML5 문서는 아래 구조로 이해하면 된다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>페이지 제목</title>
  </head>
  <body>
    실제 화면 내용
  </body>
</html>

• <!DOCTYPE html> : HTML5 문서 선언
• html : 문서 전체를 감싸는 루트 요소
• head : 문자 인코딩, 제목 같은 문서 정보
• body : 실제 화면에 보이는 내용

초보자는 먼저 head는 설정, body는 출력이라고 이해하면 된다.
meta charset="UTF-8"은 한글이 깨지지 않도록 문자 인코딩을 설정하는 부분이다.

기존 방식과 HTML5 방식의 차이

HTML5는 문서 구조를 더 단순하게 만들었다.

• 문서 선언이 <!DOCTYPE html>로 간단해졌다.
• 문자 인코딩도 <meta charset="UTF-8">처럼 짧아졌다.
• link, script도 더 간단한 형태로 쓸 수 있다.

즉, HTML5는 새로운 태그만 추가한 것이 아니라 문서 선언과 기본 문법도 더 간결하게 정리한 표준이다.

---

3. HTML4와 HTML5의 차이

추가된 것

HTML5에서는 구조 태그와 멀티미디어 태그가 많이 추가되었다.

• 구조 태그 : header, nav, article, section, aside, footer
• 멀티미디어/기능 태그 : audio, video, canvas, figure, figcaption, embed, details, datalist, command

의미가 바뀐 것

강의에서는 em, hr를 예로 들며 일부 요소의 의미 변화도 함께 짚는다.
즉, HTML5는 태그를 새로 추가한 것만이 아니라 기존 태그를 해석하는 관점도 함께 정리한 것이다.

제거되거나 지양하는 것

• 대체 가능한 태그 제거 : acronym, applet, dir, isindex
• 디자인 목적 태그 제거 : basefont, big, center, font, strike, tt
• 접근성과 구조 문제로 지양 : frame, frameset, noframes

즉, HTML5는 구조는 HTML, 디자인은 CSS로 더 분명하게 나누는 방향으로 정리된 것이다.

---

4. 태그를 기능별로 보는 분류

강의에서는 태그를 무작정 외우기보다, 무슨 역할의 태그인지 먼저 보는 감각도 같이 설명한다.

Metadata Content

문서 정보, 다른 문서와의 관계, 표현과 동작 설정을 담당하는 태그들이다.

대표 태그:

• base
• link
• meta
• noscript
• script
• style
• template
• title

Flow Content

body 안에서 사용되는 대부분의 태그들이 여기에 들어간다.
즉, 본문 안에서 흐르듯 배치되는 일반적인 콘텐츠라고 보면 된다.

대표 태그:

• a, article, aside, audio
• blockquote, button, canvas, div
• figure, footer, form
• h1~h6, header, img, input
• main, nav, ol, p, section, span
• table, textarea, time, ul, video 등

Sectioning Content

문서 구조를 나누는 태그들이다.

• article
• aside
• nav
• section

Heading Content

제목을 나타내는 태그들이다.

• h1
• h2
• h3
• h4
• h5
• h6

이 분류를 보면 태그를 하나씩 외우기보다 문서 정보용인지, 본문용인지, 구조용인지, 제목용인지 먼저 감을 잡을 수 있다.

---

5. HTML5에 추가된 주요 태그

구조 태그

• header : 머리말, 제목 영역
• footer : 제작자 정보, 저작권 정보 등 아래쪽 영역
• hgroup : 제목과 부제목 묶기
• nav : 메뉴, 이동 링크 영역
• section : 제목별 문서 영역
• article : 뉴스 기사, 블로그 글 같은 독립적인 콘텐츠
• aside : 본문 옆 참고 영역
• main : 문서의 주요 콘텐츠 블록

멀티미디어/콘텐츠 태그

• figure : 그림, 비디오 같은 콘텐츠 묶음
• figcaption : figure의 제목이나 설명
• picture : 반응형 웹에 맞는 이미지 정의
• audio
• video
• canvas
• embed

의미 표현 태그

• strong : 아주 중요하거나 긴급한 내용 강조
• time : 날짜와 시간에 의미 부여
• mark : 형광펜처럼 특정 텍스트 강조
• details : 추가 정보
• summary : details의 머리글

기타 추가 태그/속성

• ol reversed : 목록 순서 거꾸로 표시
• a download : 링크 대상 파일 다운로드
• a ping : 링크 클릭 정보 자동 송신
• ruby, rt, rp, rb, rtc : 루비 주석 표현
• bdi : 텍스트 방향 격리
• wbr : 줄 바꿈 가능 지점
• menu : 명령 목록
• command : 호출 가능한 명령
• dialog : 대화 상자나 창 표현

복습할 때는 먼저 구조 태그, 멀티미디어 태그, 의미 태그 중심으로 기억하면 된다.

---

6. 시맨틱 태그와 구조

시맨틱 태그는 태그에 의미를 부여해서 문서 구조를 더 쉽게 파악하게 해 주는 태그다.

예전에는 div를 여러 번 써서 구조를 나눴다면, HTML5에서는 header, nav, main, section, article, aside, footer처럼 역할이 드러나는 태그를 사용한다.

장점은 세 가지다.

• 접근성 향상
• SEO 향상
• 가독성 향상

위 그림처럼 HTML5 문서는 의미 있는 태그로 구조를 나눌 수 있다.
모양만 나누는 것이 아니라 이 영역이 무슨 역할인지까지 태그 이름으로 드러내는 것이 핵심이다.

대표 시맨틱 태그 역할

• header : 머리말, 제목
• nav : 메뉴, 이동 링크
• section : 주제별 구간
• article : 독립적으로 읽을 수 있는 실제 글
• aside : 본문 옆 보조 내용
• footer : 회사소개, 저작권, 약관, 제작 정보
• main : 페이지의 핵심 본문

특히 section은 큰 구간을 나누는 느낌이고, article은 그 안의 실제 글 하나를 담는다는 차이를 같이 기억해야 한다.

---

7. 기본 예제로 보는 자주 쓰는 태그

제목과 구분선

<h1>자주 사용되는 HTML 태그들</h1>
<!-- 수평선 그려주는 태그-->
<hr />

• h1 : 가장 큰 제목
• h2 : 그보다 한 단계 작은 제목
• hr : 가로 줄로 구간 나누기

제목 태그는 단순히 글자를 크게 만드는 것이 아니라 문서 내용을 구간별로 나누고 중요도를 보여 주는 역할도 한다.

링크

<h2>하이퍼링크 설정</h2>
<a href="http://www.w3schools.com/tags/default.asp">HTML 학습 사이트</a>
<a href="http://www.naver.com/">네이버</a>

a는 다른 페이지로 이동하는 링크 태그다.
실제 이동 주소는 href에 적고, 화면에 보이는 글자는 태그 사이에 적는다.

이미지

<h2>이미지 출력</h2>
<img src="../images/1.jpg" width="200" />
<img src="http://localhost:8088/edu/images/olaf.jpg" width="200" />
<img src="/edu/images/duke.png" width="100" />

img는 이미지를 출력하는 태그다.

• src : 이미지 파일 위치
• width : 이미지 너비

경로는 크게 상대경로, 절대경로, 서버 시작 위치 기준 경로로 볼 수 있다.
이미지가 안 보이면 태그보다 먼저 경로가 맞는지를 확인해야 한다.

목록

<h2>순서가 있는 리스트</h2>
<ol>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ol>

<h2>순서가 없는 리스트</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JS</li>
</ul>

• ol : 순서가 있는 목록
• ul : 순서가 없는 목록
• li : 실제 항목

ol은 번호가 붙고, ul은 점 모양이 붙는다.

표

<h2>테이블</h2>
<table border="/">
  <tr>
    <th>언어명</th>
    <th>기능</th>
  </tr>
  <tr>
    <td>HTML</td>
    <td>웹 페이지의 내용 담당</td>
  </tr>
  <tr>
    <td>CSS</td>
    <td>웹 페이지의 스타일</td>
  </tr>
  <tr>
    <td>JS</td>
    <td>웹 페이지의 상호작용과 동적인 처리</td>
  </tr>
</table>

• table : 표 전체
• tr : 한 줄
• th : 제목 칸
• td : 내용 칸

예제에는 border="/"가 들어 있지만, 표의 선과 모양은 보통 CSS로 따로 다루는 경우가 많다.

---

8. video와 audio

HTML5에서는 video, audio 태그를 통해 플러그인 없이 멀티미디어를 다룰 수 있다.

video 태그 주요 속성

• src : 동영상 파일 경로
• poster : 동영상이 보이기 전 대신 보여 줄 그림
• preload : 재생 전 미리 로딩
• autoplay : 자동 재생
• loop : 반복 재생
• controls : 재생 컨트롤 표시
• width : 화면 너비
• height : 화면 높이

<h2>비디오</h2>
<video src="../images/trailer.mp4" width="500" height="400" controls></video>

controls를 넣으면 재생, 정지, 볼륨 조절 같은 기본 버튼이 함께 표시된다.
poster는 재생 전 썸네일, autoplay는 자동 재생, loop는 반복 재생, preload는 미리 로딩을 뜻한다.

figure와 figcaption

<h2>이미지에 이름 붙이기</h2>
<figure>
  <img src="../images/3.jpg" width="100" />
  <img src="../images/4.jpg" width="100" />
  <img src="../images/5.jpg" width="100" />
  <figcaption>큐티아이들</figcaption>
</figure>

figure는 이미지, 표, 비디오처럼 하나의 독립적인 콘텐츠 묶음을 표현할 때 사용한다.
figcaption은 그 묶음에 대한 제목이나 설명을 붙이는 태그다.

---

9. HTML5 Web Form

HTML5는 입력 폼을 많이 강화했다.

새로운 input type

• email : 이메일 주소 입력
• url : 웹 사이트 주소 입력
• number : 숫자 입력
• range : 슬라이드 막대로 숫자 선택
• search : 검색 상자
• date : 날짜 선택
• month : 월 선택
• week : 주 선택
• time : 시간 선택
• color : 색상 선택

새로운 input 속성

• autocomplete : 자동완성 제어
• autofocus : 페이지 로딩 후 자동 포커스
• min, max, step : 값 제한
• placeholder : 입력 전 힌트 표시
• required : 필수 입력 검사
• multiple : 다중 파일 업로드 가능

즉, 입력 목적에 맞는 전용 입력 UI를 더 다양하게 쓸 수 있게 된 것이다.

예제

<form action="나중에학습할서블릿프로그램의URL" method="get">
  이름 <input type="text" name="stname" required><br>
  암호 <input type="password" name="stpwd" required><br>
  나이 <input type="number" name="stage"><br>
  좋아하는 칼라 <input type="color" name="stcolor"><br>

  좋아하는 음식 <br>
  햄버거 <input type="checkbox" name="stfood" value="f1">
  비지찌게 <input type="checkbox" name="stfood" value="f2">
  회덮밥 <input type="checkbox" name="stfood" value="f3">
  돈까스 <input type="checkbox" name="stfood" value="f4"><br>

  성별 <br>
  남성 <input type="radio" name="gender" value="male">
  여성 <input type="radio" name="gender" value="female"><br>

  <input type="submit" value="전송하기">
  <input type="reset" value="초기상태로">
</form>

코드 해설

이 예제는 form 태그 안에서 여러 입력 태그를 함께 사용하는 기본 흐름을 보여 준다.
action은 전송 대상 주소이고, method="get"은 데이터를 GET 방식으로 보낸다는 뜻이다.

text, password는 기본 입력이고, number, color는 HTML5에서 강화된 입력 타입이다.
required를 넣으면 필수 입력으로 검사한다.

checkbox는 여러 개를 동시에 선택할 수 있고, radio는 같은 name 안에서 하나만 선택할 수 있다.
마지막의 submit은 전송, reset은 입력값 초기화 버튼이다.

placeholder는 실제 입력값이 아니라 힌트 문구이고, required는 사용자가 내용을 채웠는지 브라우저 단계에서 먼저 확인해 주는 역할이라는 점도 같이 기억하면 된다.

---

10. contenteditable

contenteditable은 요소를 편집 가능한 상태로 바꾸는 속성이다.

• true : 편집 가능
• false : 편집 불가능
• inherit : 부모 요소 값 상속, 기본값

즉, 화면에 출력된 요소를 브라우저 안에서 직접 수정할 수 있게 만드는 기능이다.

---

11. HTML5와 모바일

모바일 환경에는 서로 다른 운영체제가 있고, 각 운영체제에 맞는 앱을 따로 만들려면 비용이 크다.

그래서 강의에서는 HTML5를 이용한 모바일 웹앱을 중요한 방식으로 본다.
하나의 웹 기술로 동시에 여러 디바이스를 지원할 수 있기 때문이다.
이어서 HTML5로 개발되는 하이브리드 앱 흐름도 함께 소개한다.

모바일에서 활용되는 주요 HTML5 기술

• Offline 지원 : LocalStorage, IndexedDB, App Cache
• 미디어 처리 : Video, Audio, Canvas, SVG
• 입력 지원 : Advanced Forms
• 위치정보 : GeoLocation

즉, HTML5는 모바일에서도 저장, 미디어, 입력, 위치정보 같은 기능을 웹 기술 안에서 처리할 수 있게 해 준다.

---

12. HTML5가 가능하게 한 것

강의안 마지막은 HTML5를 두 가지로 정리한다.

1. 더 풍부한 웹 애플리케이션

• video, audio를 이용한 비디오/오디오 재생
• canvas를 이용한 2D, 3D 그래픽 처리
• Application Cache를 통한 오프라인 동작
• Cross Document Messaging, XMLHttpRequest Level2를 통한 도메인 간 통신
• Web Storage, Indexed DB를 통한 클라이언트 저장
• Web Workers를 통한 백그라운드 처리
• Server-Sent Events, Web Sockets를 통한 서버 푸시와 양방향 통신
• File API를 통한 로컬 파일 읽기

2. 더 시맨틱한 마크업

• 문서 의미를 더 분명하게 표현할 수 있게 됨
• div 중심 구조에서 벗어나 용도별 의미 있는 태그 사용
• 문서 구조와 데이터 의미를 더 명확하게 표현 가능
• 대표 태그 : head, main, section, footer, article, nav, address, time

마지막 핵심 정리

• HTML5는 문서 중심의 HTML을 더 풍부한 웹 기술로 확장한 표준이다.
• 기본 문서 구조는 DOCTYPE → html → head → body 흐름으로 이해하면 된다.
• HTML5에서는 구조 태그, 멀티미디어 태그, 의미 태그, 폼 기능이 크게 강화되었다.
• 시맨틱 태그는 문서 구조의 의미를 더 분명하게 드러낸다.
• 모바일 환경에서도 HTML5는 여러 기기를 함께 지원하는 중요한 기반 기술이다.
• 결국 HTML5는 더 많은 기능을 웹 안에서 직접 처리하게 만들고, 문서 구조도 더 의미 있게 표현하게 만든 표준이라고 정리하면 된다.