2. 중급태그 설명 |
|||||
|---|---|---|---|---|---|
| 작성자 | 컴샘 | 등록일 | 19.09.10 | 조회수 | 61 |
|
2. 중급태그 설명
이번 장에서는 HTML의 중급태그에 대하여 배워보도록 합시다. 여기서는 다른페이지로 옮기기, 같은 페이지 안에서 특정 위치로 옮기기, 다른 사이트로 옮기기와 화면을 분할하여 HomePage를 구성하는 방법에 대하여 공부하여 봅시다.
(1) 중급태그 :<A>....</A> 1) HomePage내에서 옮겨가기(하이퍼 링크로) 홈페이지를 작성하시게 되면 하나의 HTML이 아닌 여러개의 HTML로 만들어집니다.(나누어 작성을 하셔야 편집이 쉽지요) 따라서 특정 부분을 클릭하면 해당 HTML로 이동하는 태그를 배워 보겠습니다. 예를들어 메인하면의 좌측창에서 원하는 부분을(HTML이란?, 기본태그, 중급태그, 고급태그..) 클릭하면 옮겨지는 예를 보셨습니다. 구성:<A href="갈곳">누를글자 혹은 아이콘</A>
[연습] 글자를 이용하여 페이지를 옮겨보는 방법만 하여보고 아이콘을 이용하는 방법은 차후 이미지로 연결하기에서 배우도록 하겠습니다. <html> <head><title>링크연습</title></head> <body> <a href="mainscreen.htm">[홈페이지 첫화면으로]</a> </body> </html>
2) 동일한 문서 내에서의 이동 홈페이지의 내용이 너무 길어서 브라우저의 스크롤 바를 이용해서 PageDown을 해야 할 필요가 있을 때, 바로 지정된 곳으로 이동시켜 주는 역활을 하는 것을 말합니다. 현재 화면의 상단에 있는 링크(중급태그(1), 중급태그(2), 중급태그(3))가 이 역활을 하고 있습니다. 구성:<A href=#문장 내에서 찾아가야 할 단어>표현단어</A> <A name=단어>그 단어에 대한 설명</A> (예제)이 페이지에 사용된 예제 입니다(중급태그(1)) <CENTER><FONT SIZE=+2><A HREF="#중급태그(1)">1.중급태그(1)</A></FONT></CENTER> <P><A NAME=;"중급태그(1)"></A><FONT COLOR="#CC33CC"><FONT SIZE=+1>▶중급태그(1)</FONT></FONT>
3) 웹 상의 다른 홈페이지와 연결하기 다른 홈페이지와 연결을 위해 사용합니다. 예를들어 현재의 홈페이지에서 에듀넷으로 연결시키기 위해 사용합니다. 또한 자신의 홈페이지를 방문한 손님을 위하여 검색사이트 정도는 연결 시켜주시면 방문한 손님에게는 좋은 길잡이가 될 것입니다. 구성:<A href=http://연결한 도메인>방문지</A> 예제) 자신의 홈페이지의 한부분에 [에듀넷연결]을 만들어 여기를 클릭하면 에듀넷으로 연결시키고져 하면 다음과 같이 기록하시면 됩니다. <A href=[에듀넷연결]">http://edunet.nmc.nn.kr>[에듀넷연결]</A> [야후 사이트로!]를 클릭하면 사이트를 찾아주는 야후로 이동하는 태그는 아래와 같습니다. <A href=http://www.yawoo.com>[야후 사이트로!] (2)중급태그 여기에서는 위의 예제를 공부하시다 보면 링크 연결 부분에 색상이 다음과 같이 변하시는 것을 보셨을 것입니다. 처음에는 청색, 마우스를 누르고 있으면 적색, 클릭하시어 한번 방문 하신 후 다시 보시면 군청색으로 바뀐것을 보셨을 것입니다. 따라서 여기서는 각종 색상을 제어하는 태그를 배워보도록 하겠습니다.
1) 글자색 지정하기 글자들의 기본 색상을 결정합니다. 기본색은 검정입니다. 만일 적색을 기본색으로 하고 싶다면 다음과 같이 태그를 정해주시면 됩니다. 구성:<body text=#ff0000>.....</body> 칼라색상은 RGB의 형태로 표현되는데 색상의 표현이 싶지 않습니다. 보조색상표를 활용하세요 2) 하이퍼링크색 지정하기 ① 링크의 처음(기본)색의 지정은 다음과 같습니다.(청색인 경우) 구성:<body link=#0000ff>....</body> ② 누르고 있는 동안의 색 지정하기(적색인 경우) 구성:<body alink=#ff0000>...</body> ③ 한번 방문한적이 있는 링크색 지정하기(녹색인 경우) 구성:<body vlink=#00ff00>...</body> ※전체적으로 한번에 지정하시려면 아래와 같이 하시면 됩니다. <body text=#000000 link=#0000ff alink=#ff0000 vlink=#00ff00 bgcolor=#ffffff>...</body> 3) 문서를 임의로 고정시키기 홈페이지를 방문한 손님의 모니터 해상도나 화면 비례에 따라 홈페이지의 모양이 이상하게(줄 간격, 줄 바꿈등) 나타나 디자인한 사람의 의도가 정확히 전달되지 않을 수도 있습니다. 이러한 문제점을 해결하기 위한 태그는 아래와 같습니다. 구성:<nobr>...</nobr> <nobr>태그는 화면 크기에 따라 문단 모양이 바뀌는 것을 방지합니다. 전체 글씨는 스크롤바로 보셔야 합니다. 구성:<wbr>...</wbr> <nobr>테그 안에서 문단을 바꿀 때 사용합니다.
(3) 중급태그 여기서는 페이지에 바탕색을 지정하거나 좋은 밑그림을 사용하는 방법, 화면을 여러개 띄우는 방법(나누는 방법)에 대하여 배워보도록 하겠습니다. 1) 바탕색의 사용은 다음과 같은 간단한 태그로 만들 수 있습니다. 구성:<body bgcolor=#000000>...</body>(바탕을 흰색사용, 기본값이기도 함)
2) 밑그림을 넣는 방법 구성:<body backgrund=sunlight.gif>....</body> ※참고:그림은 대부분 압축율이 높은 gif, jpg를 이용합니다. 그림의 용량이 크면(bmp) 손님은 그림을 보기 위하여 장시간 대기하여야 하기 때문에 좋은일은 아니죠. 3) 창을 여러개 띄우는 방법 지금 보시는 홈페이지는 창을 3개로 나누어 사용하고 있습니다. 장점은 언제든지 좌측에 있는 메뉴를 이용하여 원하시는 곳으로 바로 이동할 수 있어 편리하기 때문이죠. 창을 나누는 방법에는 두가지가 있는데 화면 비율로 나누는 방법, 픽셜로 나누는 방법이 있는데 여기서는 화면 비율로 나누는 방법만 설명 하겠습니다. 구성:<frameset><frame>..<frame></frameset> ① 창을 가로, 세로로 나누는 테그 <frameset rows=50%,50%> (위 아래로 50%씩 나눔) <frameset cols=20%,80%> (좌측화면 20%, 우측화면을 80%로 나눔) ② 화면을 나눈뒤 이름을 부여하고 html을 불러오는 태그 <frameset rows=20%,80%> <frame src=first.htm name=frame1>(좌측에 first.htm을 불러오고 이름은 frame1이라고함) <frame src=second.htm name=frame2>(이름은 frame2) </frameset> ③ 화면을 상,하로 나눈뒤 하의 화면을 다시 나누는 태그 <html><head><title>화면 나누기</title></head> <frameset rows=20%,80%> <frame src=first.htm name=frame1> <frameset cols=20%,80%> <frame src=second.htm name=frame2> <frame src=third.htm name=frame3> </frameset> </frameset>
|
|||||
| 이전글 | 3. 고급 태그 |
|---|---|
| 다음글 | 홈페이지 만들기(HTML & JavaScript) 1. 기본 태그 |