Notice
Recent Posts
Recent Comments
Link
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
Tags more
Archives
Today
Total
관리 메뉴

Kim's Programming

HTML - 멀티미디어 태그 그리고 테이블 본문

Programming/HTML

HTML - 멀티미디어 태그 그리고 테이블

Programmer. 2015. 8. 21. 14:32


이미지 태그


이미지 삽입


    • HTML 문서에 이미지를 삽입할 떄 <IMG>태그를 사용합니다. <IMG>태그의 속성으로는 src, height, width, border, align, alt등이 있습니다.

    • src는 삽입할 이미지 파일이 있는 경로명과 파일명을 속성값으로 취하며 필수적으로 써야하는 속성입니다. 경로명은 절대경로 상대경로 모두 가능합니다.

    • height와 wifth는 이미지의 크기를 지정하는 속성으로 높이와 폭을 픽셀단위로 지정합니다. height와 width 속성을 이용하여 이미지의 크기를 지정하는것은 이미지의 크기가 변경되지 않고 단지 브라우저에서 표시되는 크기가 변경됩니다. 만약 표시되는 이미지에 비해서 실제 이미지가 너무 크게 되면 로딩속도만 느려지게 됩니다.(이미지 크기는 용량과 비례하기떄문에)

    • border속성은 이미지에 테두리를 나타내 주는 것으로 픽셀 단위로 지정할 수 있습니다. align은 이미지와 함꼐 텍스트를 정렬하는 방식을 제공합니다. 글자를 중심으로 이미지를 위치를 지정할 때는 align속성값을 "left" "center" "right"중 하나로 지정하면 됩니다. 또 그림을 중심으로 글자위치를 지정할 때는 align 속성값은 "top" "middle" "bottom"중 하나로 지정할 수 있습니다.

      다음 소스를 보고 결과도 보겠습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      <HTML>
          <HEAD>
              <TITLE>
              이미지 삽입!
              </TITLE>
          </HEAD>
          <BODY>
              <IMG src="그림의 주소"border=2 align=top width=300 height=200>
              이 그림의 제목<BR>
              이 그림의 제작자
          </BODY>
      </HTML>
      		cs

그림 소스가 없어서 우선 빈칸으로 두었습니다. 그림의 주소를 넣으면 저 네모안에 그림이 들어오게 됩니다.


이미지에 링크걸기


    • 삽인된 이미지에도 하이퍼링크를 추가하여 다른 문서로 이동하게 만들 수 있습니다. <IMG>태그 앞에 <A>태그를 지정하게되면 이미지를 클릭하므로써 지정한 URL로 이동할 수 있습니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      <HTML>
          <HEAD>
              <TITLE>
              이미지 삽입!
              </TITLE>
          </HEAD>
          <BODY>
              <A href = "http://www.google.co.kr"><IMG src="그림의 주소"border=2 align=top width=300 height=200></A>
          </BODY>
      </HTML>
      		cs
      다음 소스는 결과는 다음과 같습니다.

이미지 칸을 클릭하여 이동하게됩니다.



이미지에 링크걸기

이미지를 배경 이미지로 지정도 가능합니다. 이미지를 배경 이미지로 지정하면 이미지 삽입과는 다르게 이미지 위에 글씨를 써줄 수도 있습니다. 배경이미지를 지정할떄는 <BODY>태그에 background 속성을 사용합니다. 배경이미지는 타일형태로 나타나게 됩니다.

1
2
3
4
5
6
7
8
9
10
<HTML>
    <HEAD>
        <TITLE>
        이미지 삽입!
        </TITLE>
    </HEAD>
    <BODY background="untitled.jpg">
        글씨 기록 
    </BODY>
</HTML>
cs

다들 소스는 이런 결과를 줍니다.


