태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

오랜만에 HTML강좌를 발행하네요. 오늘 HTML강좌는 조금 흥미가 있을 거란 생각이 듭니다. 블로그를 운영하는데 있어서 꼭 필요한 태그이기때문이죠. 영어도 읽기 힘들고 귀찮은데, 영어가 아닌 이상한 단어들만 나열된 제 글을 보면 정말 지루하기 짝이 없거든요.

오늘은 이미지에 관련된 이미지태그에 대해서 알아 보겠습니다. 글을 쓰면서 참고 이미지를 올리거나, 광고 스크립트를 사용하지요? 광고와 아주 밀접한 관련이 있습니다. 이 부분만 확실히 숙지하시면 내 블로그 배너도 만들어 달 수도 있습니다. 또 스킨제작때도 꼭 알아두어야 할 기본중의 기본 태그입니다. 중요도 5점입니다. 꼭 익히세요!

※ 지난 시간 복습 하기:

˚순서를 나타내는 태그들의 종류: <OL>, <UL>, <DL>

˚<ol></ol> : 순서대로 나열하는 태그 ˚<ul></ul> : 순서없이 나열만 하는 태그   속성: type="속성값" (disc, circle, square로 표기)

˚<li></li> : <ol>,<ul>태그와 함께 묶어서 쓰이는 목록태그   속성: type="속성값" (A, a, ⅰ, Ⅰ,숫자로 표기)

˚<dl></dl> : 사전형태로 나열하는 태그   <dt></dt>: <dl>태그에서 제목에 관한 부분   <dd></dd> :<dl>태그에서 설명에 관한 부분

오늘 배울 내용은 이미지태그 그리고 그에 관련된 속성들에 대해서 알아 보도록 하겠습니다. 이 부분 강좌는 필독 하시고 꼭 전부 숙지 하시기 바랍니다.(정말 정말 부탁드리는 거에요.)

 

● HTML,이미지 태그란? 



이미지를 나타내는 태그는 img( image의 약자)로 표기 됩니다. 이미지는 텍스트처럼 글자로 표현되지 않기때문에 "이것은 이미지다"라고 정의를 해주어야 하는데요. 그것이 바로 이미지태그인 "img"로 정의내릴수 있습니다.

그렇다면 이 이미지를 정의할때 이미지를 표시하는 원칙이 있어야 겠지요? 이미지를 불러오거나 삽입할때 "이것은 ○○이미지다"라고 명령을 해주는데 <img src="파일경로 or URL">로 표시합니다.

img 태그

이미지 경로에 관한 공식

※ 파일 경로(URL)에 대한 부가 설명 URL은 파일이 들어 있는 경로(주소)를 나타낸다는 뜻입니다.

웹에 게시되었을 경우는 웹에서의 이미지 주소이고, 파일로 표기 할때는 파일 경로를 나타냅니다.

※ 경로 표시 방법 문서가 있는 폴더를 기준으로 표기합니다.

  • 같은 폴더에 이미지가 있을때: 파일명을 그대로 써준다(예: 이미지.gif)
  • 문서 아래에 이미지가 있을때: 폴더 이름/파일명
  • 문서 위에 이미지가 들어 있을때: ../파일명

img 태그

이미지 경로 표시 방법

 

● HTML, 이미지태그의 속성 



이미지를 표시할때도 글자처럼 속성을 정할 수 있습니다. 이전에 배웠던 여러가지 속성에 관한 태그들을 적용 시킬 수 있습니다. 그 외에 추가 속성들이 있습니다.(이미 배운것이니 간단하게 짚고 갈께요.)

※ 이전 시간에 배운 태그 속성들

˚ 위치를 나타내는 태그 : right(오른쪽), center(중앙), left(왼쪽)

˚ 위치를 지정하는 태그 : align="위치"

˚ 크기를 나타내는 태그: width="넓이"(가로 길이)  height="높이"(세로길이)

여기서 잠깐 ! :

이미지 정렬태그의 속성값은 left(좌),right(우),middle(가운데),top(위),bottom(아래) 이렇게 5종류 세로의 위치 정렬값을 지정 할 수 있습니다. center가 없어지고, 다른 세가지의 속성값이 나옵니다.

alt="내용(택스트)" : 이미지위에 마우스를 올렸을때 표시되는 문구를 뜻합니다.(여기서는 이해하기 쉽게 말풍선이라고 해두죠.) 이미지위에 마우스를 올려 보세요.

아래의 이미지코드는 다음과 같습니다. 두껍게 표시된 부분의 내용이 마우스를 올렸을때 그대로 나타납니다.

<img src="이미지 URL" alt="alt속성에 대한 설명입니다. 마우스를 올리면 이 글이 보일 거에요. 라스베가스 밤 풍경이군요. 엄마가 미국여행때 라스베가스에서 찍은 호텔 야경인데, 너무 멋있죠?">

