[새싹] 웹을 지탱하는 기술 Chapter10

채상엽·2022년 5월 10일

Sproutt 2nd - Spring Study

목록 보기

22/32

layout: post
title: "웹을 지탱하는 기술 스터디 - Chapter10"
date: 2022-04-28T00:00:00-00:00
author: sangyeop
categories: Sproutt-2nd

새싹 개발 서적 스터디 - 웹을 지탱하는 기술 Chapter10

Chapter 10. HTML

HTML이란 무엇인가

Hypertext Markup Language의 줄임말이다. 마크업 언어는 태그로 문서 구조를 표현하는 컴퓨터 언어인데, 이를 사용한 마크업 구조를 가진 문서를 '구조화 문서' 라고 한다.

HTML5
이제 막 스펙 책정 중에 있는 새로운 HTML이다. JS 애플리케이션을 위한 API가 신규로 추가되고 로컬 스토리지 이용과 드래그 앤 드롭이 추가 될 예정이다. 이러한 확장을 제외하면 하이퍼미디어 포맷 관점에서는 HTML 4.01과 크게 다르지 않다.

미디어 타입

text/html
- SGML 베이스의 HTML을 나타낸다.
application/xhtml+xml
- XML 베이스의 XHTML을 나타낸다.

둘 모두 문자 인코딩을 지정할 수 있는데, 보통은 UTF-8을 이용하는 것이 무난하다.

확장자

.html 또는 .htm 이라는 확장자를 이용한다. 현재는 .html을 사용하는 것이 일반적이다.

XML의 기초지식

<?xml version="1.0" encoding="utf-8">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>첫 번째 HTML</title></head>
  <body>
    <h1>첫 번째HTML</h1>
    <p>HTML의 사양서는<a href="http://www.w3.org">W3C</a>에 있습니다</p>
  </body>
</html>

XML의 트리구조

위의 XHTML 문서를 트리로 표현하면 아래와 같다.

요소

XML은 요소로 문서의 구조를 나타낸다. 구성 요소는 다음과 같다.

요소의 트리구조

XML의 트리구조는 요소를 중첩해서 표현한다. 위 예제에서 <html> 요소 안에 <head>와 <body> 요소가 있는데, 여기서 <html>을 부모요소, 안에 속해 있는 요소들을 자식 요소라고 부른다.

빈 요소

내용을 가지지 않는 요소를 의미한다

<br></br>

속성

요소는 시작 태그 안에 속성명="속성 값" 형식으로 속성을 가질 수 있다. 한개의 이름의 속성에는 하나의 속성 값만 들어갈 수 있으며, 중첩할 수 없다.

실제 참조와 문자 참조

위 문서는 XML의 문서 구조를 기술하기 위한 특별한 문자가 되기도 하기 때문에, 실제 참조라는 도구를 이용해 표현한다.

문자 참조
- 위의 표 이외의 문자를 이스케이프하여 표현하는 방법
- 유니코드 번호로 문자를 지정한다.

코멘트

<!--코멘트 내용-->

주석이라고 생각하면 될 것 같다.

XML 선언

XML 첫 부분에 선언을 기술한다.

<?xml version="1.0" encoding="utf-8">
...

일반적으로 버전은 1.0을 사용하고, 인코딩은 utf-8을 사용한다.

이름공간

복수의 XML 포맷을 조합할 때, 이름의 충돌을 방지할 목적으로 사용한다.

요소의 이름공간

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:atom="http://www.w3.org/2005/Atom">
  <head>
    <link rel="stylesheet" href="base.css"/>
    <atom:link rel="enclosure" href="attachment.mp3"/>
  </head>
  ...
</html>

2개의 <link> 가 등장하는데 이를 구별하기 위해서 두 개의 xmlns 속성을 이용해서 이름공간을 선언하였다.

속성의 이름공간
```
<entry xmlns="http://www.w3.org/2005/Atom"
       xmlns:thr="http://purl.org/sydication/thread/1.0">
  <link href="blog.example.com/entries/1/commentsfeed"
        thr:count="10"/>
</entry>
```
여기서는 하나의 디폴트 이름 공간과 thr이라는 접두어로 선언한 이름공간이 존재한다. href 경우는 로컬의 속성이라는 의미로 로컬 속성이라고 불리고 어느 이름 공간에도 속하지 않으며, 접두어가 붙은 속성의 경우는 글로벌 속성이라고 불리며 접두어의 이름 공간에 속한다.

HTML의 구성요소

헤더

요소	의미
title	문서의 타이틀
link	다른 리소스로의 링크
script	JavaScript 등의 클라이언트 사이드 프로그램
meta	그 밖의 파라미터

바디

블록 레벨 요소

문서와 단락과 표제 등 어느 정도 큰 덩어리를 표현함

요소 의미
h1,h2,h3,h4,h5 표제
dl,ul,ol 리스트
div 블록 레벨 요소의 그룹화
p 단락
address 어드레스 정보
pre 미리 포맷이 정해진 텍스트
table 표
form 폼
blockquote 인용

요소	의미
h1,h2,h3,h4,h5	표제
dl,ul,ol	리스트
div	블록 레벨 요소의 그룹화
p	단락
address	어드레스 정보
pre	미리 포맷이 정해진 텍스트
table	표
form	폼
blockquote	인용

