HTML 독학을 위한 HTML의 기본 태그! (Hn,br,a 등등)
- programming/HTML
- 2020. 6. 20. 19:13
HTML의 기본문법과 HTML문서만들기를 통해서 이제 HTML문법에 맞는 HTML페이지를 만들 수 있게 되었습니다. 본문에 글씨만 덩그러니 있으니 제대로 된 홈페이지를 만들 수 없습니다. 이번시간에는 HTML의 <body></body>태그 사이에 들어가 본문을 꾸며주는 기본 태그들에 대해서 알아보겠습니다.
가장 많이 사용되는 HTML 태그!
advancedwebranking.com에서 제공하는 구글에서 검색된 710만개의 기본페이지 중 가장 많이 사용된 상위 20개의 태그 입니다. 당연 HTML 홈페이지를 만들기 위해서 사용되는 기본 틀인 <html>, <head>, <body>, <title>, <meta> 태그가 가장 사용하는 순위가 높은데 <div> 태그, <a>태그, <script> 태그 등등 밑에서 사용되는 태그들은 어떠한 기능을 가지고 있는지 간단한 HTML의 기본태그 표를 한번 보도록 하겠습니다.
HTML의 기본태그
태그 클릭시 해당 태그의 사용법과 사용에 대한 내용을 정리한 글로 이동됩니다.
문자(텍스트) 태그
|
<태그> |
기능 |
|
|
<h1>～<h6>까지 제목을 강조 (숫자가 높아질수록 글자의 크기는 작아짐) |
||
|
글자를 기울게 |
||
|
글자의 밑줄 |
||
|
글자를 굵게 |
||
|
글자를 이탤릭체로 표현 |
||
|
문서작업시 새로운 내용 추가됨을 표시 |
||
|
문서작업시 기존의 내용 삭제됨을 표시 |
||
|
문자를 강조 |
||
|
위첨자 |
||
|
아래첨자 |
||
|
형광색으로 표시 |
||
문단 태그
|
<태그> |
기능 |
|
|
단락 변경 |
||
|
개행 |
||
|
들여쓰기 주로 인용문에 많이 사용 |
||
|
개행 코드가 합쳐지지 않고 유지된 상태로 작성한 그대로 출력 |
||
| <center> |
가운데 정렬 HTML5에서는 적용 안됨. |
|
목록 표시
|
<태그> |
기능 |
|
|
순서가 있는 목록 1, 2, 3 또는 a, b, c |
||
|
순서가 없는 목록 ○ 또는 □ 등등 |
||
테이블(표) 태그
|
<태그> |
기능 |
|
|
표의 제목 |
||
|
도표의 제일 첫 행 |
||
|
도표의 제일 마지막 행 |
||
|
도표의 내용 |
||
|
표를 만들 때 사용 <tr>은 표의 행을 표현 |
||
|
표를 만들 때 사용 <tr>행 속에서 <td>는 열을 표현 |
||
기타 태그
|
<태그> |
기능 |
|
| <div> | 기능들을 묶어 그룹으로 표현 | |
|
<a> |
하이퍼 링크 |
|
|
<img> |
이미지 삽입 |
|
|
<embed> |
멀티미디어 삽입 |
|
|
수평선 줄긋기 |
||
|
주석 |
||
이번에는 그냥 이러한 기능의 태그들이 있다 라는 기본만 생각하고 넘어가도록 하겠습니다. 앞으로 이런 태그들을 하나하나 사용해보면서 " 아~~ 이런 기능이구나!" 라는 느낌을 받을 수 있으면 됩니다.
앞으로는 HTML 외에도 CSS와 JAVASCRIPT를 함께 공부하게 될텐데요. HTML만 공부한다고 홈페이지를 만들거나 다룰 수 없습니다. 앞으로 홈페이지를 만들어서 할 수도 있지만 블로그 글쓰기의 HTML 모드를 활용해서도 같이 공부하게 될 것입니다.
HTML과 CSS 그리고 JAVASCRIPT까지 공부해야 하는 이유는 HTML의 단순히 홈페이지를 구성하는 뼈대에 불과합니다. 여기에 CSS를 활용하여 살과 옷을 입혀주고 JAVASCRIPT를 활용해 기능을 구현해 주게 됩니다. 앞으로 하나하나 같이 공부하면서 HTML / CSS / JAVASCRIPT까지 잘 활용할 수 있도록 해보면 좋을 것 같습니다.
'programming > HTML' 카테고리의 다른 글
| HTML 독학을 위한 HTML의 문단 <p>, <br>, <pre>,<blockquote> (0) | 2020.06.21 |
|---|---|
| HTML 독학을 위한 HTML 표 만들기! <TABLE>, <TR>, <TD>,<TH> (1) | 2020.06.21 |
| HTML 독학을 위한 HTML 문자 태그활용 <hn>, <b>, <i>, <u> (3) | 2020.06.20 |
| HTML 독학을 위한 HTML문서 만들기! (1) | 2020.06.18 |
| HTML 독학을 위한 HTML이란? / HTML의 기본 구조 (7) | 2020.06.18 |
