오늘은 HTML의 <img> 태그에 대해 알아볼게요 😃
img태그 ( <img> )
HTML 문서에 image를 넣고싶을때 사용
<img> 태그는 <body> 태그 내부에 위치하며 src 속성에 "이미지가 들어있는 경로/이미지파일이름.확장자" 이렇게 작성해 주면 되는데요. 그림이 너무 커서 height(높이) 속성에 500이라고 지정해주어 사진을 줄였어요
(저는 img파일을 html 코드를 작성한 경로에 같이 넣어줘서 src 부분에 경로는 따로 표기하지 않았어요)
<body>
<img src="img.jpg" height="500">
</body>
위와 같이 코드를 작성해주면 아래와 같은 웹브라우저 화면을 볼 수 있어요
(사진만 캡처해서 가운데에 나오는 것처럼 보이지만 기본 화면에서 왼쪽 정렬되어 나타납니다)
그리고 img태그의 속성 중 아래와 같이 alt와 title 속성이 있는데요
<body>
<img src="img.jpg" height="500" alt="여행사진" title="여행사진">
</body>
alt는 예를 들어 img파일 이름이 아래와 같이 잘못 오타가 났을 경우 or 경로를 찾을 수 없는 경우에
<body>
<img src="imㄴㄹg.jpg" height="500" alt="여행사진" title="여행사진">
</body>
이미지가 나오지 않고 대신 어떤 이미지가 들어갔을지 유추할 수 있는 alt 속성에 작성한 글자가 나타나요.
혹시나 이미지가 안 보일 경우를 대비해서 alt 속성은 꼭 써주는 게 좋겠죠?
그리고 title 속성은 아래와 같이 이미지에 마우스를 가져다 놨을 때 해당 이미지에 대한 도움말이 나타나요.
img를 가운데 정렬하는 방법은 나중에 CSS를 포스팅할 때 설명할게요 🙂
'HTML' 카테고리의 다른 글
| script 태그의 위치는 어디가 좋을까? (0) | 2020.09.06 |
|---|---|
| [CSS] font-size, color (0) | 2020.08.26 |
| [HTML] p, br 태그 (0) | 2020.08.12 |
| HTML (HyperText Markup Language) (0) | 2020.08.03 |
| [티스토리 Book club 스킨] 블로그이름 폰트 수정 (0) | 2020.06.28 |
댓글