그림 태그의 기본 형태와 같이쓰이는 용어

  • <img src=”그림파일이있는위치”>:기본적인 형태입니다.
  • IMG : 그림(image)을 가르키는 단어입니다.
  • SRC : 물론, 주소를 말하고요…
  • ALIGN=”CENTER” : 정렬시킬 위치(‘LEFT’, ‘RIGHT’,’CENTER’)
  • ALT=”설명” : 그림위에 마우스가 올라갔을때 풍선설명박스가 보이도록합니다.
  • BORDER=’0′ : 그림의 테두리 두께를 지정합니다.
  • VSPACE=”(세로)값” : 그림과 글자간의 세로간격.
  • HSPACE=”(가로)값” : 그림과 글자간의 가로간격.
  • WIDTH=”가로수치” : 그림의 가로크기를 지정(원본이미지보다 크게하거나 적게보이게 할때 사용).
  • HEIGHT=”세로수치” : 그림의 세로크기를 지정합니다(원본이미지보다 크게하거나 적게보이게 할때 사용).
    그리고 그림파일을 많이 올릴 때 그림의 크기를 미리 지정해 주면 그림이 뜨는 시간을 줄일 수 있다합니다.
    <img src=img.gif” width=”200″ height=”200″>와 같이….
  • .gif, .jpg, .bmp, .jpeg…. 그림 파일의 확장명.(이 외에도 그림 파일의 확장명은 많습니다. 저도 다 모를 정도로요… 그렇지만 보통 인터넷에서는 gif, .jpg, .jpeg, .bmp 정도를 많이 쓰고 다른것은 거의(?) 쓰지 않습니다.)

  • 그림TAG의 여러가지 속성들….

    기본형 — <img src=”이미지 주소”>

    이미지 설명태그 — <img src=”이미지주소” alt=”이미지 설명쓰는 곳”>

    alt=”이미지 설명쓰는 곳”에서 이와같이 사용한다면 [이미지 설명쓰는 곳]라는 문장이 온전히 보이게 되나,
    alt=이미지 설명쓰는 곳처럼 문장에 따옴표로 묶어주지 않을경우에는
    [이미지]라는 단어만 보이게 됩니다.
    필히 설명은 따옴표로 묶어서 사용하는 버릇을 기르길 바랍니다.
    긴문장일 경우 설명의 줄바꿈은 “\n”(역슬레쉬+소문자N)으로 <BR>태그의 효과를 얻을 수 있습니다.

    햄버거가 정말 맛있겠다,\n그런데 다이어트 중이라서...ㅎㅎㅎ
    그림에 마우스를 올려보세요 ^^*

    그림의 위치정열 태그 <img src=”이미지주소” align=”수평위치”>

    위치는, “left” 또는 “right”로 합니다.아래에 첫번째 그림은 왼쪽이고, 그 다음은 오른쪽으로 정열시켜보겠습니다.


    위와 같은 태그를 사용하면 그림을 왼쪽으로 정열시킬 경우는 글자가 그림의 오른쪽으로 차근 차근 내려쌓입니다. 그러나 위와 같은 태그를 사용하지 않는다면 그림과 글씨가 어울리기 힘이듭니다 .
    예를 든다면이런 식으로 되기때문에 보기에도 어딘가 모르게 어설퍼 보입니다.

    그림크기조절 — <img src=”이미지주소” width=”가로넓이(픽셀수치)” height=”세로높이(픽셀수치)”>
    아래의 첫번째는 축소, 다음은 원래크기, 그리고 다음은 확대입니다.이 이미지의 원래의 크기는 가로,68 픽셀 ,세로 높이는 50픽셀인 이미지입니다.축소는 반의 크기로, 확대는 두배의 크기로 설정합니다.

    반으로 축소시킴!       원래의 크기임!       두배로 확대시킴!

    그림의 테두리 — <img src=”이미지주소” border=”테두리 굵기수치”>


    태그는 액자효과를 낼 수도 있으며, 이미지에 링크를 시킬경우에 생기는 테두리를 없에는 효과도 줄 수 있습니다. 링크된이미지에
    테두리가 생기면 어느모로 보더라도 보기에는 안좋습니다.이곳에 들어가는 숫자는 숫자의 크기가 클수록 테두리는 두꺼워집니다.첫번째
    그림은 테두리 수치를 “0”으로, 다음은 “1”로, 그 다음은 “10”으로 설정해 봅니다. 링크된 이미지는 테두리가 안보이나
    마우스가 올라가면 테두리가 생깁니다.그것을 방지하기 위해 링크이미지는 테두리를 “0”으로 설정하는 것이 좋습니다.
    border=0    border=1    border=10   

    예를 들어서 그림에 문서를 링크를 시킬경우에는
    <a href=”문서의주소”> <img src=”이미지주소”> </a> 와 같은 식으로 한다면,
    와 같이 보통은 파란색으로 테두리가 생겨서 보기에도 안좋아 보이지만,
    <a href=”문서의주소”> <img src=”이미지주소” border=”0″> </a>와 같은 식으로 한다면,
    와 같이 테두리가 생기질 않습니다.

  • 3 thoughts on “그림 태그의 기본 형태와 같이쓰이는 용어”

    1. 안녕하세요.
      반갑습니다. 결혼 축하 하구요.. 행복 하세요..

      그리고 HTML 실력이 막강하신 것 같은데 히히
      내 블로그 보시고 혹시 좋은 의견 같은 거 있으면 부탁 합니다..

      친구 합시다요..

      ReplyReply

    Leave a Reply

    Your email address will not be published. Required fields are marked *