이미지 태그 - 단일 편집영상

[이정권]

            이미지태그 - 단일 편집영상

     멀티미디어 에서 가장 비중이큰 이미지태그에 대해서 기술 하고져 합니다.

     이미지태그는 확장자별로 적용태그가 다릅니다.

     크게 구분해서 정지영상하고 동영상으로 구분 합니다. 

     정지영상은  JPG(JPEG) , PNG , BMP , PSD , RAW 등의 확장자 있는데 JPG 을 가장 많이

     사용합니다.(90% 이상)

     동영상은  MKV , MP4 , TP , MOV , MOS , GIF, SWF , FLS , ASF 등..에서 GIF 와 SWF 그리고

     MP4 을 가장 많이 사용하고 있습니다.

     그 이유는 영상의 화질이라던가 편집성, 호환성 등이 우수하기 때문입니다.

     그리고 동영상에 있어서 GIF 와 SWF 는 프로그램에의한 방식이고 MP4 는 촬영에의한 방식입니다.

     이상 이미지의 파일종류를(확장자) 알아 보았습니다.

     그러면 HTML 5 에대해서 제가 파악한 내용을 간략히 정리하고 이미지태그로 들어가겠습니다.

     HTML 은 W3C (월드 와이드 웹 컨소시엄) 에서 개발하는 웹 표준입니다.

     기존의 HTML 4 까지는 일부 기능의 업그레이드에서 대폭개선이 된점이 다릅니다.

     2012년 부터 개발에 착수하여 2017년 완료 목표로 지금도 진행중인 상태입니다. 

     HTML 5 의 개발목적을 저는 크게 2 가지로 보고 있습니다.

     첫번째 -  마이크로소프트 사의 Active X 유틸리티 기능을 지원할 수 있음.(멀티미디어 부문에서 음원)

     두번째 -  플러그인 기반의 플래시 영상(Adobe 사) 을 지원할 수 있음.

     이상의 2 가지가 주요 개선점이며 추가 기능 등을 업그레이드 하는것으로 파악하고 있습니다.

     이는 스마트폰의 보급확대와 운영 OS 의 다각화로 윈도우 OS 을 기준으로 발전해오고 있는

     웹브라우저 지원표준을 정립하고 기존의 문제점 등을 보완하고자 하는게 주 목적이라고 말씀 드릴 수

     있습니다.

     그러면 이미지 태그로 들어가겠습니다.

     웹에서의 모든자료 작성은 컴퓨터언어인 디지털로 이루어 집니다.

     때문에 모든 자료는 디지털로 바꾸어 컴퓨터에 지시를 해야 되는거지요.

     컴퓨터에 지시를 하는 언어는 2 진수에 기초를두고있는 텍스트(Text) 입니다.

     즉. 컴퓨터가 만들어주는 디지털 과 프로그램화 되어있는 텍스트 등을 가지고 작성 합니다.

     그래서 HTML 을 하이퍼텍스트 생성언어 라고 합니다.

     자 ~ 여기까지 이해가 가시는지요..?

     잘 이해가 안가는 부분은 댓글에 달아주세요..~~

     그러면 먼저 하이퍼텍스트 생성언어(디지털/Digital) 을 살펴보도록 하겠습니다.

     글자나 숫자, 기호 등은 그 자체가 디지털 이라고 했습니다.

     때문에 그대로 작성하면 되고 이미지와 음원은 디지털로 바꾸어 작성을 해야 됩니다.

     아래 이미지영상을 디지털(하이퍼텍스트) 로 전환 합니다.

     상기 이미지영상을 디지털로 전환하면 아래와같습니다.

     [전환하는 방법]

     먼저 사진을 인터넷에 처음 업로드 한다음 우측상단의 HTML 에 체크를 하면 디지털로 전환됩니다.

     그다음 필요한 디지털를 사용을 한후 필요없는 디지털은 오른쪽 하단의 취소 를 클릭해서 삭제 합니다.

     만약에 하단 중앙의 등록을 클릭하시면 인터넷에 최종 업로드가 되니 삭제를 해야 합니다.

     그러면 아래와 같이 컴퓨터가 하이터텍스트(Hyper Text) 를 만들어 줍니다.

     이것이 바로 컴퓨터언어인 디지털 입니다.

     이러한 디지털의 물리량이 많아져 수만개 수백만개가 되어도 컴퓨터는 점하나까지 한치의 오차도없이

     정확히 지시를 합니다.

     때문에 숫자나 기호, 글자 하나 가지고 모든걸 통제하고 제어할 수 있는것 입니다.

    <p>&nbsp;</p>
    <p style="text-align: center;">

    <img src="http://cfile223.uf.daum.net/image/222F0C425916A9E43C3BD2" class="txc-image"

    style="clear: none; float: none;" border="0" hspace="1" vspace="1" width="764" data-fileam   

    ="20160605_115526.jpg" exif="{}" actualwidth="764" /></p>
    <p></p>

    상기 디지털언어를 살펴보겠습니다.

      <P>&nbsp;</P> ---> 이디지털은 사진의 간격을 한칸(10픽셀) 주라는 언어입니다.

      이것은 <BR> 로간단히 해서 명령지시어로 HTML 에서 규약 설정합니다.

      즉. 이 디지털 언어와 똑같이 지시하는 명령어로 설정을 하게됩니다.

      <P style="TEXT-ALIGN: center"> ---> 이것은 사진을 화면 중앙에 놓으라는 언어입니다.

      이것도 간단히 사용할 수 있게 <center> 로해서 명령지시어로 사용합니다.

      <left> 는 왼쪽 <right> 는 오른쪽으로 규약설정합니다. 

      <img src="http://cfile223.uf.daum.net/image/222F0C425916A9E43C3BD2">

      이것은 이사진의 고유주소언어 입니다.

      소유 URL 이라고 하는것이 바로 이 언어이며 소프트웨어용어로 소스(src) 라고 합니다.

      이것은 고유주소라 다른 간단한 명령어로 할 수 없습니다.

      따라서 암기가 불가함으로 드래그 복사하거나 눌러(스마트폰) 복사해서 사용합니다.

      이 고유주소는 이미지영상 융합등의 모든 편집이미지 자료의 소스로 사용됩니다.

      border="0"  hspace="1"  vspace="1"  width="764"

      border="0" ---> 사진 가장자리에 테부리선을 만들라는 언어 입니다.

      hspace="1" ---> 사진을 좌, 우 공간으로 이동하라는 언어 입니다.

      vspace="1" ---> 사진을 상, 하 공간으로 이동하라는 언어 입니다.

      width="624" ---> 사진의 외형 가로크기 ( 여기에 height= 을 추가로지정해주면 세로크기가

      조정이 됩니다.)

      border 는 사진에 테두리선를 만들라는 언어입니다.

     테두리색상을 바꾸려면 <font color=색상 명칭 또는 색상기호> 해주면 원하는 색상으로할 수 있습니다.

     상기 언어는 명령어의 속성값으로 그대로 적용이 됩니다.

     여기서 단일 편집영상 이라하면 다중자료의 멀티미어글을 어떠한 응용프로그램 등을 이용해서 편집한

     상태를 말합니다.

     즉. 다중자료를 하나의 파일로 만든것을 말합니다.

     때문에 컴퓨터가 생성해준 태그 그대로 사용하면 됩니다.

     아래와 같이 그대로 복사해서 가로, 세로 크기의 속성값만 주면 됩니다.

       <img src="http://cfile207.uf.daum.net/image/2242C443592B7C4C12EEFB" align=right

       width=700  height=400>

    상기 이미지태그를 테이블태그에 그대로 삽입 하면 테이블태그의 멀티미디어글이 됩니다.

    테이블 태그에 삽입을하면 아래와같습니다.

    이러한 단일 편집영상은 멀티미디어 다중자료를 포토샵 응용프로그램 등으로 완전히 작성을 해주기 

    때문에  <img src= 해서 ... 이미지 고유주소만 넣으면 됩니다.

    여기서 한가지 지시할 명령태그가 하나 있습니다.

    align=right 입니다.

    이것은 이미지에 가로, 세로의 속성값을 지정해줄때 테이블선의 여백을 정렬해주라는 명령어로

    속성값이 right , left , center 등이 있는데 이미지태그 에서는 어떤한값을 주어도 결과는 동일합니다.   

    태그는 다음과 같으며 실행 전송하면 아래와 같습니다.

    (보충설명)    

    align=속성값 명령어 

    HTML 에서 규약한 언어로 어떠한 자료를 정렬을 하라는 지시어로 속성값으로 right , left , center 

    등이 있습니다.

    이 지시어는 이미지에 테이블선을 주지않을 경우에는 필요가 없는 태그 입니다.

    align 을 사용하지않고 다른방법 으로도 합니다.

    컴퓨터가 만들어준 border 로 하는 방법 입니다.

    border=5 의 속성값에 <font color=green> 라는 색상태그를 주는방법이 있습니다.

    <font color=green>

    <img src="http://cfile207.uf.daum.net/image/2242C443592B7C4C12EEFB" border=5  width=720 height=480>
  

    여기서 이미지영상의 확장자가 Swf 인 경우에는 <embed src= 고유주소태그 > 을 적용합니다.

    즉. 확장자가 Jpg 나 Gif 는 <Img src= > 을 적용하고 Swf 는 <embed src= > 을 적용해야 합니다.

    그렇지않으면 영상이 안나옴니다.

    간혹 인터넷에 영상이 x 로 나타나는것을볼 수 있는데 확장자가 안맞아서 그런겁니다.     

     <CENTER>
      <table style="border: 7px ridge blueviolet;" border=1  bordercolor=black cellSpacing=1 
      cellPadding=0  width=720 height=450  bgcolor=white  background=>
      <TR><TD>
      <table style="border: 4px ridge lightblue;" border=0 bordercolor=black cellSpacing=1 
       cellPadding=0 width=720 height=450 bgcolor=white background=>
      <TR><TD>
      <table style="border: 5px ridge #7093db;" border=0 bordercolor=black cellSpacing=0 
      cellPadding=0 width=720 height=450 bgcolor=white background=>
      <TR><TD>
      <img src="http://cfile207.uf.daum.net/image/2242C443592B7C4C12EEFB" align=right  width=720  height=480>
      <TR><TD>
      <pre><ul>
      <font color="darkblue" face="verdana"><span style="line-height: 50%; font-size: 15pt;"><b>
      2016년 6월 산행영상

      </TABLE>
      </TABLE>

     
     2017년 제34회 수원중.고 
                 총동문가족 한마음 체육대회 1820 막사