HTML에서 많이 사용하는 기본 태그

 

 

 

 

텍스트

- <p></p> : 단락. 문단과 문단 사이 여백 생김

- <br> : 줄바꿈

- <pre></pre> : 줄바꿈 등을 포함하여 개발자가 입력한 그대로 출력

- <h1></h1> ~ <h6></h6> : heading. 검색엔진 인덱싱 때문에 머리기사에만 사용해야 함. h1이 가장 큼.

- <!-- --> : 주석

 

* 텍스트 서식은 CSS의 font-weight 속성을 사용하는 것이 원칙. <b>, <i>는 최대한 사용하지 않기.

- <b></b> : 볼드체 (유사한 태그는 브라우저마다 출력이 상이할 수 있음)

- <i></i> : 이탤릭체

- <strong></strong> : 강하게 표시. 중요한 텍스트에 권장

- <em></em> : 텍스트 강조. 강조할 텍스트에 권장.

- <code></code> : 코드 텍스트

-  : 위 첨자(superscript)

-  : 아래첨자(subscript)

- <mark></mark> : 하이라이트된 텍스트

- <hr></hr> : horizontal. 수평선

 

* 태그 내에서 특수문자를 사용하고 싶을 땐 아래와 같이

- &nbsp; : 공백

- &lt; &gt; : <>

- &quot; : "

- &amp; : &

 

* 한글 깨질 때

- euc-kr

- utf-8

 

 

 

리스트

- <ol><li><li>...</ol> : ordered list

- <ul><li><li>...</ul> : unordered list

- <dl><dt><dd></dl> : definition lists. dt는 항목, dd는 항목 설명

 

 

 

하이퍼 링크

- <a href="링크 또는 위치-파일명, #id 등" target="_blank / _self / _parent / _top"> 표시문자 </a>

- 표시문자는 클릭 가능하다는 것을 나타내기 위해 밑줄 표시됨

- _blank : 새창으로 열기 

- _self : 현재창으로 열기 (생략시 디폴트)

- _parent : 부모 프레임에 새로운 페이지 적재

- _top : 현재창으로 열고 다른 모든 프레임 닫기

- <a id="id"> : id를 통해 동일한 페이지 내 점프 가능

 

 

 

이미지

- <img src="위치-파일 or 링크" alt="사진설명" border="10" width="100px" height="50px">

- 이미지를 올리기 전 일정 크기/용량 이하로 줄이는 것이 좋음. (로딩속도)

- width와 height를 조정하는 것은 이미지파일 크기는 그대로고 보이는 크기만 줄어드는 것

 

 

 

테이블

- <table border="1"> </table> : border는 "" 또는 "1"을

- <tr> <td></td> <tr> 형태로 주로 사용. <tr>은 행, <td>는 열. width / height 속성 있음.

- <th> :  table header. <tr>대신 사용할 수 있으며 굵은 글씨로 출력됨.

- <caption></caption> : 테이블 상단 가운데정렬로 테이블 이름이 표시됨.

- rowspan : 현재 셀 위치에서 n개의 행 병합. 세로로 넓힘.

- colspan : 현재 셀 위치에서 n개의 열 병합. 가로로 넓힘.