'웹을 지탱하는 기술' 3회차 스터디 정리

10. HTML

HTML의 구성요소

• 헤더 : 문서의 메타 데이터

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

주요 블록 레벨 요소

요소	의미
h1, h2, h3, h4, h5, h6	표제
dl, ul, ol	리스트
div	블록레벨 요소의 그룹화
p	단락
blockquote	인용

• 바디 : 문서의 내용, 블록 레벨 요소 + 인라인 요소

주요 인라인 요소

요소	의미
em	강조
strong	강한 강조
br	줄바꿈
a	앵커
img	이미지
object	객체

• id 속성 : 문서 내에서 유일한 ID.
• class 속성 : 요소가 속할 클래스.

링크

• <a>요소 - 앵커 : 다른 웹페이지에 링크하기 위해 앵커 태그인 <a>요소를 사용합니다.
• <link>요소 : HTML의 헤더에서 웹페이지 사이의 관계를 지정하기 위해 사용합니다.
• 오브젝트의 삽입 : HTML은 하이퍼미디어이기 때문에 텍스트뿐만 아니라 이미지나 동영상 등도 끼워넣을 수 있습니다.
• 폼 : 폼에서는 링크하는 곳의 URI에 대해 GET과 POST를 발행할 수 있습니다.

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

• 프로그램이 클라이언트인 경우는 각각의 링크가 어떠한 의미인지를 해석하고, 어느 링크를 따라가야 하는지를 기계적으로 판단하는 구조가 필요합니다. 그래서 HTML과 ATOM은 링크의 의미를 프로그램이 읽을 수 있는 상태로 기술하기 위한 기구를 준비하고 있습니다.
• rel 속성 : <a>와 <link>요소는 각각 rel 속성을 갖고있습니다. HTML에서 가장 흔히 사용되는 링크 관계는 stylesheet입니다.

HTML로 링크를 설계할 때는 ‘링크를 따라가는 것으로 애플리케이션의 상태가 변화한다’는 사실을 강하게 의식해야 합니다.

11. microformats

HTML 가운데서 더욱 의미가 있는 데이터를 표한하기 위한 기술이 microformats입니다. 링크의 상세한 의미와 이벤트 정보를 표현할 수 있습니다.

심플한 시맨틱 웹

• mircroformats는 시맨틱 웹을 실현 가능한 방향으로 이끌었습니다.

시맨틱스(의미론) 란

• 언어학에서의 의미론 : ‘꽃’은 ‘종자식물의 생식기관’이라는 의미가 갖추어져 있습니다. 언어가 가진 의미를 다루는 것이 언어학에서의 의미론 입니다.
• 프로그래밍 언어에서의 의미론 : 프로그래밍 언어가 가진 의미를 확정시키기 위한 이론.
• 웹에 있어서의 의미론 : 리소스가 가진 의미를 확정시키기 위한 이론. HTML 등으로 표현한 텍스트가 어떠한 의미를 가지는지 프로그램에서도 이해할 수 있도록 한다는 목적이 있습니다.
• 사람이 읽고 이해하는 웹 페이지의 의미를 프로그램도 처리할 수 있도록 형식적으로 의미를 기재하기 위한 기술이 시맨틱 웹입니다.

microformats의 분류

• elemental microformats : rel-license와 같이 링크 관계를 사용해 메타 데이터를 표현하는 포맷
• compund mircroformats : class 속성을 사용해 계층구조가 있는 메타 데이터를 표현하는 포맷