HTML 강좌 4강 - HTML 태그 익히기#3

HTML 강좌 4강 - HTML 태그 익히기#3

지난 강좌에 이어서 이번강좌에도 태그를 연습해 보도록 하자.

앞으로 더 많은 태그들이 있는데 하나하나 외우고 넘어가면 지칠 수 있으니, 적당히 연습해보고 넘어가도록 하자.

*H 태그

표제태그 라고 한다. 쉽게 이야기 하면 제목이라고 할 수 있다.

표제태그는 총 6단계가 있다.

<h1>오늘의제목</h1>

<h2>오늘의제목</h2>

<h3>오늘의제목</h3>

<h4>오늘의제목</h4>

<h5>오늘의제목</h5>

<h6>오늘의제목</h6>

이 6개의 단계는 글자의 크기를 변경한다.

예제를 통해 테스트를 해보자~

이렇게 코딩을 하고, 문서를 실행해보면~~

 

이러한 결과를 볼 수 있다.

약간 이상하지 않은가? 숫자가 무언가 어색..

1 ~ 6 까지의 단계 중 1부터 점점 작아지는 형태이다.

하지만 H태그 자체를 자주 사용하진 않으니 염두하지 말고 넘어가자~

*A링크 태그

이 태그는 정말 자주 사용한다.

이 태그의 사용법은 정확히 익히고 넘어가길 추천한다.

A링크 태그를 클릭하면 속성에서 설정해 놓은 URL로 페이지가 이동을 한다.

또는 새창으로 URL을 열게 할 수도 있다.

사용법은 다음과 같다.

<a href="http://blog.naver.com/kiara77">나의블로그</a>

보는 바와 같이 a태그는 시작태그와 종료태그가 있고, 그 사이에 이동할 URL의 내용을 입력한다.

그리고 href 속성에는 이동할 URL의 실제 주소를 입력한다.

이렇게 코딩을 한다.

 

이렇게 실행을 하고 클릭을 하면 설정한 URL로 페이지가 이동하는 것을 볼 수 있다.

A링크 태그에는 몇가지 속성이 있다.

(1)href : 이동할 URL의 실제 주소

(2)target : 이동할 URL의 타겟 - 현재 페이지에서 열리게 할지, 새로운 페이지에서 열리게 할지~ 즉 타겟을 정한다.

(3)title : A링크 태그의 타이틀

(4)name : A링크의 이름값

직접 코딩을 하고 테스트를 해보면 결과를 볼 수 있다.

이렇게 target의 값으로는 "_blank" 를 주었고, title의 값으로는 "블로그로이동" 이라고 값을 주었다.

_blank는 새로운 창으로 열리게 하는 속성값이고, title은 마우스를 갖다대면 나오는 부제라고 보면 되겠다.

 

다음과 같이 title의 값이 마우스를 갖다대면 나오는 것을 볼 수 있고, 클릭을 하면 새창으로 페이지가 뜨는것을 볼 수 있을 것이다.

그리고 A태그에는 페이지 이동 말고 현재 페이지에서 위치를 이동할 수 있는 기능도 가지고 있다.

이 기능은 내용이 별로 없는 페이지에서는 필요가 없고, 내용이 아주 많아 스크롤이 길게 생길 경우 필요한 기능이다.

바로 개발자가 지정해 놓은 위치로 스크롤을 이동시키는 기능이다.

간단하게 상단, 중단, 하단 이렇게 세개의 위치를 테스트 해보도록 하자.

사용법은 다음과 같다.

<p><a name="top">이곳은 상단</a></p>

<a href="#middle">중단으로 고고</a><br>

<p><a name="middle">이곳은 중단</a></p>

<a href="#top">상단으로 고고</a><br>

href 값에 이동할 위치에 있는 name값을 입력한다. 단 입력할 때 name값 앞에 #을 입력한다.

위와 같이 코딩을 하고 테스트를 해보자.

 

문서를 실행해보면 아주 긴 스크롤이 생기는 것을 볼 수 있다.

그리고 클릭을 하면서 결과를 보자.

(직접 코딩을 하고 테스트를 해보세요.)

다음 강좌에 이어서 태그를 연습해 봅시다~

예제 파일은 첨부파일에서 받을 수 있습니다 :)

04.zip