태터데스크 관리자

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

태터데스크 메시지

저장하였습니다.

오랜만에 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로 구독하기
  • 피드버너로 구독하기
  • 구글리더로 구독하기
  • 다음뷰로 구독하기
  • .:★:. 댓글은 이웃과 소통하는 마음의 창입니다. .:★:.   

    1. Favicon of http://windlov2.tistory.com BlogIcon 돌이아빠 2010.01.18 09:54 수 정 댓 글

      이미지 태그에는 align center가 없는거군요 >.<
      그리고 여백줄때는 hspace, vspace 잘 배웠습니다~

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.01.18 10:14 신고 수 정

        돌이아빠님 오랜만에 뵈니 너무 방가워요^^
        이웃들 보고 싶어서 미칠것 같았는데ㅋㅋ
        이제 슬슬 움직여 보려구요~ㅋ

    2. Favicon of https://toyvillage.net BlogIcon 라이너스™ 2010.01.18 09:56 신고 수 정 댓 글

      많이 바쁘셨었나봐요.
      오래간만의 포스팅^^
      잘보고갑니다.
      좋은 하루되세요^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.01.18 10:12 신고 수 정

        그러게요~ㅋ
        걱정 많이 하셨죠?
        죄송하구요~
        이제 천천히 움직여 보려구요...

    3. Favicon of http://flypo.tistory.com BlogIcon 날아라뽀 2010.01.18 11:12 수 정 댓 글

      예스비님 유용한 태그네요^^
      잘보고 갑니다. 즐거운 월요일 되세요!

    4. Favicon of http://jongamk.tistory.com BlogIcon 핑구야 날자 2010.01.18 12:50 수 정 댓 글

      포스팅을 할때 단어위에 Color Bar를 입히잖아요,
      그런데 ColorBar를 조금 더 크게 입히는 방법을 남들은 하던데
      방법을 알고싶어요

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.02.27 14:39 신고 수 정

        답글이 늦어 죄송합니다ㅠ
        컬러바는 설정을 안해봐서~아니 제가 아에 컬러바를 사용하지 않아서ㅎㅎ;;
        연구해보고 포스팅을 하거나, 방명록에 남겨드리겠습니다.

    5. Favicon of https://badjunko.tistory.com BlogIcon 못된준코 2010.01.18 15:06 신고 수 정 댓 글

      다치신 곳은 많이 나아지셨는지 모르겠네요.~~~
      그나저나 무쟈게 반가워요.
      무슨일 있는 줄 알고 걱정했는데..역시나 무슨일(?)이 터지셨군요. ㅎㅎㅎ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.02.27 14:40 신고 수 정

        답글이 늦었죠?
        준코님 덕분에 많이 좋아 졌습니다.
        디스크는 꾸준히 치료를 해야되서;
        게으름 안피고 물리치료 잘 받고 있어요ㅋㅋ

    6. BlogIcon 티런 2010.01.19 08:38 수 정 댓 글

      아...오랜만에 뵙네요^^
      예스비님 그동안 서울로 이사하셨나싶었습니다.ㅎㅎ

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.02.27 14:41 신고 수 정

        꺄울~~설가면 티런님을 뵙는 건가요?ㅋ
        답글이 많이 늦었죠?
        무리해서 글을 썻더니... 다시 긴 잠수를 해버렸네요ㅋ
        3월부터 운영할 계획이니 자주 놀러 오세요^^&

    7. Favicon of http://22st.net BlogIcon 쌍둥이아빠 2010.01.19 09:37 수 정 댓 글

      잘보고 갑니당..

      오래간만에 포스팅을 하셨네욤..

      참..~ 나 삐졌답니다.. 쭌님한테 얘기들었어요.. 흥흥흥흥....ㅠ.ㅠ.

    8. Favicon of https://seeit.kr BlogIcon 하늘다래 2010.01.20 23:56 신고 수 정 댓 글

      깔끔하게 잘 정리 하셨네요 ^-^

    9. Favicon of https://bookple.com BlogIcon 아디오스(adios) 2010.01.27 03:40 신고 수 정 댓 글

      아우 html은 너무 어려워요 TT

      전 나모웹에디터 하나 깔아두고.. 필요할 때 열어서 사용하곤 해요 TT

      그러지 않으면 너무 어렵다는

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.02.27 14:43 신고 수 정

        자꾸 보고 쓰다보면 저절로 외워지니까...
        어렵다고 생각마시고 열심히~ㅋㅋ
        어렵다고 시작도 안하면 끝까지 모르고 나중에 더 힘이드니... 지금 조금 힘들더라도 조금씩 익혀보세요^^&

    10. Favicon of http://smilecap.tistory.com BlogIcon 스마일맨 2010.02.19 16:47 수 정 댓 글

      공부 쏙쏙~ ^^

      • Favicon of https://yesbe.tistory.com BlogIcon 예스비™ 2010.02.27 14:44 신고 수 정

        답글이 늦었죠? 죄송합니다~
        스마일맨님은 천재시군하~ㅋ
        감사합니다^^&

    11. BlogIcon 쌈진나라 2010.06.20 17:20 수 정 댓 글

      덕분에 도움이 많이 되었네요 ㄳ~~

    12. 최고 2010.09.12 18:54 수 정 댓 글

      블로그가 이쁘군요.
      주인장 만큼...
      강좌 잘 보았습니다.
      도움이 되었네요^^

    13. Favicon of http://unalpha.com BlogIcon 언알파 2010.11.16 15:54 수 정 댓 글

      오. 한마디로 대박입니다. 진짜 꼭 찾던거네요. align으로 left정렬했는데, 자꾸만 본문 글이 침범되길레 뭐가 문제인가했는데. hspace를 쓰는거였네요. 큰 도움이 되었습니다.

    14. Dko Young 2011.04.05 08:56 수 정 댓 글

      정말 감사드려요
      블로그를 만들거나 하는 사람은
      아니지만 덕분에
      팀장님이 시키신 문서
      그림파일까지 싹 다
      게제할 수 잇엇네요 ㅋㅋ
      감사해요!!

    최근 댓글

    최근 트랙백

    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