HTML 기본 태그

안녕하세요 이번장에서는 HTML5의 기본적인 태그들을 정리하려고 합니다.

HTML은 문서의 구조를 표현하며 문서를 꾸미는 것은 대부분 CSS로 

넘어간 상태입니다.

버튼과 체크박스 알아보기

실제 <table> 태그에서 사용 했던 <tr><td>는 이런게 있었구나 정도로 보시면 됩니다.

예전의 HTML 방식으로 TABLE을 제작하면 이렇습니다.

HTML	CSS	JS
문서의 위치와 구조	문서의 꾸미기	문서의 이벤트 처리
성공	공부	열심히~!!

도서

rowspan="3"	1행 2열
	2행 2열
	3행 2열
4행 1열	4행 2열	4행 3열
colspan="3"

<tr> : 열을 담당합니다 

<td> : 행을 담당합니다.

<td rowspan="3"> : 수치값만큼 행을 합칩니다.

<td colspan="3"> : 수치값만큼 열을 합칩니다.

html을 구성하는 요소중 table은 중요해서 적었지만 지금은 안쓰입니다.

차후 css로 만들어서 연결해보도록 하겠습니다.

중요 태그

1. a태그 : html의 가장 중요하고 가장 많이 쓰이는 태그입니다.

        하이퍼 링크를 연결합니다.

• 현재창에서 티스토리가기


• 새창에서 티스토리가기
  

  

<ul>

   <li><a href="http://www.tistory.com/" title="티스토리가기">

         현재창에서 티스토리가기</a></li>

   <br />

   <li><a href="http://www.tistory.com/" title="티스토리가기" target="blank;">

        새창에서 티스토리가기</a><br /></li>

</ul>

상단의 이미지 클릭시 티스토리로 이동합니다.
<a href="주소" title="그림에 올렸을때 글씨가 나옴"> 링크가 걸린  a 구문 </a>

잠시 쉬어갑시다~~~

보물지도 찾아가기

보물지도입니다 눌러보세요~!!

2. p태그 : p는 paragraph의 약자로 문단을 의미합니다.

            div 속성으로 <p>태그만 있을시 줄바꿈 효과가 있습니다.

            같은 줄바꿈 태그중 <br> 태그가 있습니다.

            br 태그는 강제 줄바꿈 효과가 있습니다.

3. hr태그 : 하나의 줄을 긋습니다.

            문단 구별시 css로 하기 번거로울때 <hr>태그는 간혹 사용됩니다.

 

<hr>만 입력시 아래와 같이 하나의 선이 긋어집니다.

---

4.티스토리에서는 자동으로 주어지지만 웹문서에서는 

  특수문자를 사용해야 할때가 있습니다.

  

화면출력	html 구문
<	&lt;
>	&gt;
&	&amp;
공백	&nbsp;

5. h1~h6 태그 : 제목 표시 태그로 글자의 크기를 지정합니다.

                  css로 글자의 크기를 정하지 않을때 사용합니다.

HTML <h1>태그를 사용했습니다.

HTML <h2>태그를 사용했습니다.

HTML <h3>태그를 사용했습니다.

HTML <h4>태그를 사용했습니다.

HTML <h5>태그를 사용했습니다.

HTML <h6>태그를 사용했습니다.

6. ul, ol, li 태그 : 목록을 지정하는 태그

 

- ul태그 : (unordered list) 순서가 없는 목록을 표시할대 사용합니다.

- ol태그 : (ordered list) 순서가 필요한 목록을 표시할때 사용합니다.

- li태그 : (list) 목록 안에 각 항목을 표시할때 사용합니다.

--- ul 태그로 감쌌습니다. ---

• 1번째 입니다.
• 2번째 입니다.
• 3번째 입니다.

--- ol 태그로 감쌌습니다. ---

1. 1번째 입니다.
2. 2번째 입니다.
3. 3번째 입니다.

  <p>--- ul 태그로 감쌌습니다.&nbsp;---</p>

       <ul>

            <li> 1번째 입니다.</li>

      <li> 2번째 입니다.</li>

      <li> 3번째 입니다.</li>

</ul>

 <div>--- ol 태그로 감쌌습니다.&nbsp;---</div>

<ol>

<li> 1번째 입니다.</li>

<li> 2번째 입니다.</li>

<li> 3번째 입니다.</li>

</ol>

- dl, dt 와 dd 태그입니다. ( 참고만 하셔도 됩니다. )

항목1
항목에 관한 설명1
항목2
항목에 관한 설명2

   <dl>

<ol>

<dt>항목1</dt>

          <dd>항목에 관한 설명1</dd> 

<dt>항목2</dt>

          <dd>항목에 관한 설명2</dd>

</ol>

   </dl>