인라인 요소

블록 레벨 요소 안에 들어가는 요소로 강조나 줄 바꿈, 이미지 삽입 등을 표현

요소	의미
em	강조
strong	강한 강조
dfn	정의어
code	소스 코드
samp	예
kbd	키보드 입력문자
var	변수
cite	인용 또는 다른 리소스의 참조
abbr	WWW, HTTP 같은 약자, 생략형
a	앵커
q	인라인의 인용
sub	아래첨자
sup	위첨자
br	줄바꿈
ins	삽입한 문자열
del	삭제한 문자열
img	이미지
object	오브젝트

공통 속성
- id 속성
  
  문서 내에서 유일한 ID, 문서 내 특정 부분을 URI로 나타낼 URI 프래그먼트(#다음에 지정하는 부분)로 이용하거나 CSS 스타일을 지정할 때 사용
- class 속성
  
  요소가 속할 클래스. 해당 요소가 어떤 의미를 가질 것인지 지정하는 메타 데이터 역할을 한다.
```
<html xmlns="http://www.w3.org/1999/xhtml">
  <head><titel>id속성과 class속성</titel></head>
  <body>
    <h1 id="title">첫 번째 HTML</h1>
    <p>저자: <span class="author">야마다 타로</span></p>
  </body>
</html>
```

링크

\요소 - 앵커

다른 웹 페이지에 링크하기 위해서 사용하는 태그이다. 앵커 태그 내의 내용을 앵커 텍스트라고 한다.

<a href="http://mentorbook.co.kr">웹 사이트 웹 사이트</a>

\요소

<a>요소는 다른 웹 페이지로 링크하기 위해서 사용하지만, <link>요소는 웹 페이지 사이의 관계를 표시하기 위해 사용한다.

<head>
  <link rel="index" href="http://example.com/index.html"/>
  <link rel="prev" href="http://example.com/1.html"/>
  <link rel="next" href="http://example.com/3.html"/>
</head>

index는 목차, prev는 이전 페이지, next는 다음 페이지를 의미한다.

오브젝트의 삽입

이미지를 삽입할 때는 <img>를 그 외에는 <object>요소를 이용한다.

<img>

<img src="http://example.coom/children.png" alt="아이들 사진"/>

<object>

<object data="http://example.com/children.mpeg">아이들의 동영상</object>

폼

폼은 폼 요소와, 폼 컨트롤 요소로 이루어진다.

폼 컨트롤 요소란? : 텍스트 입력, 라디오 버튼, 셀렉트 버튼 등

폼은 타깃 URI를 갖는데 action속성을 이용해 지정할 수 있다. 이동 후 이용할 메서드는 method 속성을 이용해 지정한다. HTML은 GET 또는 POST를 지원한다.

폼에 의한 GET

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
    <form method="GET" action="http://example.com/search">
      <p>키워드:
        <input type="text" id="q"/>
        <input type="submit" value="검색"/></p>
      </p>
    </form>
  </body>
</html>

타깃 URI와 폼에 입력한 내용을 바탕으로 새 링크의 URI를 생성한다.

http://example.com/search?q=text

폼에 의한 POST

<html xmlns="http://www.w3.org/1999/xhtml">
  <head><title>form test</title></head>
  <body>
    <form method="POST" action="http://example.com/article">
      <p>제목<input type="text" id="title"/>
        <br>저자:<input type="text" id="author"/></br>
        <input type="submit" value="검색"/></p>
    </form>
  </body>
</html>

리소스의 작성 등 사용자의 입력을 타깃 URI로 전송할 때 이용한다.

제목으로 'test-title', 저자로 'test-author'를 입력한 경우의 요청은 아래와 같다

POST /article HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded

title=test-title&author=test-author

링크 관련 - 링크의 의미를 지정한다.

웹 API 같이 프로그램이 클라이언트인 경우에는 각 링크가 어떤 의미인지 해석하고, 기계적으로 판단하는 구조가 필요하다. 어떻게 링크에 의미를 저장할 수 있을까?

rel 속성

<a> 요소와 <link>요소는 각각 rel속성을 가지고 있다. 여기에는 링크하는 쪽과 링크되는 쪽이 어떤 관계에 있는지를 기술한다. 이 값을 링크 관계라고 부른다.

<head>
  <link rel="stylesheet" href="http://example.com/base.css"/>
</head>

microformats

여러개의 링크 관계가 매뉴얼로 등록이 되어있지만, 현재의 웹은 이보다 더 다양한 리소스의 링크 관계를 표현하기 때문에, 이러한 요구에 대응하기 위해서 microformats에서 링크 관계의 확장이 이루어지고 있다.

하이퍼미디어 포맷으로서의 HTML

HTML에서 실현할 수 있는 기능은 하이퍼미디어 뿐이지만, HTTP, URI, 하이퍼미디어에 의한 링크들이 합쳐져서 웹이 완성된다. 때문에 리소스끼리 바르게 접속해서 애플리케이션 상태를 표현할 수 있는지 여부는 HTML로 리소스를 표현할 때 아주 중요한 설계 방침이 된다.