티스토리 뷰

IT 이야기/프로그래밍

[HTML5 강의] 4. HTML5의 기본 태그, 텍스트 관련 태그

하늘과 나b 2013. 11. 22. 13:33

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>





<< 이전 강의로 이동하기

'IT 이야기 > 프로그래밍' 카테고리의 다른 글

JQuery Slider 추천! bxSlider, 간단한 설치, 애니메이션까지  (1) 2014.02.23
[C#] 서버와 클라이언트 파일 전송 기본 예제  (8) 2013.12.05
[C언어] malloc(), free() 함수를 이용한 메모리 동적 할당 예제  (4) 2013.12.05
[C언어 소스] 주소 관리 프로그램 소스  (28) 2013.11.26
[HTML5 강의] 5. HTML5 기본태그, 목록 만들기  (0) 2013.11.22
[HTML5 강의] 1. HTML5 시작하기  (2) 2013.11.22
[HTML5 강의] 3. HTML5 기본 태그, 시멘틱(semantic) 태그  (2) 2013.11.21
[HTML5 강의] 2.1 HTML5의 기본  (0) 2013.11.21
[HTML5 강의] 2. HTML5 실행해보자. 웹 브라우저 설치하기  (0) 2013.11.21
[한방에 이해하는 C언어] 입력을 받자 scanf 함수  (0) 2013.11.11
공유하기 링크
댓글