HTML - <img> 이미지를 삽이하는 태그 알아보기




    HTML에서는 이미지를 삽입할 때 img 태그를 사용합니다

    이번에는 포스팅에서는 웹페이지에서 이미지를 포함하기 위해 사용되는 img 태그에 대해서 알아보도록 하겠습니다





     HTML - 이미지 삽입과 속성 알아보기



    HTML에서 이미지를 사용할 때 사용하는 태그는 img를 사용하는데 img 태그에서는 속성이 있습니다


    1) src 속성

    - src는 source의 약어로 이미지 파일의 위치를 정하는 속성


    <html>
    <body>
    <img src="html_img.jpg">
    </body>
    </html>
    



    위 내용을 보시면 이미지가 삽입된것을 확인하실 수 있습니다



    2) width, height 속성

    - width, height는 이미지의 너비와 높이를 정하는 속성



    <html>
    <body>
    <img src="html_img.jpg" width="400" height="400">
    </body>
    </html>
    




    위 그림을 보시면 이미지의 사이즈가 변경된것을 확인하실 수 있습니다



    3) alt 속성

    - alt는 이미지가 없을때 텍스트로 대체하는 속성




    이미지가 없을 경우에 위 그림과 같이 이미지를 표시할 수 없게 됩니다 이러한 경우 이미지의 대한 정보를 알 수가 없습니다 




    <html>
    <body>
    <img src="html_img-1.jpg" width="200" height="300" alt="Page Not Found">
    </body>
    </html>
    



    이때, alt 속성을 이용하여 대체 텍스트를 이용하면 이미지가 표시할 수 없게 되었을 때 이미지를 설명하는 텍스트가 들어가도록 설정할 수 있습니다



    4) title 속성

    - 이미지의 말풍선의 속성을 표시해주는 속성입니다



    <html>
    <body>
    <img src="html_img.jpg" width="200" height="300" alt="Page Not Found" title="HTML_IMG!!">
    </body>
    </html>
    



    위 그림을 보시면 해당 이미지의 마우스를 올려놓게 되면 말풍선이 표시되는것을 확인하실 수 있습니다

    Posted by Server-talk 서버이야기