이미지 맵

    • HTML문서에 이미지를 삽입하고, 이 이미지를 다시 작은 조각으로 나누어 각 조각을 클릭할 때 마다 다른 문서나 다른 URL로 이동하도록 구현하는 것도 가능합니다. 예를 들면, 세계지도를 띄워 놓고 각 국가 부분을 누르면 그 국가에 해당하는 공식 홈페이지로 이동하도록 할 수 있는데 이를 이미지 맵을 활용한 문서이동이라고 합니다.

    • 이미지맵을 작성하기 위해서는 먼저 삽입할 이미지를 선택한 후 그림 판 또는 포토샵을 이용하여 클릭영역의 좌표를 미리 파악해두어야 합니다. 클릭 영역은 사각형, 원형, 다각형의 세 가지로 형태지정이 가능합니다. 사격형으로 클릭영역을 지정할 떄는 좌측 상단과 우측 하단의 좌표만 있으면 지정이 가능하고 원형은 중심좌표와 반지름 길이를 픽셀값으로 지정하면 됩니다. 다각형의 경우는 모든 꼭지점을 시계 반대반향을 순서대로 좌표를 지정해주면 됩니다.

       클릭 영역 지정 방법

       1

       사각형으로 지정

       <AREA shape="rect" coords="0,120,60,180">

       2

       원형으로 지정

       <AREA shape="circle" coords="250,100,30">

       3

       다각형으로 지정

       <AREA shape="polygon" coords="800,100 , 900,200 , 900,400 , 800, 600"> 
    • 이미지 맵을 구현하기 위해서 사용되는 태그는 <MAP>과 <AREA>태그입니다. <MAP>태그를 이용하여 적용할 이미지 맵을 정의하여 <MAP>태그에는 맵의 이름을 name 속성을 사용하여 반드시 정의해 주어야 합니다. <AREA> 태그에는 클릭영역별로 이동할 문서나 URL을 지정하게 되는데, 클릭영역은 shape속성과 coords속성을 사용하여 지정합니다. 원형으로 클릭영역을 지정하는 경우, shape속성의 속성값을 "circle"이라 지정하고, coords속성 값을 원의 중심좌표와 반지름의 길이를 순서대로 써주시면 됩니다.

멀티미디어 태그


MARQUEE 태그


    • 움직이는 글씨 또는 흘러가는 글씨를 구현할 때 <MARQUEE>태그를 사용합니다. <MARQUEE>태그의 속성 중 direction 속성은 "UP" "DOWN" "LEFT" "RIGHT"의 속성값을 가지며 흘러가는 방향을 각각 지정합니다. loop속성은 반복횟수를 설정할 때 사용합니다. scrollamount 속성은 설정한 숫자만큼 흘러가는 속도를 지정하는데 클수록 속도가 빨라집니다. height속성과 width 속성은 흘러가는 글씨가 나타내는 높이와 너비를 지정하는데 사용되며, bgcolor속성은 배경색을 지정하는 데 사용됩니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      <HTML>
          <HEAD>
              <TITLE>
              MARQUEE
              </TITLE>
          </HEAD>
          <BODY>
              <CENTER>
              <H2>움직이는 글씨</H2>
              <MARQUEE direction=up scrollamount=3 height=200 bgcolor=yellow>
              움직이는 글씨는<BR><BR>
              MARQUEE태그를 이용하여<BR><BR>
              작성하게됩니다.<BR><BR>
              </MARQUEE>
          </BODY>
      </HTML>
      		cs





EMBED 태그

    • HTML문서에 동영상이나 음악을 삽입하고자 할 때 주로 사용되는 태그가 EMBED태그입니다. EMBED태그의 주요속성과 일반적인 사용구문을 다음과 같습니다.

      1
      <EMBED src="음악/동영상주소" wifth="xx" height="xx" autostart="ture/false" hidden="true" loop="-1" volume="0">
      		cs

    • 각각 해당하는 의미를 알아보겠습니다.

      src

       삽입려련는 음악이나 동영상의 경로 및 파일이름

      width

       재생메체의 폭(픽셀단위)

      height

       재생매체의 높이(픽셀단위)

      autostart

       자동실행 여부 true -> 자동실행 false -> 정지

      hidden

       미디어 플레이어 표시여부 true -> 숨김

      loop

       반복 재생 횟수 -1일때는 무한반복

      volume

       볼륨크기 -1000~0

      showStatusbar

       미디어플레이어하단 현재 상태 보여줌

      falseshowControls

       미디어플레이어 버튼의 보임설정 fasle -> 숨김


