HTML 2

LeeMir, 03 January 2019

HTML 태그

HTML에서 사용할 수 있는 태그들을 알아보고자 한다. 다만, 모든 태그를 일일이 설명할 수 없으므로 자주 쓰이는 간단한 태그 위주로 적겠다. (복잡한 태그는 별도로 작성할 예정)

그 외 다른 태그들을 찾아보려면 여기를 추천한다.

<html></html> <head></head> <body></body>
HTML 기초 글에서 설명했듯이 기능을 한다기보다는 다른 태그들을 담는 태그라고 할 수 있다. html 태그 안에 head 태그와 body 태그를 담고, 주로 body 태그에서 페이지 레이아웃을 잡는다.
<style></style>
style 태그는 CSS를 다룰 때 사용한다. style 태그 안에서의 문법은 HTML과 다른 CSS 문법을 사용하니 주의하자.
<a href="https://leemir.github.io">Visit My Blog!</a>
a태그는 하이퍼링크를 걸 때 사용한다. 이와 같이 사용하면 다음과 같은 결과가 나온다.

Visit My Blog!

<address> (address) </address>
address 태그는 딱히 사용할 일은 없으나 굳이 쓰면 다음과 같다.
221B Baker Street,
UK


<audio controls>
	<source src="bgm.mp3" type="audio/mpeg">
</audio>

: audio 태그는 위와 같이 사용하는데, 실행하면 다음과 같다. (IE 8 이하에서는 지원되지 않음)

<br>
br 태그는 닫지 않는 태그이고, 엔터키를 입력 받지 않는 HTML에서 줄바꿈을 할 수 있다.
<button type="button">Click Me!</button>
button 태그는 GUI 특성상 많이 쓰일 수 밖에 없다. 생김새는 밋밋하지만 CSS를 이용하면 멋지게 바꿀 수도 있다.
<font></font>
font 태그는 혼자 쓰이지 않고 다양한 attribute와 함께 쓰인다.

<font size="3" color="red">This is some text!</font> -> This is some text! <font size="2" color="blue">This is some text!</font> -> This is some text!

<font face="verdana" color="green">This is some text!</font> -> This is some text!

<hn></hn>
h 태그는 제목(head)을 적을 때 유용하다. n은 1부터 6까지 존재하며, 숫자가 작을수록 글씨가 크다.
<hr>
hr 태그는 한 줄을 긋는다. 아래와 같이 말이다.
<i>Message</i>
i태그는 address태그와 크게 차이 없으나 일반 Text에 기울임효과만 추가한 것이라고 보면 된다. 다음과 같다. Message
<img src="earth.gif" alt="Earth" height="42" width="42">
img 태그는 이미지를 첨부하는 태그이다. 이 역시 attribute와 함께 쓰이고, 닫지 않는 태그이다. 링크에는 웹의 이미지 주소를 적어도 무방하다. Earth
<link rel="stylesheet" type="text/css" href="styles.css">
link 태그는 head 태그 안에 적는 몇 안되는 태그다. css 파일을 연동할 때 주로 사용하며, C언어로 치면 include, JAVA에서는 import같은 기능이라고 할 수 있겠다.
<mark></mark>
형광펜 기능을 한다.
<p></p>
p 태그는 문단(paragraph)을 뜻한다.
<pre></pre>
pre 태그는 내가 적은 것을 그대로 적을 수 있다. 예를 들면 HTML에서는 공백 문자&nbsp;를 쓰지않는 이상 공백을 두 번 이상 띄울 수 없다.
그렇지만 pre태그 안에서는
br태그 없이도 줄바꿈이 가능하며
공백을         몇 번이고 띄울 수 있다.
<s></s>
s 태그는 텍스트에 수정 줄을 긋는다.
<script></script>
HTML 문서 내에서 JAVA Script를 사용하고 싶을 때 쓴다.
<strong></strong>
strong 태그는 텍스트를 진하게 해준다.
<table></table>
table 태그는 tr, td태그와 함께 쓰이며, 표를 작성한다.
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

아래와 같다.

Month Savings
January $100
February $80
<ul></ul>
리스트를 작성할 때 li태그와 함께 쓴다.
<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>
  • Coffee
  • Tea
  • Milk