[HTML 기초] 테이블에서 셀 글씨정렬 및 하이퍼링크 만들기

[HTML 기초] 테이블에서 셀 글씨정렬 및 하이퍼링크 만들기

안녕하세요~ 친절한효자손 이에요~!

지난시간에 이어서, 계속 HTML 테이블 태그에 관한 모든것을 차근차근 배우는 시간을 갖도록 하지요^^

많이 하려고 하니까 어려운 것이에요~!

하나씩! 하나씩만 해 나간다고 생각하시고, 한템포씩만 쉬엄쉬엄 배우는 자세가 필요할 것 같아요.

지난번에는, 셀 안쪽에 그림을 넣는 방법을 배웠죠?

이번엔, 좀 더 나아가서, 그림도 물론 넣고, 글씨를 원하는 위치에 딱! 오도록 하는 테이블 태그를 알아볼께요^^

자, 보시는 태그는, 테이블 안쪽에, 각 행에 적용이 되도록, <tr> 태그 안쪽에 명령어를 주는건데요,

align 명령을 주게 되요^^ 얼라인은 해석하자면, 정렬 이라는 뜻이잖아요^^

align="방향" 해 주시면, 그 방향으로 글씨나 문자가 정렬이 되지요.

align 은 가로로, valign 은 세로로 정렬시키게끔 해주는 명령어에요.

그러면, 이런식으로 글씨가 정렬이 되는것을 확인하실 수 있게 되지요^^

여기서, 또 하나! 캡션이라고 하는 태그가 들어가는데, 표에 제목 넣는 것처럼 들어가는 태그랍니다^^

마찬가지로, Caption 태그에서도 align 태그가 사용이 되어지고, 위치는 top, bottom 둘중 하나를 많이 쓰지요.

그러면, 이렇게 캡션이 추가된 것을 보실 수 있구요^^

자, 이젠 배운것들을 총망라하여, 한번 응용을 해 보도록 할께요^^

보시는 태이블 배열은, 3열 3행의 배열 상태구요, 각 셀마다 셀배경 그리고, 글자의 위치를 달리 해볼께요^^

표에서 처럼 이렇게 말이죠~!

짜자잔~! 그러면, 이렇게 표현이 되게 되어있지요^^

테이블 안에서의 위치 태그는 어렵지 않아요.

얼라인 정렬만 기억해 주시면 될 것 같아요^^

이번엔, 하이퍼링크를 만들어 보도록 할텐데요, 기본적으로 <a> 태그를 사용하게 되지요.

그리고, 홈페이지 주소를 입력할 때는, href="홈페이지 주소" 의 명령태그가 들어가게 되고요,

바로 한줄내리기를 하기 위해서는 <br> 태그가 들어가는데, 이건 나중에 더 자세히 설명을 드릴께요.

그러면, 이런식으로 들어가게 됩니다^^

바로가기가 이렇게 쉽게 완성이 되지요~!

또한, 그림이나 이미지에 링크를 걸 수도 있어요.

다른점은, 딱 하나~! 이미지만 넣어 주시면 되는 것이에요^^

img src="이미지주소" 만 넣어주시면, 이미지에 링크가 걸리게 되요.

네~ 이런식으로 네이버 바로가기가 완성 되었어요~!

(다음 티스토리에서;;; 네이버라니... 패기보소???? ㅋㅋㅋㅋ)

자~ 이제 지금까지 배운 테이블 태그, 그리고 하이퍼링크 태그를 응용하여,

연습용 연애인 프로필 모음 사이트를 만들어 볼까요???

보시는 것처럼, 여러 태그가 섞여있지만, 막상 원리만 이해하시면

그리 어려운게 아니라는 것을 금방 아실 것이에요!

짜잔~! 이렇게 연애인 프로필 모음 사이트가 완성이 되었구요,

각 연예인을 클릭하게 되면, 자세한 프로필이 나오도록 링크를 걸었어요^^

직접 확인해 볼까요???

이렇게, 황정음에 대한 프로필을 테이블 태그를 사용하여 완성시켰어요.

여기서는 지난시간에 배웠던, 셀 합치기 태그인 colspan 태그가 나왔네요^^

이렇게 한가인 프로필도 만들고요~

네~ 황정음 프로필도 이런식으로 완성 시킨 것이죠^^

자~! 테이블태그는 그리 어렵지 않아요.

단지, 조금만 응용할 줄 알면, 편리하게 활용 할 수 있죠^^

또한, 항상 누누히 말씀 드리지만, 태그를 외우실 필요가 없어요.

검색하면 다 나오니까요^^

나중에, 웹페이지나, 블로그 관리하실 때, 이런 HTML의 구조나 원리를 이해만 하시고,

볼 줄만 아신다면, 그것으로 충분해요~!