HTML2nd : 하이퍼링크, 폼과 테이블

블록레벨요소와 인라인요소

블록레벨요소
한개의 독립된 덩어리, 인라인요소와 텍스트 포함 가능, 일부는 다른 블록 레벨 요소도 포함 가능 - h1~h6, p, address
인라인요소
행 안의 일부, 텍스트와 동격의 요소, 블록 레벨을 포함할 수 없다. body요소 직접적 하위 내용으로 하는 것은 피한다.- a, img, em, strong

p : paragraph , <br />

'단락', '문장의 한 덩어리'
블록레벨요소를 포함할 수 없다.

line break
종료태그 불필요

					<p>잘 지내시나요?<br />
					나는 잘 지냅니다.<br />
					열공하세요.</p>

address

페이지 끝부분의 푸터 정보로서 공개일과 갱신일, 연락처(이메일)등을 포함한다.
블럭 레벨 요소 포함할수 없다.
body, blockquote, div, form, fieldset, object의 자식요소로 존재하되 img, object, map등의 인라인 요소는 포함해서는 안된다. 

					<address>smart0971@nate.com</address>

구분선 hr : horizontal rule

블록 레벨 요소이지만 빈 요소. 종료태그 없음
전후의 내용을 명확히 구분짓는 의미

					<div class="header">
					<h1>아는 디자이너</h1>
					</div>
					<hr />
					<div class="content">
						<p>본문</p>
					</div>

인용문 blockquote

블록 레벨 요소이지만 직접 인라인 요소와 텍스트를 포함하는 것은 불가능

인라인에서의 인용에는 <q>요소를 쓰기도 한다.

					<blockquote>꿈이야 말로 진정 자연스러운 것이다.<br /> 자연의 손 길 앞에서도 쇠퇴하지 않으니.</blockquote>


					<p>영국 일간 텔레그래프는 <q>오바마가 펜실베니아와 오하이오, 위스콘신주 등 주요 접전 지역에서 승기를 잡았다</q>며
					<q>재선에 성공할 것으로 보인다</q>고 전했다.</p>

정형화된 텍스트 pre

줄바꿈과 스페이스가 그대로 브라우저에 표시되는 텍스트

보통 code요소, 스크립트언어등 소스코드를 표시하거나, 정형시를 표현하는데 사용된다.

img, big, small, sub, sup, ins, del, label, input, select, textarea, button, noscript는 포함할 수 없다.

					<pre>
						내 마음의 어딘듯 한편에
						끝없는 강물이 흐르네
						돋쳐오르는 아침 날빛이
						빤질한 은결을 돋우네
					</pre>

표 table

  • 행 <tr>,열 <th>, 데이터 셀 <td>
  • 행 그룹화<thead>,<tbody>,<tfoot>, 열 그룹화<colgroup>,col>
  • 셀 병합 colspan, rowspan
  • 좀더 높은 레벨의 셀 관련 scope
					<table summary="이 표는 보스턴 레드삭스 월드시리즈 성적 차트입니다.">
					<caption>테이블 캡션</caption>
					<colgroup><col width="20%" /><col width="30%" /><col width="40%" /></colgroup>
					<thead>
					<tr>
						<th scope="col">연도</th>
						<th scope="col">상대팀</th>
						<th scope="col">시즌성적(승-패)</th>
					</tr>
					</thead>
					<tfoot>
					<tr>
						<td colspan="3">단위 등 테이블 하단 tfoot영역</td>
					</tr>
					</tfoot>
					<tbody>
					<tr>
						<th scope="row">1918</th>
						<td colspan="2">가로병합</td>
					</tr>
					<tr>
						<th scope="row">1916</th>
						<td>브룩클린 로빈스</td>
						<td>91-63</td>
					</tr>
					<tr>
						<th scope="row" rowspan="2">1914</th>
						<td>필라델피아 필리스</td>
						<td>101-50</td>
					</tr>
					<tr>
						<td scope="row">뉴욕 자이언츠</td>
						<td>105-47</td>
					</tr>
					</tbody>
					</table>

a

a 요소안에 a는 포함 할 수 없다.
title로 링크의 보충정보를 표시한다.

					<a href="mailto:smart0971@nate.com">smart0971@nate.com</a>
					<a href="http://www.idowww.com" target="_blank" title="새창으로">idowww.com</a>

img

인라인 요소이지만 빈요소이므로 종료태그가 불필요
src속성와 alt속성이 필수
longdesc속성으로 alt속성 보완
width, height 속성

					<img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/370464_1791095554_252091650_q.jpg" alt="쭈" />

강조 em : emphasis

이택릭로 표현됨

					<p><em>강조</em>는 이렇게~</p>

더 강한 강조 strong : strong emphasis

볼드체로 표현됨

					<p><strong>더한 강조</strong>는 이렇게~</p>

생략어(abbr : abbreviated) & 두문자어(acronym: acronym)

abbr은 한문자씩 발음하는 단어, acronym은 한단어로 발음하는 단어, 헷갈리면 abbr로

title속성으로 전체 철자를 지정

					<abbr title="Social Networking Services">SNS</abbr>의
					<acronym title="National Association of Securities Dealers Automated Quotations">NASDAQ</acronym> 상장

추가글 ins(insert text) 과 삭제글 del(deleted text)

문서안에서 어떤 텍스트가 변경되었는지를 사용자에게 전달

datetime, cite, title 속성을 가짐

					<ins> 덧붙이는 내용 </ins>
					<del> 삭제한 내용 </del>

위첨자 sup(superscript) 와 아래첨자 sub(subscript)

					<p>2<sup>2</sup></p>
					<p>H<sub>2</sub>O</p>

정의어 dfn : instance definition

인라인요소, 인라인 요소나 텍스트를 포함할 수 있다.

문서안에 구체적인 의미가 부여된 전문용어나 관용구 등으이 어구

그룹화 요소 div와 span

id, class속성으로 식별자 지정

div

블럭 레벨 요소

span

인라인 요소

주석

이중하이픈(--)사용 금지

					
					주석사이