[WEB] 03. HTML TAG
앞선 포스트에서 HTML 파일의 기본 형태와 태그에 대해서 소개하였다.
이번 포스트에서는 HTML에 쓰이는 여러 가지 종류의 태그들을 소개할 것이다.
1. 문서의 기본 구조 틀을 나타내는 태그
| <html> .... </html> | HTML 언어로 작성하기 위한 가장 기본적인 태그 |
| <head> .... <head> | heading 의 준말로 글의 머리말을 담당한다. |
| <title> .... </title> | 윈도우 타이틀 바에 나타나는 제목 |
| <!-- ... --> | 주석을 남길때 사용 |
2. 문단 혹은 줄을 바꾸는 태그
| <p> | 문단을 바꾸는 태그. 연속적으로 사용할 수 없다. |
| <br> | 문단을 바꾸는 태그. 연속적으로 사용이 가능하다. |
| <pre> .... </pre> | 여백이나 줄 간격 등을 고정시켜 주는 역할 |
*html 에서는 시작과 끝 태그가 짝을 이룬다고 했지만 위와 같이 예외인 경우도 있다.
3. 글자 조절하는 태그
| <font size = n> .... </font> | 글자의 크기(n)를 조절하는 태그, default = 3 |
| <h1> .... </h1> | 텍스트의 크기 지정. (h1~h6) |
| <strong> .... </strong> | Bold. 텍스트를 굵게 표시 |
| <b> .... </b> | |
| <em> .... </em> | 텍스트를 기울임 |
| <i> .... </i> | |
| <center> .... </center> | 가운데 정렬 |
| <blockquote> .... </blockquote> | 인용구 처리 |
4. 목록, 리스트 태그
| <ul> .... </ul> | Unordered List. 순서가 없는 일반적인 나열 |
| <ol> .... </ol> | Ordered List. 순서가 있는 목록 |
| <menu> .... </menu> | 메뉴 목록으로 길지 않은 문장의 열거에 사용 |
| <dir> .... </dir> | 디렉토리 목록으로 메뉴 목록보다 짧은 문장을 나열 |
5. 배경 이미지
| <body background = " "> | 배경 이미지 지정 |
| <body bgcolor= "#000000"> | 배경 색 지정 |
| <table background = " "> | 테이블 배경 이미지 지정 |
| <table bgcolor = "#000000"> | 태이블 배경 색 지정 |
6. 색상 지정 태그
| <body text = "#000000"> .... </body> | 글자색 지정 |
| <body link= "#000000"> .... </body> | 하이퍼링크의 색 지정 |
| <body vlink= "#000000"> .... </body> | 한 번 이미 누른 적 있는 링크의 색 지정 |
| <body alink= "#000000"> .... </body> |
누르고 있는 동안의 색 지정 |
7. 연결 태그
| <a href = "..."> .... </a> | 다른 사이트나 html로 연걸 |
| <a name = "...."> .... </a> | 앵커로 자신의 홈페이지를 연결 |
| <address> .... </address> | 주소에 대한 정의를 내려줌 |
| <a href = "mailto: E-mail address"> .... </a> | 편지 쓰기 창 |
8. 그 밖의 특수 문자
| <dfn> .... </dfn> | 정의 되어지는 단어에 대한 것을 말함 |
| <cite> .... </cite> | citation. 책이나 사진 등의 제목을 표시 |
| <samp> .... </samp> | 컴퓨터 상에 메시지 표시 |
| <var> .... </var> | 이탤릭체로 표현 |
| <sub> .... </sub> | 아래 첨자 |
| <sup> .... </sup> | 윗 첨자 |
| <blink> .... </blink> | 글자를 깜빡이게 표시 |
| <u> .... </u> | 밑줄 |
그 밖에도 수 많은 태그들이 있다. 다른 태그들은 앞으로 실습을 진행하면서 차근차근 알아보도록 하자.
위의 예시들을 실습한 페이지를 첨부한다.
http://hbweb.dothome.co.kr/2020Webcamp/hw2.html
Document
This is a paragraph with a line break. HTML images are defined with the img tag, and the filename of the image source is specified in the src attribute: This is a red paragraph. Mouse over this paragraph, to display the title attribute as a tooltip. You ca
hbweb.dothome.co.kr
태그 안의 태그
태그 안에 Contents 뿐만 아니라 또 다른 태그들이 들어갈 수 있다.
하지만 이때 태그는 반드시 연 순서대로 닫아서 짝을 맞추어주도록 하자.
올바른 예시
<aa> Contents1 </aa>
<aa>
<bb> Contents2 </bb>
</aa>
<cc>
<dd> Contents3 </dd>
<bb> Contents4 </bb>
<cc>
부적합한 예시
<aa>
<bb> Contents1 </aa>
</bb>
<aa>
<bb> Contents2 </cc>
<cc> Contents3 </bb>
</aa>