Study Home

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

HTML의 구성 요소

HTML의 기본적인 구성요소는 헤더와 바디. 헤더는 문서의 메타 데이터, 바디는 문서의 내용.

헤더

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

바디 요소는 블록 레벨과 인라인 요소가 있다. 블록 레벨 요소는 문서의 단락과 표제 등 어느 정도 큰 덩어리를 표현한다. 인라인 요소는 블록 레벨 요소 안에 들어가는 요소를 강조나 줄 바꿈, 이미지 삽입등을 표현한다.

그 외의 공통 속성들은 id 속성과 class 속성을 가질 수 있다. id 속성은 말 그대로 그 identification을 주는 거다. 그리고 URI fragment로서 특정 리소스 안의 어떤 부분을 가리킬 때도 이용한다. class는 해당 요소가 어떠한 의미를 가질것인지 지정하는 메타 데이터의 역할을 한다. CSS에서의 스타일의 지정과 microformats 등에서 메타 데이터를 표현할 때 이용한다.

링크

<a> 요소는 앵커 태그이고 보통 href라는 속성을 같이 써서 다른 웹의 링크를 해준다.

<a href ="http://www.google.com">구글링크</a>

<link> 요소는 다른 웹페이지와의 사이의 관계를 지정하기 위해 사용된다

<link rel="index"href="http://www.example.com/index.html"/>

<img src>는 이미지 혹은 그 밖의 객체 삽입용 이다.

<img src="http://example.com/picture.png>" alt="사진" />

form 이라는 태그가 있다. 이 form 이라는 태그를 쓰면 get랑 post를 쓸 수 있다. 보통 form 태그에는 input 속성이 있는데 이 속성을 써서 입력값에 비례하여 get을 해줌으로써 새로운 URI를 생성한다. post로 요청 시에는 요청에 따라 그에 대한 정보만 준다.

HTTP, URI, Hypermedia에 의한 링크가 서로 맞물려서 웹이 성립된다. HTML로 링크를 설계할 때는 링크를 따라가는 것으로 application 상태가 변한다.

Microformats

Microformats는 semantic web을 구현 할 수 있게끔 만드는 기술중 하나이다. Semantic이란 의미론이라고 한다. 웹에서의 semantic은 HTML과 XML로 기술된 리소스의 의미를 프로그램으로 처리하는 방식이다.

Microformats 전에 RDF가 나왔었는데 이것은 주어, 술어, 목적어 등을 구성했었다. 그러니 이것은 나중에 시장 되었다. 그 이유는 커질수록 작성이 복잡해지고, 통일적인 작성이 힘들고, 그리고 대상 데이터와의 독립된 메타 데이터가 필요했다.

Microformats은 레이아웃을 표시하는 HTML 문서 자체에 의미를 부여하기 위해 메타 데이터를 집어 넣는 기술이다.

Microformat목록

microformat는 2개로 분류 할 수 있다. elemental microformats와 compound microformats. elemental은 위에 a태그 와 link태그랑 같이 쓰는 링크 관계 ‘메타 데이터를 표현하는 포맷이다. rel-license와 rel-nofollow이라는 것도 있다. license는 라이센스 정보를 표기해주고 nofollow는 댓글에 스팸 행위를 막기 위해서 있는 것이다. compund는 hCalendar같은 것을 써서 주로 class 속성을 사용해 계층구조가 있는 메타 데이터를 표현한다.

그래도 이러한 microformat에도 문제가 있었다. 같은 class 속성과 rel 속성 값을 가진 웹페이지가 있으면 에러가 뜨거나 같은 값으로 만들 수 가 없다.

프로그램을 위해서 별도의 웹 API를 제공하게 되면 웹서비스와 웹 API에서 제공하는 기능이 달라지기 쉽고, 개발 규모의 증대에 따른 유지 보수성 저하가 있고, 그리고 웹 API 필요한 기술의 습득 비용이 발생한다. 이러한 것들을 보완 해주는 게 microformats 이다.