테이블 태그

    • 테이블태그는 HTML문서내에 표를 만들 때 사용하는 태그입니다. 테이블 태그는 HTML문서 작성에서 매우 중요하게 활용되는데 그 이유는 테이블 태그가 전체 문서의 레이아웃을 설정하는 틀로 주로 사용되기 떄문입니다. 즉 특정 이미지를 문서의 우측 하단에 위치 시키고자 할 때, 테이블태그를 이용하여 문서 공간을 여러 개의 테이블 셀로 구분한 후 우측 하단에 위치한 셀에 이미지를 삽입하면됩니다.

    • 테이블을 구성하는 기본 태그는 <TABLE>, <TR>, <TD>, <TH>가 있습니다. <TABLE>태그는 테이블의 시작과 끝을 <TR>은 테이블에 행을 삽입 <TD>태그는 <TR>태그 안에 사용하며 행 안에 셀을 생성 <TH>태그는 <TD>태그와 같이 셀을 삽입하는 태그이며 제목 셀을 만드는데 주로 사용합니다. 제목으로 하기 때문에 <TH> 태그내의 글씨는 진한 글씨체로 표기합니다.

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      26
      <HTML>
          <HEAD>
              <TITLE>
                  표만들기
              </TITLE>
          </HEAD>
          <BODY>
          <TABLE border>
              <TR>
              <TD>1행1열</TD>
              <TD>1행2열</TD>
              <TD>1행3열</TD>
              </TR>
              <TR>
              <TD>2행1열</TD>
              <TD>2행2열</TD>
              <TD>2행3열</TD>
              </TR>
              <TR>
              <TD>3행1열</TD>
              <TD>3행2열</TD>
              <TD>3행3열</TD>
              </TR>
          </TABLE>
          </BODY>
      </HTML>
      		cs

      다음 소스의 결과는 다음과 같습니다.





테이블 크기 지정과 정렬


    • 테이블의 각 셀에는 텍스트 뿐만 아니라 이미지 삽입도 가능합니다. 또한 이미지 크기는 셀의 크기에 따라 조정이 됩니다.

    • 테이블의 크기를 조정하기 위해서는 <TABLE>태그 내에 height와 width속성을 정의할 수 있습니다. height속성에는 테이블의 높이를 픽셀단위로 지정하며 width속성에는 테이블의 폭을 픽셀 단위로 지정합니다. 높이가 지정된 테이블의 행이 n개 이면, 각행의 높이는 테이블의 높이의 1/n이 됩니다. 폭이 지정된 셀이 m게 이면 폭 또한 1/m이 됩니다. 만일 특정 셀에 셀의 지정된 크기보다 이미지가 커지면 이미지에 맞게 셀이 커지고 전체 테이블의 지정된 높이와 폭이 되도록 다른 셀의 높이 폭은 조정됩니다.

    • 테이블의 위치를 정렬하기 위해서는 align속성을 사용하면 됩니다.


다음 소스를 통해 알아보겠습니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<HTML>
    <HEAD>
        <TITLE>
            표만들기
        </TITLE>
    </HEAD>
    <BODY>
    <TABLE border=2 height=400 width=500 align=center>
        <TR>
        <TD>1행1열</TD>
        <TD>1행2열</TD>
        <TD>1행3열</TD>
        </TR>
        <TR>
        <TD>2행1열</TD>
        <TD><IMG src="untitled.png"</TD>
        <TD>2행3열</TD>
        </TR>
        <TR>
        <TD>3행1열</TD>
        <TD>3행2열</TD>
        <TD>3행3열</TD>
        </TR>
    </TABLE>
    </BODY>
</HTML>
cs







저작자표시 비영리 동일조건

'Programming > HTML' 카테고리의 다른 글

HTML - 자바스크립트(JavaScript)  (0) 2015.08.22
HTML - CSS(Cascading Style Sheet)  (0) 2015.08.22
HTML - 프레임 태그 입력 태그  (0) 2015.08.22
HTML - 글자, 문단, 목록 태그와 링크 태그  (0) 2015.08.21
HTML 기초  (0) 2015.08.21
'Programming/HTML' Related Articles more