[HTML] HTML 문단, 목록, 링크, 이미지, 표 태그

문단 정렬

텍스트와 이미지 등 인터넷 문서에서는 왼쪽 정렬을 기본으로 한다.

<P></P>

텍스트를 정렬시키는 태그이다. 

<P ALIGN=LEFT | CENTER | RIGHT>

태그 사이에 들어간 내용들은 ALIGN 속성에서 지정한대로 왼쪽, 가운데, 오른쪽으로 정렬한다.

ex)

<P ALIGN=RIGHT>

놀러가고 싶다

여행가고 싶다
</P>

출력 결과

<aside> </aside>

<p>의 집합

문단 구분

<br>

개행 해주는 태그

ex)

놀러가고 싶다 

여행가고 싶다<br>

공부하기 싫다<br>과제하기 싫다

출력 결과

<p>

문단과 문단 사이에 공백라인이 들어간다.

ex)

놀러가고 싶다<br>여행가고 싶다<br>

공부하기 싫다<p>과제하기 싫다

출력결과

<DIV> </DIV>

영역 구분

<h>

문단이나 영역의 제목 구분한다. <h1>~<h6> 순서로 되어 있으며, 뒤로 갈수록 글씨 크기와 진하기가 감소한다.

<HR>

선을 그어 문단을 나누어주는 태그로, 선의 두께와 길이, 위치 등을 지정하는 속성이 있다.

<HR ALIGN=LEFT | CENTER | RIGHT>

선의 위치를 왼쪽, 가운데, 오른쪽으로 지정해준다.

<HR SIZE="픽셀 값">

선의 굵기를 지정해주는데, 굵기는 픽셀 값으로 나타낸다.

<HR WIDTH="픽셀 값이나 백분율">

선의 폭(길이)을 지정한다. 폭은 픽셀 값과 백분율로 나타낼 수 있는데 백분율은 화면에 대한 상대적인 백분율이다.

<HR NOSHADE>

이름에서 알 수 있듯이 '그림자 없음(No Shade)' 라는 뜻으로, 입체감 없이 보통 선으로 나타낸다. 

ex)

<HR><br>

<HR ALIGN=RIGHT><br>

<HR SIZE="5"><br>

<HR SIZE="10"><br>

<HR WIDTH="100"><br>

<HR WIDTH="50%"><br>

<HR WIDTH="50%", ALIGN=LEFT><br>

<HR NOSHADE>

출력 결과

<NOBR>

라인이 끊어지는 것을 막아준다. <br> 태그의 반대 역할을 한다.

리스트 

<UL> <LI> </LI> </UL>

순서가 없는 리스트(Unordered List)를 만들 때 사용한다.

<UL type="disc | circle | square"> 

원, 빈 원, 사각형 중 하나를 정해주는 속성

ex)

<ul>

<li>놀러가기</li>

<li>여행가기</li>

<li>과제하기</li>

</ul>

<ul type="disc">

<li>놀러가기</li>

<li>여행가기</li>

<li>과제하기</li>

</ul>

<ul type="circle">

<li>놀러가기</li>

<li>여행가기</li>

<li>과제하기</li>

</ul>

<ul type="square">

<li>놀러가기</li>

<li>여행가기</li>

<li>과제하기</li>

</ul>

출력 결과

<OL> <LI> </LI> </OL>

순서가 있는 항목(Ordered List)을 만들 때 사용한다.

<OL TYPE=A | a | i | 1> <LI TYPE=A | a | i | 1>

A일 경우는 A, B, C... 문자로, 1이면 1, 2, 3... 등으로 번호가 매겨진다.

<OL START=시작하는 숫자> <LI START=시작하는 숫자>

처음 시작할 값을 지정한다.

ex)

<ol>

<li>HTML 공부</li>

<li>JavaScript 공부</li>

<li>PHP 공부</li>

</ol>

<ol type=A>

<li>HTML 공부</li>

<li>JavaScript 공부</li>

<li>PHP 공부</li>