alt속성에 대한 설명입니다. 마우스를 올리면 이 글이 보일 거에요. 라스베가스 밤 풍경이군요. 엄마가 미국여행때 라스베가스에서 찍은 호텔 야경인데, 너무 멋있죠?SONY | DSC-H2 | 2009:05:19 23:02:59

alt 속성에 대한 설명_마우스를 올려 보세요.

 ● 좌우, 상하 여백을 표시 할때 : 좌우의 여백을 줄때: hspace="픽셀값" 상하의 여백을 줄때: vapace="픽셀값" 여기서 align과 다소 혼동되실 거예요. align은 문서를 일괄적으로 양분해서 나누게 됩니다. 위의 hspace나 vspace는 각각의 수치만큼 이동해서 이미지를 배치하는 태그입니다.

예) 문서에서 이미지를 50px만큼 여백을 주고 보여주기 이 경우에 hspace="50px"로 표기하고, 이미지는 50px만큼 떨어져서 위치 합니다. vspace는 hspace처럼 위에서 부터 여백을 지정해 주는 태그입니다. 이해가 잘 안되시죠? 제가 이미지를 예로 올려서 설명 드릴께요.

※ align으로 좌,우로 정렬 할때

아래 코드를 실행해 보겠습니다.(메모장에 직접 작성하면서 익히세요)  -

이미지 캡쳐를 위해 테이블로 넓이를 조절 했습니다.

<html>
 <head>
  <title>이미지 정렬</title>
 </head>
   <body>
    <table width="600">
      <tr>
        <td width="100%">
          <p><img src="이미지경로" width="300" height="225" align="left"></p>
          <p>왼쪽 정렬</p>
        </td>
      </tr>
      <tr>
        <td width="100%">
          <p><img src="이미지경로" width="300" height="225" align="right"></p>
           <p align="right">오른쪽 정렬</p>
        </td>
      </tr>
   </table>
</body>
</html>

이미지를 align으로 정렬을 할때는 텍스트가 빈 공간에 표시됩니다.

img 태그

img 태그_align으로 정렬하기

※ 여백을 지정 할때

아래 코드를 실행해 보겠습니다.(메모장에 직접 작성하면서 익히세요)

<html>
  <head>
    <title>이미지 여백 주기</title>
  </head>
    <body>
      <p><IMG src="이미지경로" width=300 height=225></p>
      <p><IMG src="이미지경로" width=300 height=225 hspace="50"></p>
      <p><IMG src="이미지경로" width=300 height=225 vspace="50"></p>
      <P align=right>100px만큼 상하 여백주기</P>
    </body>
</html>

img 태그

실행화면

 

오늘은 이미지 태그에 대해서 알아봤습니다. 새롭게 한 주가 또 시작 되었죠? 힘찬 한주 되시고, 여러번 반복하셔서 이 태그는 꼭 익히시길 바래요.  html강좌는 알라딘 창작블로그 "웹디자인과 블로그팁"에 연재중입니다. 제 강좌가 맘에 드셨다면 강의로라 생각하시고 추천 듬뿍 주세요. 그럼 다음 시간에 뵈어요~꾸벅z(_._)z

 

이 글이 링크되어 있는 곳:
블코채널[blogkorea]: 웹디자인과 블로그팁에 링크되어 있습니다.
레뷰 아이템[revu]: 웹디자인& 블로그 Tip에 링크되어 있습니다.

 

posted by 예스비™

이글에 관한 저작권은 예스비™에게 있으며, 무단 전제및 스크렙(퍼가기), 인용, 수정등을 불허 합니다. 이 글의 사용은 공지의 "저작권안내"에 따라 사용 하시기 바랍니다. 불편하시더라도 가급적 rss로 구독하거나 제 블로그에 직접 방문하셔서 읽으시길 바랍니다. _by 예스비™
제 글이 맘에 드셨나요? RSS구독을 하시면 무료로 배달해 드립니다.
  • 한rss로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • 최근 댓글

    최근 트랙백

    BLOG main image
    포토샵 강좌, html/css 강좌등 어렵게만 느껴졌던 웹디자인을 초보자도 쉽게 이해 할 수 있는 튜토리얼, IT 트랜드, 블로그팁과 운영법, 디자인 시각에서 풀어 헤치는 상품 리뷰등, 디자인에 대한 재밌고 유익한 정보를 제공하는 블로그입니다. by 예스비™
    rss

    위젯

    BLOG ★ NIGHT

    Blog♥Rings

    Blog♥Rings Family Blog & Sites T-Blog Web site meta hub site

    구독리스트

  • rss
  • Add to Google Reader or Homepage
  • 블로그코리아에 블UP하기
  • Powered by FeedBurner
  • BlogRankers.com
  • Page Ranking Tool