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

HTML의 구성요소

HTML의 가장 기본적인 구성요소는 헤더와 바디입니다. HTTP 메시지와 마찬가지로 헤더에는 문서의 메타 데이터를, 바디에는 문서의 내용 자체를 넣습니다.

헤더

• title: 문서의 타이틀
• link: 다른 리소스로의 링크
• script: JavaScript 등의 클라이언트 사이드 프로그램

• meta: 그 밖의 파라미터

  바디

  바디에 들어갈 요소는 크게 2종류로 나누어진다. 블록 레벨 요소와 인라인 요소다.

블록 레벨 요소

블록 레벨 요소는 문서의 단락과 표제 등 어느 정도 큰 덩어리를 표현한다.

인라인 요소

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

공통속성

HTML의 모든 요소는 id 속성과 class 속성을 가질 수 있습니다.

• id 속성

  • 문서 내에서 유일한 ID. 문서 내의 특정 부분을 URI로 나타낼 때 URI프래그먼트로 이용하거나 CSS로 스타일을 지정하거나 할 때 이용한다.

• class 속성

  • 요소가 속할 클래스. 해당 요소가 어떠한 의미를 가질 것인지 지정하는 메타 데이터로서의 역할을 한다. CSS에서의 스타일의 지정과 microformats 등에서 메타 데이터를 표현할 때 이용한다.

링크

• a 요소 - 앵커

  • HTML에서는 다른 웹 페이지에 링크하기 위해 앵커 태그인 a요소를 사용합니다. a요소의 내용을 가리켜 앵커 텍스트 라고합니다.

• link 요소

  • a요소는 HTML의 블록 요소 중에서 다른 웹 페이지로 링크하기 위해 사용하지만, link요소는 HTML의 헤더에서 웹페이지 사이의 관계를 지정하기 위해 사용합니다.

• 폼

  • HTML의 폼에서는 링크하는 곳의 URI에 대해 GET과 POST를 발행할 수 있습니다.
  • 폼에 의한 GET은 키워드 검색 등 사용자의 입력에 따라 URI를 생성할 때 사용한다.
  • 폼에서의 링크는 POST도 사용할 수 있습니다. POST는 리소스의 작성 등 사용자의 입력을 타깃 URI로 전송할 때 이용합니다.

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

• rel 속성

  • a요소와 link요소는 각각 rel 속성을 가지고 있습니다.
  • rel 속성의 값에는 링크하는 쪽과 링크되는 쪽의 리소스가 어떤 관계에 있는지 기술한다.
  • rel 속성의 값을 ‘링크 관계’ 라고 부릅니다.
  • HTML에서 가장 흔히 사용되는 링크 관계는 ‘stylesheet’다.

결론

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