블로그를 이사하면서 글들을 정리하는데 처음 시작할때 공부 하던건 정리를 해야겠다 싶었다.
왜 XHTML 키워드에 html 태그들의 정의를 정리해서 올렸는지 모르겠다.
그때 당시엔 열심히 그저 습득하기 바빴던것 같다?
일단 그 당시의 글을 그대로 적어본다.
log 2015. 6. 8. 14:45
중요한 부분 부터 h1~h6
블록요소
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
블록요소 , 자동줄바꿈
이미지에도 사용?
<p></p>
**꼭 닫는태그 슬러시 해줘야한다.
IE기준으로 태그안에 width/height 값넣어줘야한다. 꼭!
width height 자체를 생략 가능하다.
<img src="" width="" height="" alt=""/>
중요 순서 상관 없는 목록 (날짜별...그냥 무작위 순서)
리스트의 앞에 붙는 아이콘 모양은 변경 가능하다.
<ul>
<li></li>
<li></li>
</ul>
선물을 검색시 나오는 정의 내용
dt(선물), dd(설명)
<dl class="">
<dt></dt>
<dd></dd>
</dl>
문맥상의 중요성 을 표현
굵게 표현
스크린리더기가 크게 읽는다.
<strong></strong>
문맥상 강조할 부분 표현
기울임체로 표현
<em></em>
i : 기울임체
b : 굵게 표현
크로스브라우징 지원X
header/container/footer 사이에 구분 하여 레이아웃 작업시 유용
target 속성 : _blank/_self/_parent/_top (새창/현재창/이전에연창/제일처음연창)
<a href="#" title="" target=""></a>
<iframe src="" frameborder="0" scrolling="" width="" height="" name="" title="" marginwidth="0" marginheight="0 "cols="" rows=""></iframe>
오직 주소만 쓴다.
기울임체로 표현
<address></address>
블록단위
<div class=""></div>
인라인 단위
<span></span>
게시판 작업 시 사용
th만 센터정렬
<table border="0" cellpadding="0" cellspacing="0" summary=""><!-- summary:테이블 요약 -->
<caption>테이블제목</caption>
<colgroup>
<col width=""/>
</colgroup>
<thead><!-- 머릿글정보 -->
<tr>
<th scope="">제목</th><!-- scope = "col row rowgroup colgroup"-->
</tr>
</thead>
<tfoot><!-- 꼬릿말정보 -->
<tr>
<td colspan="" rowspan=""></td><!-- colspan:가로(열병합), rowspan:세로(행병합) -->
</tr>
</tfoot>
<tbody><!-- 내용정보 -->
<tr>
<td></td><!-- headers = "" 병합된 테이블에서 제목과 셀의 연관성 있는 관계를 지정.-->
</tr>
</tbody>
</table>
아이디,회원가입,선택목록 선택 후 바로가기 가 X, Go와같은 버튼을 클릭시 갈 수 있도록.
method=전송방식(get,post)
action="실행프로그램"
name="form의이름"
<form method="post" action="">
<fieldset><!-- 복수의 폼컨트롤을 그룹화 하기위해서 사용 -->
<legend></legend><!-- fieldset의제목 -->
<input type="text" name="" value="" title="" maxlength=""/><!-- 텍스트 입력-->
<input type="password" name="" title=""/><!-- 비밀번호 입력 -->
<input type="button" name="" title="" action=""/><!-- 버튼 action="reset, submit" --
<input type="image" src="" name="" alt="" title=""/><!-- 이미지 버튼 -->
<input type="file" name="" title=""/><!-- 파일찾기 -->
<input type="checkbox" name="" title=""/><!-- 다중선택 박스 -->
<input type="radio" name="" title=""/><!-- 선택 -->
<input type="hidden" name="" title=""/><!-- 사용자에게 보여줄 필요가 없는 값을 처리 페이지에 넘겨줘야 할 때 사용 -->
<textarea name="" cols="" rows="" title=""></textarea><!-- 긴글 입력 -->
<select name="" title=""><!-- 선택메뉴 -->
<optgroup label=""><!-- option 그룹이 길때 관련정보를 묶어준다. -->
<option value="" selected="selected"></option>
<option value=""></option>
</optgroup>
</select>
</fieldset>
</form>
form요소의 접근성향상
id와 for 값이 동일 해야함
<label for=""></label><input type="text" name="" title="" id=""/>
이택릭체로 표현
<dfn></dfn>
인라인요소
컴퓨터나 프로그래밍 코드 일부를 그대로 표시하고자 할때
<code></code>
컴퓨터 프로그램에서 샘플을 출력할때
<samp></samp>
Kbd : 유저키보드 입력 즉 키보드 입력을 지정할때 .. ctrl...
var : 변수입력 시
<Kbd></Kbd> <var></var>
주로 작품명 그림이름 책이름 영화이름 등등을 표시하거나 인용할 때 쓴다.
<cite></cite>
abbr : 6브라우저 에서는 title 을 지원해 주지않는다. 지원하려면 span태그로 값싼 후 스판테그에 title 적용
<span><abbr></abbr></span>
‘abbreviation’의 예로는 ‘NATO’, ‘F.B.I.’ 등이 있고 ‘acronym’의 예는 ‘Inc’, ‘etc’ 등이 있다.
blockquote : 긴인용문 또는 긴인용구 전 후에 자동 여백이 생김 (들여쓰기) / 블럭 요소이지만 직접인라인요소와 텍스트를 포함하는 것이 불가능 하므로 다른 p요소등으로 포함해야한다,
q : 짧은 인용을 나타내는 태그
<blockquote><p>웹사이트는 넓게 자신 이외의 제3자에 공개하는 것을 전제로 한다.</p></blockquote>
pre태그는 다른태그안에 사용하지 말아야 한다.
입력한 그대로를 보여준다 공백등등..
<pre></pre>
문사에 추가된 내용을 밑줄로 표현
<ins></ins>
문서에 삭제된 내용 취소선으로 표현
<del></del>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> // 문서선언
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko"> // 네임스페이스,언어코드
<head>
<title> </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> //문자인코딩
<meta name="keywords" content=""/>
<meta name="description" content=""/>
</head>
<body>
<body>
</html>
//W3C//DTD XHTML 1.0 Transitional//EN - 공개식별자
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd - 시스템식별자
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1.1/DTD/xhtml1.1.dtd">