<li type=a>네트워크 공부</li>

</ol>

<ol start=3, type=i>

<li>HTML 공부</li>

<li>JavaScript 공부</li>

<li>PHP 공부</li>

<li>네트워크 공부</li>

</ol>

출력 결과

<DL> <DT> <DD> </DL> 

어떤 용어를 정의할 때 사용한다. <DT> 는 용어(Term)를 의미하고, <DD> 는 정의(Definition)를 의미한다.

- 이 태그의 시작과 끝을 알리는 태그로 <DL> </DL> 사용

- 정의할 단어나 제목을 쓸 때 <DT> 태그 사용

- 정의를 쓸 때 <DD> 태그 사용

ex)

<DL>

<DT>HTML이란

<DD>Hyper Text Markup Language의 약어이다.

</DL>

출력 결과

링크

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

- href : 링크 이름과 연결되어 있는 리소스(resource)의 주소

절대적 경로 지정 - 경로를 홈페이지 URL과 링크되는 요소가 있는 디렉토리 명까지 모두 지정해주는 방법이다. 일반적으로 외부 사이트에 있는 문서나 요소들을 링크시킬 때 사용된다.

상대적 경로 지정 - 경로를 디렉토리 명으로만 지정하는 방법이다. 일반적으로 한 사이트 내에 있는 요소들을 링크시킬 때 사용된다. 

- title : 연결되어 있는 리소스에 대한 설명, 롤오버 했을 때 툴팁으로 표시된다.

- target : 문서가 로드될 대상으로 종류는 아래와 같다.

- _self : 현재의 문서가 로드된 프레임으로 현재 문서가 사라지고, target의 기본값이다.

- _blank : 새로운 창(탭)을 띄우고 거기에 문서를 로드한다.

- _parent : 현재 프레임의 부모 프레임에서 새 웹페이지가 열린다.

- _top : 최상위 프레임에서 열린다. _parent 는 바로 이전창(부모창)에서 열리지만 _top은 최상위(가장 최고 부모) 창에서 열린다.

- 프레임의 이름

<a href="#hello"> </a> <a name="hello"> </a>

원하는 곳으로 이동할 수 있게 해주는 태그

<a href="#hello"> 태그는 링크시키려는 글자나 요소들에 사용된다.

<a name="hello"> 태그는 이동하고자 하는 위치에 사용된다. hello 위치의 내용은 동일해야 한다.

<a href="URL#hello"> 다른 문서 내의 특정 위치로 이동하고자 할 때 사용된다.

이미지

<img src="이미지가 위치하는 URL" alt="대체 텍스트" width="폭" height="높이" longdesc="링크" />

- src : source의 약자로 이미지가 위치하는 URL을 기술한다.

- alt : alternative의 약자로 한국어로는 대체 텍스트라고 한다. 이미지가 로딩되기 전이나, 이미지를 로딩할 수 없는 경우 이미지의 위치에 텍스트가 표시된다.

- width, height : 이미지의 크기

- longdesc : 이미지와 관련된 링크

표

<table> </table>

표 제작

<caption> </caption>

<table> 내에 들어가 <table> 내용 설명

<thead> </thead>

<table>의 머리 영역

<tbody> </tbody>

<table>의 본문 영역

<tfoot> </tfoot>

<table>의 꼬리 영역

<th> </th>

table head의 약자로, 표의 제목을 쓴다 (기본값은 굵은 글씨체에 중앙 정렬) <tr> 안에 들어간다.

<tr> </tr>

table row의 약자로 , 가로줄을 만드는 역할이다 (기본값은 보통 글씨체에 왼쪽 정렬) 

<td> </td> 

table data의 약자로, 셀을 만드는 역할을 한다 (기본값은 보통 글씨체에 왼쪽 정렬) <tr> 안에 들어간다.

 

<td colspan="합칠 열의 개수">들어갈 내용</td>

열 합치기

<td rowspan="합칠 행의 개수">들어갈 내용</td>

행 합치기