상세 컨텐츠

본문 제목

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

Web/HTML5 & CSS3

by 클리엘 클리엘 2019.09.20 15:52

본문

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>

 

'Web > HTML5 & CSS3' 카테고리의 다른 글

[HTML5&CSS3] 비디오 태그  (0) 2019.09.25
[HTML5&CSS3] 오디오태그  (0) 2019.09.23
[HTML5&CSS3] 이미지관련 태그  (0) 2019.09.20
[HTML5/CSS3] 테이블 (Table)  (0) 2019.09.20
[HTML5&CSS3] 목록 관련 태그  (0) 2019.09.19
[HTML5&CSS3] 글자 관련 태그  (0) 2019.09.10

태그

관련글 더보기

댓글 영역