문서를 이동하는 태그 A

어떤 웹사이트든 문서를 이동하는 것을 이동 하는 걸 보았을 것입니다.
지금 이 강좌도 글을 클릭 하여 들어 왔을 것입니다. 이것은 <A> 태그를 통하여 만들 수 있습니다. 이 태그를 확인을 하려면 적어도 2개의 문서가 필요 하겠지요?
이 <A> 태그가 HTML의 가장 큰 특징이라고 해도 과언이 아닙니다.

href : 문서연결의 경로 지정, 해당 URL 경로 지정
name : 위치이름 ( 책갈피 기능에 쓰인다. )
target : 문서 출력 창 지정 ( _top / _blank / _parent / _self / frame name )
mailto : 전자메일 연결

 

target 종류에는 _top / _blank / _parent / _self / frame name 이 있다고 위에서 설명 했는데요.
우선 top 이것은 프레임을 사용했을 때 모든 프레임을 무시하고 전체 창으로 문서를 불러 옵니다. blank 는 위의 예제에서 한 것 처럼 새창으로 문서를 불러 오는 것입니다.
parent는 최상위 창으로 문서를 불러 오고 self는 현재 진행 하고 있는 창으로 문서를 불러 옵니다. frame name 은 꼭 이렇게 쓰는 것이 아니라 프레임을 사용했을 때 프레임에 이름을 주어서 그 쪽 프레임으로 문서를 불러 오겠다고 하는 것입니다.
메일을 링크 실킬 때는 그냥 ‘mailto:자기메일주소’ 이렇게 하면 됩니다. 이 링크를 클릭 했을 때는 윈도우에 깔려 있는 아웃룩이 작동을 하지요.

이것이 바로 책갈피 기능입니다. <A> 태그로 이름을 지정하고 <A> 에서 문서경로를 지정 하는 곳에 # 을 붙이고 아까 지정한 이름을 써 넣어 주시면 됩니다.

경로의 이해

경로에는 2가지가 있습니다. 절대 경로와 상대 경로가 있지요.
절대 경로는 절대적인 경로. 그러니깐 예를 들어 야후 사이트, 네이버, 아님 eyes of siche 와 같은 사이트를 링크를 건다고 하면 당연히 절대 경로인 바로 사이트의 주소를 써야겠지요. 하지만 자신의 홈페이지를 만든다고 했을 때의 절대 경로란 예를 들어 c:homeindex.html 이런 식이겠지요. 이런 식으로 자신의 홈페이지를 계정에 올린다면 자신은 그홈페이지를 볼 수 있습니다. 자신의 하드 드라이브 즉, c드라이브 안에 home 이라는 폴더 안에 index.html 라는 파일이 있습니다. 하지만 당신의 홈페이지에 들어 가는 네티즌들의 c드라이브 안에 home 폴더 안에 똑같은 index.html 파일이 들어 있다는 것은 기적입니다. 로또의 확률 보다 엄청나게 다이나믹 하게 적지요….-0-;; 자신의 홈페이지를 계정에 올리는 순간 그 역시 절대 경로가 되지만 그것을 일일이 맞추어 가면서 만들기란 정말 어의가 없는 행동이 아니라고 볼 수 없습니다.
말이 길어 졌는데 이래저래 하여 홈페이지를 만들 때 중요한 상대경로를 자세히 알아 보겠습니다.


만약 위와 같은 경로가 있다고 예를 들겠습니다. index.html 에서 image 폴더 안에 있는 siche.gif 그림 파일을 불러 온다고 합니다. 그럼 <img src=”image/siche.gif”> 라고 해야 합니다.
여기서 ‘/’ 이놈은 경로를 나타낼 때 폴더안 이라고 생각 하시면 됩니다. 그럼 my_banner.gif 의 그림 파일을 불러 온다고 하면 <img src=”image/banner/my_banner.gif”>이지요. 이것은 하위 폴더로 이동할 때였습니다.
그럼 상위 폴더로 이동 하는 것은 어떻게 할까요? banner.html 문서에서 image 폴더안에 있는 siche.gif 그림 파일을 불러 온다고 합시다. 그럼 <img src=”../image/siche.gif”> 이렇게 나타낼 수 있습니다. ‘../’ 이놈은 경로를 나타낼 때 바로 한 폴더 위쪽으로 가자 라는 뜻이 지요.
그렇다면 banner.html 에서 tip 폴더 안에 있는 tip.gif 그림 파일을 불러 온다고 한다면 <img src=”../tip/tip.gif”> 이렇게 나타낼 수 있습니다.
여기서 가장 중요한 것은 ‘/’ 이놈과 ‘../’ 이놈 입니다. 폴더 안에 안에 안에 계속 해서 들어 가면 ‘/’ 이놈을 계속해서 붙여 주고 폴더 위에 위에 위에 계속해서 올라 가면 ‘../’ 이놈을 붙여 주는 것이지요.

문서 내에 이미지 삽입하기

문서 내에 이미지 삽입은 <img> 태그를 사용하면 됩니다. 특별히 중요한건 없고 속성만 잘 이해 하시면 문제 없습니다.

src : 경로명 지정
border : 테두리 두께 ( 기본값-0 / 링크시-1 )
width : 이미지의 폭 ( Pixel / % )
height : 이미지의 높이 ( Pixel / % )
hspace : 가로 여백 ( Pixel )
vspace : 세로 여백 ( Pixel )
alt : 도움말 표현
align : 정렬방법 ( left / right / top / middle / bottom )

table을 아직은 배우지는 않았지만 table을 쓰지 않고도 정렬만으로 그림 좌측, 우측에 글을 표현할 수 있습니다.

한번씩 꼭 해보세요.^^

⊙ 주의! 위의 html 태그를 완성하기 위해서는 images라는 하위 폴더 안에 bg_10_02.gif라는 이미지파일이 있어야
⊙ 합니다. 정확한 이해를 위한 경로에 대해서는 다음에 설명하겠습니다.