이미지를 생성할 때는 아래의 img 태그를 사용합니다.
|
<body> <img /> </body> |
img 태그에는 여러가지 속성이 있지만 그중 가장 중요한 속성은 아래 표와 같습니다.
| 속성 이름 | 설명 |
| src | 이미지 경로 지정 |
| alt | 이미지가 없을 때 나오는 글자 지정 |
| width | 이미지 너비 지정 |
| height | 이미지 높이 지정 |
최근에는 스타일시트를 이용해 입력하는 것이 일반적이므로 width 속성과 height 속성은 잘 사용하지 않습니다. src 속성에 이미지 경로를 입력하면 이미지가 뜹니다.
예시1
이미지 태그를 사용하여 코드를 입력하면 예시1의 결과가 나옵니다. src 속성에 입력한 이미지가 존재할 때는 이미지를 출력하고 이미지가 존재하지 않을 때는 오른쪽 그림처럼 alt 속성에 입력한 글자가 출력 됩니다.
예시2
마땅히 사용할 이미지 없는 경우 위의 예시2 처럼 http://placehold.it/widthxheight을 입력해서 빈 그림을 넣을 수 있습니다. widthxheight 부분에 크기를 지정 하면 됩니다.
'프로그래밍 공부 > HTML5' 카테고리의 다른 글
| HTML5 - 비디오 태그 (0) | 2019.11.12 |
|---|---|
| HTML5 - 오디오 태그 (0) | 2019.11.12 |
| HTML5 - 테이블 태그 (0) | 2019.11.11 |
| HTML5 - 목록 태그 (0) | 2019.11.11 |
| HTML5 - 글자 태그 (0) | 2019.11.11 |
