Tag - 이미지(image) 관련

프론트엔드/HTML 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>을 그 안에 같이 넣어주면 된다.

컴퓨터 공부하는 블로그 컴퓨터 공부하는 블로그