1. img 태그

웹 페이지에 이미지를 불러와 출력하는 태그입니다.

 

속성은 다음과 같습니다.

src : 이미지의 경로를 설정합니다.

width : 이미지의 너비를 설정합니다.

height : 이미지의 높이를 설정합니다. width 와 height 중 하나만 설정하면 나머지는 자동으로 비율에 맞춰 크기가 결정됩니다.

alt : 이미지가 나오지 않을 경우 이미지 대신 나타낼 문자열을 설정합니다.

title : 이미지 위에 마우스 커서를 올려 놓으면  나타나는 문자열을 설정합니다.

align : top, middle, bottom 을 지정하면 이미지 기준으로 옆의 글자들의 위치가 변경됩니다. left, right 를 지정하면 이미지 자체가 왼쪽 또는 오른쪽으로 정렬됩니다.

border : 이미지의 테두리선의 두께를 설정합니다.

bspace : 이미지의 좌우여백을 설정합니다.

vspace : 이미지의 상하여백을 설정합니다.

 

 

 

실습하기 전에 실습용 html 파일을 저장하는 위치에 image 라는 이름으로 폴더를 하나 만듭니다.

그리고 그 폴더 안에 아무 이미지 파일을 배경.jpg 라는 파일로 저장합니다.

그리고 나서 다음 실습을 따라하시면 오류없이 화면에 이미지가 잘 출력될 것입니다.

 

- 경로명 표시 방법 -

1. 현재폴더 : .

2. 상위폴더 : ..

3. 최상위펄더 : /

4. 하위폴더 : 폴더명

 

ex) ../그림파일명.확장자 - 상위 폴더
 /그림파일명.확장자 - 최상위 폴더

 

ex) img태그.html

 

 

by 개발자 CofS 2016.01.18 13:38
  • King_Max 2016.11.07 11:47 신고 ADDR EDIT/DEL REPLY

    매일 매일 꾸준히 공부해야하는데...잘 안되고 있네요;;
    월요일이니 마음 다잡고 다시 열심히 해보겠습니다! 좋은 포스팅 항상 감사히 보고 있습니다!

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2016.11.07 16:12 신고 EDIT/DEL

      항상 화이팅 하시고 궁금한 점이 있으시면 언제든지 두드려 주세요 ^^

  • 호호 2017.11.27 13:48 신고 ADDR EDIT/DEL REPLY

    <br clear=all>?? 먼뜻이죠

    • Favicon of https://cofs.tistory.com BlogIcon 개발자 CofS 2017.11.27 15:36 신고 EDIT/DEL

      본문 내용을 다시한번 읽어 보시기 바랍니다.
      이미지 태그의 align 속성으로 텍스트를 이미지 옆으로 위치시키다가 이미지 아래로 위치시키고 싶을 때 사용합니다.