[HTML5&CSS3] 이미지관련 태그

Web/HTML5 & CSS3

클리엘 2019. 9. 20. 15:52

728x90

HTML에서 이미지를 사용하려면 기본적으로 img태그를 사용합니다.

<body>
    <img src="http://cliel.com/assets/img/item/home.png">
</body>

img 태그에서 src 속성은 이미지의 경로를 나타냅니다. 여기에 http://cliel.com/sample.jpg 처럼 URL을 통해 이미지를 지정할 수 있고 /images/sample.jpg 처럼 자신의 경로를 지정할 수도 있습니다.

참고로 당장 이미지가 필요하지 않다면 http://placehold.it/350x200 처럼 임시 이미지를 지정할 수도 있습니다.

alt 속성을 사용하면 이미지가 존재하지 않거나 기타 이유로 이미지가 표시되지 않을 때 특정 문구를 표시하게 할 수 있습니다.

<body>
    <img src="sample.jpg" alt="이미지가 없음">
</body>

더불어 width나 height 속성을 사용하면 표시할 이미지의 크기를 지정하는것이 가능합니다.

<body>
    <img src="http://cliel.com/assets/img/item/home.png" width="100" height="100">
</body>

728x90