Html의 기초 tag 정리

1 분 소요

Html

개발도구

크롬

구글 개발자 도구
네트워크 감시 (구글 개발자 도구 Network사용)

에디터

Aptana : 소스코드를 작성하는데 필요한 도구

Syntax

DTD(Doctype)

HTML코드가 어떤 버전을 따라 만들었느냐 하는 정보를 표시

BODY

웹 브라우저 상에서 보이는 화면의 내용이 들어있는 곳

`<링크>`

<a href="URL" title=설명" target="문서가 로드될 대상"> 링크 이름 </a>

href : 클릭시 연결될 주소
title : 마우스 over 했을때 표시되는 툴팁
target : 문서가 load될 대상
- _self
- _blank
- iframe id의 속성값
Bookmark기능 : Url 에 #reference 해당 페이지의 문서 안에 name 의 속성 값에 reference 이동하도록 함

<a name="reference">hello world</a>

`<아이프레임>`

html의 문서 안에서 특정 공간애 다른 html문서를 로드 하는 것

<iframe id="sample" src="http://abc.com" width="" height=""></iframe>

`<문단>`

하나로 묶을 수 있는 짧은 단위

<p>hello word</p>

`<줄바꿈>`

<br />

띄워쓰기

웹 상에서는 White space를 한 번만 인정하기 때문에 아래 syntax를 이용하면, html 상에서
여러번 띄워쓰기 할 수 있다.

&nbsp

`<이미지>`

<img src="이미지 위치" alt="대체텍스트" width="폭" height="높이" longdesc="링크" /> //닫히는 tag가 
없음

alt : 이미지를 로딩할 수 없는 경우 이미지 위치에 텍스트 표시(Browser마다 다를 수 있음)
longdesc : 이미지와 관련된 링크

`<목록>`

연관되어 있는 항목을 나열 할때 사용

순서가 없는 리스트
- 항목1
- 항목2
- 항목3

<ul>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ul>

순서가 있는 리스트
1. 항목1
2. 항목2
3. 항목3

<ol>
    <li>항목1</li>
    <li>항목2</li>
    <li>항목3</li>
</ol>

`<아이프레임, 프레임>`

iframe : web page 안에 web page를 삽입 하는 기술

<iframe src="/url" width="너비" height="높이" scrolling="auto|yes|no"></iframe>

frame : iframe과 마찬 가지로 web page 안에 web page를 삽입 하지만, 다른점은 화면에 여백이 없이 공간을 차지한다는 것이 다르다.

[Html5] 에서는 사용하지 않는다.

  <frameset cols="25%,50%,25%">  
    <frame src="frame1.html" >  
    <frame src="frame2.html">   
    <frame src="frame3.html">  
  </frameset>  

이스케이핑

이스케이핑이란? 브라우저에 의해서 해석되도록 약속된 문자.

&quot;   //"
&amp;    //&
&lt;    // <
&gt;    // >
&nbsp;  // 공백

HTML 특수문자 리스트로 찾아 보면 더 많은 정보를 찾을 수 있다.

`<표>`

이름	성별	나이
철수	남	6
영희	여	2

<table>
    <tr>
        <td>이름</td><td>성별</td><td>나이</td>
    </tr>
    <tr>
        <td>철수</td><td>남</td><td>6</td>
    </tr>
    <tr>
        <td>영희</td><td>여</td><td>2</td>
    </tr>
</table>

이름	성별	나이
철수	남	6
영희	여	2

<table>
    <tr>
        <th>이름</th><th>성별</th><th>나이</th> //헤더를 명확하게 표시
    </tr>
    <tr>
        <td>철수</td><td>남</td><td>6</td>
    </tr>
    <tr>
        <td>영희</td><td>여</td><td>2</td>
    </tr>
</table>

이름	성별	나이
철수	남	비공개
영희	여	비공개

<table>
    <tr>
        <th>이름</th><th>성별</th><th>나이</th>
    </tr>
    <tr>
        <td>철수</td><td rowspan="2">비공개</td> //여기서 부터 병합
    </tr>
    <tr>
        <td>영희</td><td>여</td>
    </tr>
</table>

이름	성별	나이
철수	비공개입니다.
영희	여	2

<table>
    <tr>
        <th>이름</th><th>성별</th><th>나이</th>
    </tr>
    <tr>
        <td>철수</td><td colspan="2">비공개입니다.</td>
    </tr>
    <tr>
        <td>영희</td><td>여</td><td>2</td>
    </tr>
</table>

Twitter Facebook LinkedIn

Kim.jh