티스토리 뷰

4장. HTML5 기본태그(글과 관련된 태그)


이번 시간에는 기존에 사용되었던 글과 관련된 태그를 복습해 보도록 하겠습니다. 이미 이 부분을 알고 계신 분들도 많이 있으시리라 생각됩니다. 처음 접하시는 분들은 강의에 집중해 주시기 바랍니다.^^




글과 관련된 태그


1. <hn> ~ </hn> 태그

제목을 나타내는 태그입니다. <h1>에서 <h6>까지 있으며 <h1>태그가 가장 크고 <h6>태그가 가장 작습니다. HTML4에서는 <font>태그와 비교하면서 많이 설명이 되어졌지만 HTML5.0 에서는 <font>태그 자체를 사용하지 않으므로 비교설명은 하지 않고 <Hn>태그만 설명드리도록 하겠습니다.


예제 소스를 보도록 하겠습니다.


<body>
  <h1>첫번째</h1>
  <h2>첫번째</h2>
  <h3>첫번째</h3>
  <h4>첫번째</h4>
  <h5>첫번째</h5>
  <h6>첫번째</h6>
</body>




2. <p> ~ </p> 태그

영어의 paragraph를 의미합니다. 즉, 문장 여러개가 모인 문단을 만들어주는 태그입니다. 



3.<br> 태그

키보드의 엔터키를 친 것과 같이 다음 줄로 이동하는 역할을 합니다. 흔히 개행태그라고 불리는 태그입니다.



4. <a> 태그

링크를 만들어주는 태그입니다. 하이퍼텍스트란 누르면 다음 페이지로 이동하는 개념을 의미합니다.

href 속성을 이용해서 하이퍼링크가 될 페이지를 지정합니다.



5. 글자의 스타일

<b> ~ </b> : bold체를 만든다. 글자를 굵게해서 글자를 강조합니다.

<i> ~ </i> : 이탤릭체를 만든다. 글자를 기울입니다.

<sub> ~ </sub> : 아래첨자를 만든다. 

<sup> ~ </sup> : 위첨자를 만든다.

<ins> ~ </ins> : 밑줄그은 문자를 만든다

<del> ~ </del> : 취소선을 만든다.(가운데 선)


<body>
  <b>강조</b><br>
  <i>이탤릭</i><br>
  <sub>아래첨자</sub><br>
  <sup>위첨자</sup><br>
  <ins>밑줄그은문자</ins><br>
  <del>취소선</del><br>
</body>





<< 이전 강의로 이동하기

댓글