프론트엔드 HTML 프로그래밍 기초

2. HTML 기본태그

이번 강좌에서는 제목, 문단, 형식, 목록, 하이퍼링크등 HTML의 기본 태그들의 종류와 사용법을 배우게 됩니다.

이 강의를 통해 기본적인 HTML 문서를 작성 할 수 있고 원하는 목적에 따라 콘텐츠의 구조를 설계 할 수 있게 됩니다.



01: 기본 태그

<html>, <head>, <body> 태그

<html> 태그는 HTML 문서의 시작광 종료를 나타내는 기본 태그로 특별한 속성이나 사용법은 없습니다. <head> 태그는 HTML 문서에 필요한 여러 정보를 표시하는 메타 컨테이너로 다음을 포함합니다.

<body>를 구성하는 여러 태그들은 각각 사용 목적에 따라 필요한 태그를 선택해 콘텐츠를 제작 하면 됩니다. 다만 이들 태그들은 다음과 같이 블럭 혹은 인라인 특성을 가지고 있으므로 화면에 여러 태그를 함께 배치할 때 이러한 부분을 고려해야 합니다.

블럭(Block) 태그

블럭은 태그 구성요소들이 라인 전체를 차지해서 한줄에 여러 요소가 위치하지 못하는 태그를 말합니다.

인라인(Inline) 태그

인라인은 태그 구성요소들이 나란히 배치될 수 있는 태그를 말합니다.



02: 제목 태그

콘텐츠의 제목들을 표시할때 사용할 수 있는 태그 입니다. 큰 글자의 텍스트로 출력되는데 단순히 크기가 중요한 것이 아니라 문서내 콘텐츠들의 대->중->소 제목으로 이루어진 문서 구조를 표현하기 위한 용도로 사용됩니다.

또한 구글 검색엔진에 제대로된 문서구조를 제공해 좀 더 정확하게 검색 되기를 원한다면 제목 태그들을 잘 사용해야 합니다.

<h> 태그는 heading 이라고 하며 <h1> ~ <h6>까지 있는데, 숫자들은 제목의 레벨을 나타냅니다. <h1>이 가장 높은 레벨로 크기가 가장 크며 <h6>이 가장 낮은 레벨로 크기가 가장 작습니다.

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>


03: 문단 태그

<p> 태그는 paragraph 로 문단을 구분하기 위해 사용 합니다. HTML에서는 연속된 공백이나 줄 바꿈은 하나의 공백으로 처리하기 때문에 문단 구분 시 <p>태그를, 줄 바꿈시 <br>태그를 이용 합니다.

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>

result

This is a paragraph.

This is a paragraph.

This is a paragraph.

<br>태그는 닫는 태그가 없습니다. xml 규격으로 html을 표현하는 xhtml 시스템에서는 </br>과 같이 xml 규격에 따라 사용 할 수 있습니다. 또한 문단 구분을 위해 <br> 태그를 연속으로 사용하는 것 보다 <p>태그를 사용하는 것이 좋습니다.

<p> To break lines <br> in a text, <br> use the br element. </p>

result

To break lines
in a text,
use the br element.

HTML 소스 에서는 기본적으로 하나의 공백만 인식이 되고 줄바꿈의 경우에도 별도의 태그를 사용하지 않으면 한줄로 보이게 됩니다.

Hello             World       -> Hello World로 보임
Hello
World            -> HelloWorld로 보임

따라서 여러개의 공백을 넣으려면 &nbsp; 를 사용해야 합니다.

Hello &nbsp; &nbsp; &nbsp; World   -> Hello     World

소스에 작성한 그대로 화면에 출력하려면 pre 태그를 사용해야 합니다.

<pre>
Hello
  World           !!!
</pre>

위와같이 작성히 작성된 모양 그대로 화면에도 보이게 됩니다. 이 방법은 매우 특별한 경우에만 사용하며 일반적으로는 거의 사용할 일이 없습니다.



04: 형식 태그

형식 지정 태그들은 텍스트에 의미와 함께 효과를 부여 합니다. 텍스트를 굵게 출력하는 <b>, <strong>, 텍스트를 기울여 보여주는 <i>, <em>, 하이라이트 표시를 위한 <mark>, 문장의 취소선을 표시하는 <del> 등이 있습니다.

태그명 용도
<i> 이탤릭으로 텍스트를 기울임
<b> 굵은 글자
<tt> 타자기 글자 모양
<u> 밑줄
<strong> 강조 텍스트 - b 태그와 결과 동일
<sub> 아래첨자
<sup> 윗첨자
<em> 강조된 텍스트 - i 태그와 결과 동일
<del> 텍스트 취소선
<mark> 형광펜 형태의 하이라이트 표현




05: 목록 태그

목록 태그는 최신 HTML5 문서 작성에 있어 매우 중요한 태그중 하나 입니다. 카페나 블로그의 포스트 목록, 쇼핑몰의 상품 목록, 뉴스기사 목록 등 많은 웹 콘텐츠가 목록의 형태를 취하고 있기 때문에 이들을 표현하기 위한 목록태그는 레이아웃 지정을 위해 사용하는 <div> 와 함께 가장 많이 사용되는 태그중 하나 입니다.

목록을 만들기 위해서는 기본적으로 <ul> 또는 <ol> 태그를 사용하며 각각의 목록 아이템들은 <li>태그를 사용합니다. 단순한 리스트 나열 뿐 아니라 메뉴를 만들 때에도 사용합니다.

<ul>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ul>

result

<ol>
  <li>Listenelement 1</li>
  <li>Listenelement 2</li>
  <li>Listenelement 3</li>
</ol>

result

  1. Listenelement 1
  2. Listenelement 2
  3. Listenelement 3


06: 하이퍼링크

하이퍼링크는 웹의 대표적인 특징으로 <a>(Anchor)태그를 사용해 만들수 있습니다. href속성을 사용해 이동할 콘텐츠의 주소를 기술하면 됩니다. 이동할 콘텐츠는 html 파일이나 이미지 혹은 .hwp, .pdf 등 모든 파일이 될 수 있으며 URL을 이용해 서버의 콘텐츠를 지정하거나 프로그램을 호출하는 것도 가능합니다.

다른 서버 컨텐츠로 이동하는 것이라면 href 에 http:// 로 시작하는 URL이 들어가야 합니다.

<a href="이동할 콘텐츠" title="말풍선 도움말" target="브라우저 윈도우 옵션">링크 텍스트</a>

href 에 들어가는 이동할 콘텐츠의 위치는 상대경로절대경로로 표현 할 수 있습니다. 내 컴퓨터가 아니라 html 을 서비스하고 있는 웹서버 컴퓨터에서 콘텐츠간의 위치 이므로 개념을 잘 이해해야 합니다.

상대경로와 절대경로

target 속성 값

책갈피 구현

메뉴 
<a href="#m1">5.HTML이란 무엇인가?</a>
......
<p id="m1"></p>
<h3>5.HTML이란 무엇인가?</h3>

이미지 링크

텍스트가 아닌 이미지를 링크로 사용할 수도 있습니다. 이 경우 <a><img></a> 형식으로 사용하면 됩니다.

<a href=“http://www.gachon.ac.kr”>
  <img src=“gachonlogo.jpg” alt=“gachon_logo”>
</a>

참고 자료