프론트엔드/HTML
Tag - 이미지(image) 관련
ksge7
2020. 8. 19. 15:40
이미지 표현하기
<body>
<img src="이미지 경로">
</body>HTML 문서에서 이미지를 표현하기 위해선 <img> 태그를 써주면 된다.
이미지 크기 조절하기
<body>
<img src="이미지 경로" width="500px", height="500px">
</body>이미지를 조절하기 위해서는 <img> 태그 안에 'width', 'height' 속성을 넣고 조절값을 입력해주면 된다.
이미지 대체하는 텍스트
<body>
<img src="이미지 경로" width="500px", height="500px" atl="메인 화면 이미지">
</body>이미지가 오류나서 뜨지 않거나 어떤 이미지에 설명 내부적으로 넣고 싶을 땐 'alt' 값을 속성으로 주면된다.
'alt'를 속성으로 주고 원하는 내용을 입력해주면 된다.
이미지에 설명 글 붙이기
<body>
<figure>
<img src="이미지 경로" width="500px", height="500px" atl="메인 화면 이미지">
<figcaption> 이미지에 대한 설명 </figcaption>
</figure>
</body>
alt와 다르게 html 화면 상에 나타나는 그림의 설명을 붙이고 싶을 땐 <figure>와 <figcaption> 태그를 쓴다.
<figure>태그를 써서 이미지와 이미지에 대한 설명이 있는 <figcaption>을 그 안에 같이 넣어주면 된다.